Laravel + inertia ＋ Vue　スターターキットで作成されるソースで仕組みを理解する

WSLでスターターキットを使う方法で解説したように、簡単に開発環境を構築することが可能です。今回は Laravel でシングルページアプリケーションを作成するにあたって、スターターキットを利用してフロントエンドにVueを使う環境を構築、そのソースからinertiaの役割について確認したことを書いてみます。LaravelとVueの基本的な使い方はすでに理解しているものとし個別に説明はしていません。ちなみにinertiaについて簡単な概要をこちらでも記事にしています。
参考ページとしてスターターキットで作成されたなかからProfile画面を対象としました。

ルーティング

// web.phpより
Route::middleware('auth')->group(function () {
    Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
    Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
    Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
});

Laravelのフレームワークに従いルーティングを定義します。
URLに/profileを指定するとgetメソッドによりProfileControllerのeditメソッドが呼び出されます。

レスポンス

// ProfileController.php
 public function edit(Request $request): Response
    {
        return Inertia::render('Profile/Edit', [
            'mustVerifyEmail' => $request->user() instanceof MustVerifyEmail,
            'status' => session('status'),
        ]);
    }

ビューを返すときに、viewヘルパーでBladeに繋げるところを、Inertia::render()メソッドを使ってVueのコンポーネントに繋げるようにします。第一引数ではコンポーネント名を指定し、第二引数には返却するデータを指定します。
詳細は公式ドキュメントも参照してください。

// Pages/Profile/Edit.vue
defineProps({
    mustVerifyEmail: {
        type: Boolean,
    },
    status: {
        type: String,
    },
});

VueではdefinePropsによりサーバーで返却されたデータを受け取ります。

リクエスト

プロフィールを更新するコンポーネントが UpdateProfileInformationForm です。名前とEメールのテキストフィールドがあり、その情報の更新が出来ます。

// Pages/Profile/Partials/UpdateProfileInformationForm.vue
const form = useForm({
    name: user.name,
    email: user.email,
});

inertiaは useForm ヘルパーを提供していて、フォームデータをjavascriptで操作する事ができます。
saveボタンによりフォームが送信され<form @submit.prevent="form.patch(route('profile.update'))" > のように記述することでpatchメソッドとしてサーバーにデータが送信されます。route 関数はZiggyライブラリで、Laravelのルーティング定義でつけた名前を引数に指定するとURLが返るようです。よって profile.update と名前をつけたURLに対してpatchメソッドでサーバーにデータが送信されます。
Ziggyはスターターキットを利用するときに合わせてインストール・設定済みでした。
詳細は公式ドキュメントも参照してください。

Shared data

アプリケーション内の複数のページで特定のデータにアクセスする必要がある場合があります。今回の場合はログインしたユーザーの情報です。アプリケーションのレスポンスごとに手動でデータを渡すのは手間なので、Shared data という仕組みがあります。

// app/Http/Middleware/HandleInertiaRequests.php
public function share(Request $request): array
{
    return [
        ...parent::share($request),
        'auth' => [
            'user' => $request->user(),
        ],
    ];
}

共有したいデータをミドルウェアによって処理できます。
Vueで共有データにアクセスしたい場合は、 usePage() ヘルパーを使います。UpdateProfileInformationForm.vue にconst user = usePage().props.auth.user; の記述があります。これにより現在のユーザーとEメールアドレスの情報を取得してデフォルトの値として利用しています。

詳細は公式ドキュメントも参照してください。

まとめ

inertiaはシングルページアプリケーションのサーバーサイドとクライアントサイドでデータの受け渡しにおいて必要な機能を提供するものです。
inertiaによって、サーバーサイドでRESTなどのWebAPIとしJSONデータを返す仕組みで作成し、クライアントではAjaxなどを使ってデータのやり取りを実装する必要がなくなります。開発においてビジネスロジックの開発にリソースを多く割く事ができて開発効率があがる可能性があります。
サーバーサイドとクライアントサイドのソースが別々のリポジトリで管理する必要もなくなります。