LaravelとFilamentを使って管理画面を爆速構築【株式会社ライトコード】

こんにちは！

Laravelを使ったアプリを作る際に管理画面が必要になったのですが、Filamentというライブラリを使うと爆速でいい感じの管理画面を作ることができました！

今回はFilamentについて、簡単なブログ投稿機能を作りながら紹介していきたいと思います！

環境

Mac M1
Laravel 11

※事前に下記を対応している状態です。

Laravel公式サイトのこちらからDockerを使ってLaravelのプロジェクトを立ち上げている
こちらの内容の通りaliasの設定をしてsailコマンドを簡単に使えるようにしている

Filamentの導入

既存のLaravelプロジェクト直下で次のコマンドを使ってFilamentを導入していきます。

$ sail composer require filament/filament:"^3.2" -W

$ sail php artisan filament:install --panels

次のように聞かれるので、2回ともデフォルトのままEnterキーを押します。

 ┌ What is the ID? ─────────────────────────────────────────────┐

 │ admin                                                        │

 └──────────────────────────────────────────────────────────────┘



┌ All done! Would you like to show some love by starring the Filament repo on GitHub? ┐

│ ● Yes / ○ No                                                                        │

└─────────────────────────────────────────────────────────────────────────────────────┘

完了後に localhost/adminにアクセスすると、すでにログイン画面が完成しておりました。

ログインユーザーの作成

ではログインするためのユーザーを作成するために次のコマンドを実行します。

$sail php artisan make:filament-user

すると下記のように「Name」と「Email address」と「Password」の入力を求められるので、設定してください。

$ sail php artisan make:filament-user







 ┌ Name ────────────────────────────────────────────────────────┐

 │ test                                                         │

 └──────────────────────────────────────────────────────────────┘



 ┌ Email address ───────────────────────────────────────────────┐

 │ test@demo.com                                                │

 └──────────────────────────────────────────────────────────────┘



 ┌ Password ────────────────────────────────────────────────────┐

 │ ••••••••                                                     │

 └──────────────────────────────────────────────────────────────┘



   INFO  Success! test@demo.com may now log in at http://localhost/admin/login.

では、上記で設定したメールアドレスとパスワードを使って、ログインしてみましょう！

ログインに成功すると、下の画像のような画面になるかと思います！

モデルの追加とデータベースのセットアップ

先述した通り、簡単なブログ投稿機能を作っていくので、「投稿」と「カテゴリー」のモデルを次のコマンドを実行して追加します。

$sail php artisan make:model Post -m

$sail php artisan make:model Category -m

app/ModelsディレクトリにPost.phpファイルとCategory.phpファイル、databases/migrationsディレクトリにそれぞれのマイグレーションファイルが作成されます。

続いて、次のようにマイグレーションファイルを編集してテーブルの列を追加します。

// YYYY_MM_DD_XXXXX_create_posts_table.php

.

.

    public function up(): void

    {

        Schema::create('posts', function (Blueprint $table) {

            $table->id();

            $table->string('title');                                                     // 追加部分

            $table->text('content');                                                     // 追加部分

            $table->foreignId('user_id')->constrained('users')->cascadeOnDelete();  // 追加部分

            $table->foreignId('category_id')->constrained('categories');               // 追加部分

            $table->timestamps();

        });

    }

.

.

// YYYY_MM_DD_XXXXX_create_categories_table.php

.

.

    public function up(): void

    {

        Schema::create('categories', function (Blueprint $table) {

            $table->id();

            $table->string("name");  // 追加部分

            $table->timestamps();

        });

    }

.

.

上記のコードを追加したら、次のコマンドでpostsテーブルとcategoriesテーブルを作成します。

※postsテーブルにcategoriesテーブルのidが外部キーとして設定されているため、先にcategoriesテーブルを作成する必要があります。

$ sail php artisan migrate --path=/database/migrations/YYYY_MM_DD_XXXXX_create_categories_table.php

$ sail php artisan migrate --path=/database/migrations/YYYY_MM_DD_XXXXX_create_posts_table.php