Inertiaによる画面遷移
本連載は、LaravelのLivewireとInertiaを利用して、フロントエンド的な画面作成方法を紹介しています。最終回である今回は、Inertiaによる画面遷移から話を始めていきます。本連載のサンプルデータは、GitHubから参照できます。
アクションメソッドを省略できるinertia()
前回のリスト5で作成したカクテルリスト画面には、以下のコードの［カクテルの追加はこちら］というリンクがあります（前回のリスト5の（13））。
<a href="#">カクテルの追加はこちら</a> // (13)
このリンクをクリックすると、図1のカクテル追加画面が表示されるとします。この画面は、第2回の図3と同様の画面であり、その仕組みも第2回と同様です。
前回のInertiaの利用手順で紹介したように、このカクテル追加画面を表示させる基本的なコーディングは、Bladeを利用したものと変わりません。
まずは、コントローラクラスにアクションメソッドを用意し、ルーティング登録をする必要があります。ただし、単に画面を表示させる場合は、アクションメソッド内の処理内容は以下の1行のみ、すなわち単なるコンポーネントへの処理移管コードのみとなります。
なお、カクテル追加画面のコンポーネントをCocktailAdd.vueとしています。
return Inertia::render("cocktail/CocktailAdd");
この場合、アクションメソッドの実装を省略できるルーティング登録方法があり、リスト1のコードとなります。
Route::inertia("/showCocktailAdd", "cocktail/CocktailAdd");
Routeクラスのget()メソッドの代わりに、inertia()メソッドを利用し、第2引数として表示させるコンポーネントを指定します。これだけで、第1引数のパスにアクセスした場合に、指定コンポーネントが表示されるようになります。
リンク設定はLinkコンポーネントを利用
これでルーティングの設定ができたので、リスト1のパスである/showCocktailAddを、前回のリスト5の（13）のhref属性に指定すれば、図1のカクテル追加画面が表示されます。
ただしこの方法、すなわち通常のaタグによるリンクでは、画面全体が再レンダリングされる問題があります（図2）。これはaタグの性質を考えると当然ですが、効率が悪く、フロントエンド的な画面遷移ではありません。
その問題を解決する手段として、InertiaにはLinkコンポーネントが用意されています。これを利用し、カクテル追加画面を表示させるリンクコードは、リスト2のようにします。こうすることで、図3のように、必要な部分だけがレンダリングされるようになります。図3でいえば赤色の部分、すなわちidがappのdivタグ内だけがJavaScriptによってレンダリングされるようになり、シングルページアプリケーションのような画面遷移が実現できるようになります。
: <p> <Link href="/showCocktailAdd">カクテルの追加はこちら</Link> </p> :
