Laravel Filamentで管理画面を作る①　モデルの準備と一覧表示画面

こんにちは。今回はLaravel Filamentを使用して簡単なCRUD機能を作成していこうと思います。説明が長くなるので、本記事では「モデルの準備と一覧表示画面の作成」までを説明します。

前提条件

環境

以下のバージョンでプロジェクトが作成済である前提とします。準備手順は当ブログの記事を参考にしてください。Laravel Filamentのインストール手順

  • Laravel 10
  • Filament 3

モデルの準備

今回はcustomers(顧客）テーブルに対するCRUD機能を作成します。テーブルレイアウトは次の通りです。

id (sequence)顧客のID（主キー）
name (varchar)顧客名
age (integer)顧客の年齢

それではテーブルの作成からテストデータの登録までを以下の手順で実施していきましょう。

マイグレーションでテーブルを作成する

customersテーブルをcreateするマイグレーションを作成します。

php artisan make:migration create_customers_table --create=customers

マイグレーションのコードを作成します。

    public function up(): void
    {
        Schema::create('customers', function (Blueprint $table) {
            $table->increments('id');
            $table->string('name');
            $table->integer('age');
            $table->timestamps();
        });
    }

マイグレーションを実行します。

php artisan migrate

customersテーブルが作成できました。

モデルを作る

customersテーブルを操作するEloquentモデルを作成します。

 php artisan make:model Customer

app/Models/Customer.phpが作成されました。

ファクトリーでテストデータを作る

テストデータを作成するために、ファクトリーを作成します。

php artisan make:factory Customer

database/factories/CustomerFactory.phpが作成されました。

ファクトリーの中身を編集しましょう。definitionメソッドに、作成する値を定義していきます。fakerを使用すると、ダミーデータが簡単に作れます。

class CustomerFactory extends Factory
{
    /**
     * Define the model's default state.
     *
     * @return array<string, mixed>
     */
    public function definition(): array
    {
        return [
            'name' => $this->faker->name(),
            'age' => rand(20, 60) // 20歳～60歳のランダム値
        ];
    }
}

次にシーダーを作ります。シーダーから作成したFactoryを呼び出してテストデータを作る仕組みです。

まずはartisan コマンドでSeederファイルを作ります。

$ php artisan make:seed CustomersSeeder

runメソッド内を編集し、CustomerFactoryでデータを50件作るように設定します。

<?php

namespace Database\Seeders;

use Illuminate\Database\Console\Seeds\WithoutModelEvents;
use Illuminate\Database\Seeder;

class CustomersSeeder extends Seeder
{
    /**
     * Run the database seeds.
     */
    public function run(): void
    {
        // データを50件作成します
        \App\Models\Customer::factory()->count(50)->create();
    }
}

DatabaseSeederからCustomerSeederを呼び出すように設定します。

    public function run(): void
    {
        $this->call(CustomersSeeder::class);
    }

シーダーを実行します。

$ php artisan db:seed

テストデータ作成まで完了しました。いよいよWeb画面を作成していきます。

Filamentリソースを作る

filamentにはリソースという概念があります。これはLaravelでいうところのEloquentモデルと一致します。リソースを作成し、そのリソースを閲覧、登録、更新、削除する画面を順番に作成していきます。

まずはリソースを一式作成します。artisan make:filament-resourceコマンドを実行します。リソースにはEloquentORMを指定しなければならないので、Customerを引数に設定します。–generateオプションを付与することで、一覧、登録画面を一通り作成してくれます。

$ php artisan make:filament-resource Customer --generate

app/Filament/Resources/CustomerResource.php created successfully.

上記のコマンドを実行するとリソースが一式作成されます。

app/filament/Resources/
　CustomerResource.php
　CustomerResource/Pages
　　CreateCustomer.php
　　EditCustomer.php
　　ListCustomer.php

app/filament/Resources/CustomerResource.phpを編集します。

一覧画面に表示する項目を設定していきます。$table->columnsメソッドへ顧客名と年齢を表示するよう追加してみましょう。


    public static function table(Table $table): Table
    {
        return $table
            ->columns([
                // 一覧へ表示する2項目を追加します
                Tables\Columns\TextColumn::make('name')->label('顧客名'),
                Tables\Columns\TextColumn::make('age')->label('年齢'),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

上記の編集後、ブラウザから/adminへアクセスしてみます。左のナビゲーションにはCustomerが追加されており、そこへ移動すると、先ほど作成した５０件のテストデータが表示されていることが確認できます。

まとめ

今回はFilamentで以下の手順を説明しました。

  • モデルを準備する
  • 一覧画面を作る

ここまではかなり少ないコード量で作成できたと思います。次回、一覧画面にソートやフィルターを付けて、実用的な機能へ仕上げていきたいと思います。

Laravel

Posted by kobainmac