Laravel でデータベース操作の基本であるCRUD(Create（作成）」「Read（読み取り）」「Update（更新）」「Delete（削除）)を実装する

Laravel Sailを使うと環境を構築できることを確認しました。スターターキットで開発環境を構築したあとに、データベース操作の基本であるCRUD(Create（作成）」「Read（読み取り）」「Update（更新）」「Delete（削除）)を実装してみます。Laravel のフレームワークとinertiaでシングルページアプリケーションを構築した所感を記事にしました。

モデル、ファクトリ、シーダー、リソースコントローラー、フォームリクエストの雛形を作成

php artisan make:model Post -mfscrR

例としてブログの記事に対してCRUDを実装してみます。
上記コマンドでモデル、ファクトリ、シーダー、リソースコントローラー、フォームリクエストの雛形を作成します。

ブログの記事を保存するテーブルを作成

ブログの記事を保存するテーブルを作成します。database/migrations/ に作成された雛形を編集します。

public function up(): void
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->string('title')->comment('タイトル');
            $table->text('excerpt')->comment('抜粋');
            $table->text('body')->comment('本文');
            $table->timestamps();
            $table->softDeletes();
        });
    }

マイグレーションで作成されたファイルに、タイトル、抜粋、本文を追加し、よくある論理削除のためのデーブルを作成してみました。

php artisan make:migrate

ファクトリ、シーダーを使ってデータの作成

ファクトリを定義

// database/factories/PostFactory.php
public function definition(): array
    {
        return [
            //
            'title' => fake()->sentence(8),
            'excerpt' => fake()->paragraph(2),
            'body' => fake()->paragraph(10),
        ];
    }

シーダーを定義

// database/seeders/PostSeeder.php
public function run(): void
    {
        //
        Post::factory()
            ->count(50)
            ->create();
    }

シーダーの実行

php artisan db:seed --class=PostSeeder

画面の作成

ブログの投稿記事に対する基礎的な準備が終わり、画面の作成に入ります。一覧の表示、特定のブログ記事の表示を実装し、新規登録、編集、削除を実装していきます。

// routes/web.php
Route::resource('posts', PostController::class);

まずCRUDのためのルーティングを追加します。resource メソッドはリソースコントローラにCRUDに一般的なメソッド名とルーティング名を一度の設定出来ます。
リソースコントローラの詳細は公式ドキュメントを参照してください。

ブログ一覧画面の作成

// app/Http/Controllers/PostController.php
public function index(): Response
    {
        return Inertia::render('Posts/Index', [
            'posts' => Post::latest()->get(),
        ]);
    }

Inertia::render メソッドを使って、Posts/Index コンポーネントに投稿記事をひとまずすべて返却します。

// resources/js/Pages/Posts/Index.vue
defineProps({
    posts: {
        type: Object,
    },
});

サーバーから送信されたデータをクライアントで受け取ります。
タイトル部分をクリックすると任意のブログを表示させる画面に遷移させるためにinertiaの <Link> コンポーネントを使います。<Link> コンポーネントは <a> タグを軽量にラップしたものでクリックイベントをインターセプトし、ページ全体の再読み込みを防ぎます。これにより部分的にページの一部のコンポーネントだけを更新させているようです。
<Link> コンポーネントの詳細は公式ドキュメントを参照してください。

ブログの表示・編集・新規登録・削除

ブログの表示・編集・新規登録・削除はinertiaの useForm ヘルパーと Link コンポーネントを使うとそれほど迷うことなく作成出来ました。
こちらのスターターキットのソースについて解説した記事も合わせて確認してみてください。
シンプルな機能だけを利用しているのでまだまだ使い勝手を良くする余地はたくさんあります。CRUDについては概ね抑えられていると思います。
特別に記すこともなかったので詳細はソース一式をgitHubにアップしているのでそちらを参考にしてみてください。
tailwindcssのドキュメント参照してレイアウトの調整もスムーズでした。少しviteのホットリロードのクセなのか、使っていないtailwindcssのクラスを使うと環境を再起動しないと反映されない動きに戸惑いましたが気がつけば対処出来る程度でした。自分の環境の問題かもしれませんが環境設定はスターターキット任せなので自身で手を入れているところがないことを思うとその可能性は低い気もします。

まとめ

LaravelとVueの基本的な機能を把握していれば、新規開発でinertiaの導入の検討をする価値が十分にあると思います。
Laravelでシングルページアプリケーションを作る場合の課題について別の記事に書いているので参考にしてください。