LaravelのInertia＋Vueの組み合わせでフロントエンド的な画面を作成する【応用編】

LivewireとInertiaによるLaravelのフロントエンド的画面作成入門 第4回

　PHPフレームワークのデファクトスタンダードの地位を確立したといえるLaravelには、フロントエンド開発的な画面の作成を標準でサポートしています。本連載では、その際に利用するLivewireとInertiaによるVueの利用方法を紹介しています。前回は、InertiaとVueの組合せを使って、Inertiaの使い方の基本を紹介しました。最終回である今回は、Inertiaにおける画面遷移の方法とフォームの扱い方を紹介します。

Inertiaによる画面遷移

　本連載は、LaravelのLivewireとInertiaを利用して、フロントエンド的な画面作成方法を紹介しています。最終回である今回は、Inertiaによる画面遷移から話を始めていきます。本連載のサンプルデータは、GitHubから参照できます。

アクションメソッドを省略できるinertia()

　前回のリスト5で作成したカクテルリスト画面には、以下のコードの［カクテルの追加はこちら］というリンクがあります（前回のリスト5の（13））。

<a href="#">カクテルの追加はこちら</a>  // (13)

　このリンクをクリックすると、図1のカクテル追加画面が表示されるとします。この画面は、第2回の図3と同様の画面であり、その仕組みも第2回と同様です。

図1：カクテル追加画面

　前回のInertiaの利用手順で紹介したように、このカクテル追加画面を表示させる基本的なコーディングは、Bladeを利用したものと変わりません。

　まずは、コントローラクラスにアクションメソッドを用意し、ルーティング登録をする必要があります。ただし、単に画面を表示させる場合は、アクションメソッド内の処理内容は以下の1行のみ、すなわち単なるコンポーネントへの処理移管コードのみとなります。

　なお、カクテル追加画面のコンポーネントをCocktailAdd.vueとしています。

return Inertia::render("cocktail/CocktailAdd");

　この場合、アクションメソッドの実装を省略できるルーティング登録方法があり、リスト1のコードとなります。

［リスト1］first-inertia/routes/web.php

Route::inertia("/showCocktailAdd", "cocktail/CocktailAdd");

　Routeクラスのget()メソッドの代わりに、inertia()メソッドを利用し、第2引数として表示させるコンポーネントを指定します。これだけで、第1引数のパスにアクセスした場合に、指定コンポーネントが表示されるようになります。

リンク設定はLinkコンポーネントを利用

　これでルーティングの設定ができたので、リスト1のパスである/showCocktailAddを、前回のリスト5の（13）のhref属性に指定すれば、図1のカクテル追加画面が表示されます。

　ただしこの方法、すなわち通常のaタグによるリンクでは、画面全体が再レンダリングされる問題があります（図2）。これはaタグの性質を考えると当然ですが、効率が悪く、フロントエンド的な画面遷移ではありません。

図2：aタグでは画面全体が再レンダリングされる

　その問題を解決する手段として、InertiaにはLinkコンポーネントが用意されています。これを利用し、カクテル追加画面を表示させるリンクコードは、リスト2のようにします。こうすることで、図3のように、必要な部分だけがレンダリングされるようになります。図3でいえば赤色の部分、すなわちidがappのdivタグ内だけがJavaScriptによってレンダリングされるようになり、シングルページアプリケーションのような画面遷移が実現できるようになります。

［リスト2］first-inertia/resources/js/pages/cocktail/CocktailList.vue

  :
<p>
  <Link href="/showCocktailAdd">カクテルの追加はこちら</Link>
</p>
  :

図3：Linkタグではidがappのdivタグ内だけが再レンダリングされる