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

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

　PHPフレームワークのデファクトスタンダードの地位を確立したと言えるLaravelは、フロントエンド開発的な画面の作成を標準でサポートしています。本連載では、その際に利用するLivewireとInertiaによるVueの利用方法を紹介しています。前回は、Livewireのフロントエンド的な使い方を紹介しました。今回と次回は、InertiaとVueの組み合せを紹介します。今回は、プロジェクトの作成方法とコーディングの基本を紹介します。

LaravelとInertia

　本連載は、LaravelのLivewireとInertiaを利用して、フロントエンド的な画面作成方法を紹介しています。今回から連載の後半に入り、InertiaとVueを組み合せた使い方を紹介します。まずは、Inertiaを概観していきましょう。

　本連載のサンプルデータは、GitHubから参照できます。

Inertiaとは

　Inertiaは、Vueなどの各種フロントエンドJavaScriptフレームワークとLaravelを結びつけるためのJavaScriptライブラリです。

　通常、Vueなどのフロントエンドフレームワークを利用してシングルページアプリケーションを作成する際に、サーバ上のデータ（主にデータベース）の読み書きにおいて、サーバサイドではAPIを作成しておく必要があります。そして、フロントエンドフレームワークの方では、Fetch APIなどの非同期通信を利用して、そのAPIへのアクセスコードを記述する必要があります。

　この両方を別々で作成する手間から解放してくれるのが、Inertiaです。

　そのコーディング手法は、ルーティングやコントローラなどのサーバサイド処理は従来のLaravelのコーディング方法を採用しながら、画面に関する部分、つまりフロントエンドの処理だけVueなどのフロントエンドフレームワークを利用しています。その間をInertiaがつなぐことで、サーバサイドとフロントエンドをひとつのプロジェクト内で実現でき、両方のいいとこ取りが可能となります。

図1：Inertiaを利用することでサーバサイドとフロントエンドのいいとこ取りが可能

Inertia＋Vueプロジェクトの作り方

　Inertiaを使いながら、フロントエンドフレームワークとしてVueを利用してコーディングするためには、Inertia＋VueのプロジェクトとしてLaravelプロジェクトを作成する必要があります。

　といっても、第1回に紹介した新しいLaravelのスタータキットでは、このプロジェクトが簡単に作成できます。

　その方法は、Livewireプロジェクトと同じであり、図2のプロジェクト作成ウィザードの質問1で「Vue」を選択するだけです。その後の質問はLivewireプロジェクトと同様に選択していくと、Inertia＋Vueのプロジェクトが作成されます。

図2：Laravelスタータキットによる質問1ではVueを選択

　なお、図2を見てもわかるように、Laravelのスタータキットによるプロジェクト作成では、Inertia＋VueとInertia＋Reactが正式にサポートされています。Inertiaの公式サイトでは、Svelteもサポートされているようですが、利用する場合は手動でのセットアップが必要です。