LaravelでFilamentを使用して効率的に管理画面を作成：Role の CRUD 処理の実装方法

Filamentは、Laravelの拡張パッケージのひとつ。管理画面作成の手間を減らせます。

Filamentを使用して作成できる管理画面の機能例をいくつか挙げてみますね。

オンラインショップの商品 – 商品の追加、編集、削除、カテゴリ管理、在庫の追跡
会員制サイトの役割 – ユーザーのロールと権限の管理、会員情報の編集と更新
注文処理システム – 顧客からの注文の管理

今回の記事では、filamentを使って、会員制サイトに役割（ROLE）のCRUD処理（新規作成・編集機能）を組み込む方法を説明します。

CRUD処理を使って機能をひとつずつ搭載するのに比べて、手間が半減します。

filamentでどんなふうに機能を搭載するのか、ご興味あれば、参考にしてくださいね。

Laravel10でFilament使って管理画面作成の手間を激減：役割データを作ってみよう
注意点
1. 通常ユーザー用の画面は別途作成が必要
2. デプロイ時の設定について
さいごに

Laravel10でFilament使って管理画面作成の手間を激減：役割データを作ってみよう

まずは、通常どおりLaravelのプロジェクトを作成します。プロジェクト作成は、下記の記事を参考にしてください。

Laravel 12 対応：インストールと環境構築：XAMPP & Node 使用・Windows 編【Laravel 入門講座】

Windows環境でXAMPP(ザンプ）を使ったLaravelのインストール・開発環境構築方法を解説します。最初はインストールするものも多いので、すごくスムーズに進められたとして、2～3時間は見ておいたほうが良いでしょう。はまると、もっとか...

ROLEモデルとマイグレーション作成

ROLEモデルとマイグレーションを作成します。

php artisan make:model Role -m

それぞれ、コードをいれます。

[app/Models/Role.php]

class Role extends Model
{
    use HasFactory;
    // 追加
    protected $fillable = [
        'name',
    ];
}

[database/migrations/作成したマイグレーションファイル]

    public function up(): void
    {
        Schema::create('roles', function (Blueprint $table) {
            $table->id();
            // １行追加
            $table->string('name');
            $table->timestamps();
        });
    }

マイグレートを実行します。

php artisan migrate

filamentインストール

filamentをインストールします。

composer require filament/filament:"^3.1" -W

filamentのセットアップを行いまうコマンドを実行します。

php artisan filament:install --panels

実行後、「What is the ID?[admin]」と表示されますが、そのままEnterキーを押します。

最後に「All done! Would you like to show some love by starring the Filament repo on GitHub? (yes/no) [yes]」とでます。

filamentが気にいったら、Enterを押して、GitHubでスターをつけておきましょう＾＾

filamentユーザー作成

次にユーザーを作成します。コマンドを実行します。

php artisan make:filament-user

名前とEメールとパスワードを聞かれるので、入力していきます。

ユーザー作成後、ブラウザに”ドメイン/admin”を表示します。管理者用ログイン画面を表示でっきます。

先ほど作成したEmailとパスワードを使って、ログインしてみましょう。

美しいページができあがっていて、ちょっと嬉しくなります。

filamentでRoleリソースクラスを作成

次にfilamentでRoleリソースクラスを作成します。これによって、Roleの新規作成・編集・削除ができるようになります。

まずは下記コマンドを実施します。

php artisan make:filament-resource Role

app/Filamentの中にファイルができます。その中のRoleResources.phpを開きます。コードを加えます。

まずはformメソッドの中に、下記コードを追加します。これによって、Roleの新規作成・編集用フォームにname入力欄が表示されます。

[app/Filament/Resources/RoleResources.php]

    public static function form(Form $form): Form
    {
        return $form
            ->schema([
                // ３行追加
                Forms\Components\TextInput::make('name')
                ->required()
                ->maxLength(255),
            ]);
    }

次に、tableメソッドの中に、下記コードを追加します。これによって、Roleの一覧画面にnameが表示されます。

[app/Filament/Resources/RoleResources.php]

 public static function table(Table $table): Table
    {
        return $table
            ->columns([
                // １行追加
                Tables\Columns\TextColumn::make('name'),
            ])
            ->filters([
                //
            ])
            ->actions([
                Tables\Actions\EditAction::make(),
            ])
            ->bulkActions([
                Tables\Actions\BulkActionGroup::make([
                    Tables\Actions\DeleteBulkAction::make(),
                ]),
            ]);
    }

以上です。画面を表示してみると、すでにサイドバーに【Roles】ができています。

選択すると、右上に【New role】ボタンがあり、こちらをクリックすると新規作成画面が表示されます。試しにRoleを作成してみてください。

作成したRoleは、一覧画面より選択できます。選択後、編集・削除も可能です。

注意点

以上となりますが、さいごに２点ほどご留意点があります。

通常ユーザー用の画面は別途作成が必要

filamentで作成するのは管理者専用画面です。通常のユーザー用ログイン画面は、Breeze等を使って作成する必要があります。

デプロイ時の設定について

デフォルトではすべてのユーザーモデルは、ローカル上でFilamentにアクセスできます。ただ本番環境にデプロイする際には、App/Models/User.phpファイルにコードを追加して、限られたユーザーのみがアクセスできるようにしておきましょう。

<?php
 
namespace App\Models;
 
use Filament\Models\Contracts\FilamentUser;
use Filament\Panel;
use Illuminate\Foundation\Auth\User as Authenticatable;
 
class User extends Authenticatable implements FilamentUser
{
    // ...
 
    public function canAccessPanel(Panel $panel): bool
    {
        return str_ends_with($this->email, '@yourdomain.com') && $this->hasVerifiedEmail();
    }
}

こちら、公式マニュアルに記載があります。