AdminJSで管理画面を作ってみた

◆ Live配信スケジュール ◆
サイオステクノロジーでは、Microsoft MVPの武井による「わかりみの深いシリーズ」など、定期的なLive配信を行っています。
⇒ 詳細スケジュールはこちらから
⇒ 見逃してしまった方はYoutubeチャンネルをご覧ください
VSCode Dev Containersで楽々開発環境構築祭り〜Python/Reactなどなど〜
Visual Studio Codeの拡張機能であるDev Containersを使ってReactとかPythonとかSpring Bootとかの開発環境をラクチンで構築する方法を紹介するイベントです。
https://tech-lab.connpass.com/event/311864/

はじめに

こんにちは、エンジニアのあさりです。今回は、AdminJSというNode.jsのフレームワークを用いて簡単に管理画面を実装する方法を紹介します。

AdminJSとは?

AdminJS は、Node.js アプリケーション用のオープンソース管理パネルです。特定のデータベースに依存することはなく、既存のNode.jsサーバーと使用しているORM/ODMと統合して、データを管理し、CRUD操作を実行するためのインターフェースを生成します。

環境

  • OS : Windows10
  • Node.js v18.16.0
  • Admin.js v7.3.0
  • Express v4.18.2
  • Mongoose v7.6.3

AdminJSの導入

今回は、Express×Mongoose×MongoDBという構成で作成したアプリケーションにAdminJSを導入していきます。MongoDBには、UserテーブルとFacultyテーブルを用意しており、データもすでに格納している状態です。AdminJSは、バージョン7以降、CommonJSでは動作しないため、CommonJSでアプリケーションを開発されている場合は、ES Modulesへの移行が必要となります。

まずは、AdminJSのパッケージをインストールします。

npm install adminjs

次に、プラグインと呼ばれる各サーバーに対応したモジュールをインストールします。今回はExpressを使用しているのでExpressのプラグインをインストールします。

npm install @adminjs/express   # for Express server
npm install @adminjs/nestjs    # for Nest server
npm install @adminjs/hapi      # for Hapi server
npm install @adminjs/koa       # for Koa server
npm install @adminjs/fastify   # for Fastify server

次に、以下の中から使用しているORM/ODMに応じてアダプターと呼ばれるモジュールをインストールします。今回はMongooseを使用しているのでMongooseのアダプターをインストールします。

npm install @adminjs/typeorm      # for TypeORM
npm install @adminjs/sequelize    # for Sequelize
npm install @adminjs/mongoose     # for Mongoose
npm install @adminjs/prisma       # for Prisma
npm install @adminjs/mikroorm     # for MikroORM
npm install @adminjs/objection    # for Objection
npm install @adminjs/sql          # for raw SQL, currently supports only Postgres

これで必要なパッケージのインストールは完了したので、公式ドキュメントを参考に以下のようにプラグインを導入していきます。他のフレームワークを使用している場合は、公式ドキュメントから他のフレームワークのサンプルを参考にしてみてください。

#app.js
import AdminJS from 'adminjs'
import AdminJSExpress from '@adminjs/express'
import express from 'express'

const app = express();
const PORT = 8080;

const admin = new AdminJS({})
const adminRouter = AdminJSExpress.buildRouter(admin)
app.use(admin.options.rootPath, adminRouter)

app.listen(PORT, () => {
console.log(`AdminJS started on http://localhost:${PORT}${admin.options.rootPath}`)
})

次に、アダプターを用いてAdminJSとDBの接続を行います。こちらも公式を参考に以下のように導入します。他のORM/ODMを使用している場合は、公式ドキュメントから他のORM/ODMのサンプルを参考にしてみてください。

#app.js
import AdminJS from 'adminjs'
import AdminJSExpress from '@adminjs/express'
import express from 'express'
import * as AdminJSMongoose from "@adminjs/mongoose";
import mongoose from "mongoose";

//接続したいmongooseスキーマをインポートします
import { User } from "./models/User.js";
import { Faculty } from "./models/User.js";

const app = express();
const PORT = 8080;

AdminJS.registerAdapter({
  Resource: AdminJSMongoose.Resource,
  Database: AdminJSMongoose.Database,
});

//DBと接続
mongoose.connect(env.MONGOURL)
const adminOptions = {
  // 接続したいテーブルをresourcesに渡します
  resources: [
	  {resource: User},
	  {resource: Faculty},
	],
}

const admin = new AdminJS(adminOptions)
const adminRouter = AdminJSExpress.buildRouter(admin)
app.use(admin.options.rootPath, adminRouter)

app.listen(PORT, () => {
console.log(`AdminJS started on http://localhost:${PORT}${admin.options.rootPath}`)
})

サーバーを起動して、http://localhost:8080/adminにアクセスしてみてください。ダッシュボード左上のハンバーガーメニューを展開すると以下の画像のようにUser、Facultyテーブルにアクセスできるようになっていると思います。

実装される機能について

ここまでの実装で生成された機能を以下にまとめます。

  • CRUD操作
    • CREATE(画像内①から)
    • READ、UPDATE、DELETE(画像内②、3点リーダーを展開すると表示されます)
  • 全件に対するソート機能(画像内③ではメールアドレスですが、その他の項目についても可能)
  • フィルター機能(画像内④、単一項目については部分一致検索、複数項目についてはAND検索)

まとめ

今回は、AdminJSによる管理画面の実装方法を紹介しました。AdminJSは、CRUD操作だけでなく、Import/Export機能、ログ機能などの拡張機能やUIのカスタマイズ、独自の機能実装なども可能なのでぜひ試してみてください。

アバター画像
About あさり 3 Articles
サイオステクノロジー2023年新卒入社の新米エンジニアです。

ご覧いただきありがとうございます! この投稿はお役に立ちましたか?

役に立った 役に立たなかった

0人がこの投稿は役に立ったと言っています。


ご覧いただきありがとうございます。
ブログの最新情報はSNSでも発信しております。
ぜひTwitterのフォロー&Facebookページにいいねをお願い致します!



>> 雑誌等の執筆依頼を受付しております。
   ご希望の方はお気軽にお問い合わせください!

Be the first to comment

Leave a Reply

Your email address will not be published.


*


質問はこちら 閉じる