Inertia利用の基本
Inertiaを利用するプロジェクトができたところで、第1回の図4と同じ画面を題材に、Inertiaのコーディング方法を紹介します。
Inertia利用手順
Inertiaを利用する場合の手順は、以下の通りです。
- コントローラクラスとそのメソッドを用意する
- コントローラクラス内のアクションメソッドで画面に渡すデータを用意する
- Inertiaを利用してフロントエンドコンポーネントに処理を移管する
- フロントエンドコンポーネントでコントローラからのデータを受け取る
- コントローラクラスのアクションメソッドをルーティング登録する
このうち、実は、1と2、および5は、従来のBladeを利用したLaravelプロジェクトのコーディングとなんら変わりません。また、4はほぼフロントエンドフレームワークのコーディングといえます。ということは、ここで新しいのは3の手順だけと言えます。
具体的に見ていきましょう。
コントローラクラスのコード
手順1～3のコードサンプルをまとめて見ると、リスト1のようになります。
use Inertia\Inertia; // (1)
class TopController extends Controller // (2)
{
public function index() { // (3)
$data["name"] = "しんちゃん"; // (4)
return Inertia::render("top/Index", $data); // (5)
}
}
リスト1の（2）と（3）が手順1のコードです。そして（4）が手順2のコードです。
この（2）～（4）のコードを見る限りは、Bladeによる従来のLaravelプロジェクトのコントローラコードと差はありません。（2）でコントローラクラスを定義し、（3）でアクションメソッドを定義します。そのメソッド内の（4）で画面表示に必要なデータ、Bladeならばテンプレート変数を連想配列として用意しています。
異なるのは、画面を表示させるコードです。Bladeを利用する場合は、view()関数の実行結果をリターンするコードでした。
一方、Inertiaを利用する場合は（5）のように、Inertia::render()メソッドの実行結果をリターンします。これが、手順3にあたります。もちろん、そのためには（1）のようにあらかじめInertiaクラスをuseしておく必要があります。
Inertia::render()メソッドの引数は2個であり、第1引数が表示させる画面のコンポーネント、第2引数が画面に渡すデータの連想配列を指定します。
なお、リスト1では、説明のために（4）で画面に渡すデータの連想配列を変数として用意して、（5）で引数として渡すコードパターンとしていますが、もちろん、次のように引数内で直接連想配列を定義しても問題ありません。
return Inertia::render("top/Index", ["name" => "しんちゃん"]);
また、Inertia::render()メソッドと同等のヘルパー関数としてinertia()も用意されているので、次のような記述も可能です。
return inertia("top/Index", $data);
フロントエンドコンポーネントの用意
1～3の手順が済んだので、次に手順4です。そのためには、フロントエンドコンポーネントを用意しておく必要があります。
これは、resources/js/pagesフォルダ内に作成することになっています。そして、pagesフォルダ以下のファイルパスが、Inertia::render()メソッドの第1引数と一致している必要があります。リスト1の（5）ではtop/Indexとしており、また、本プロジェクトでは、VueをInertiaと連携するフレームワークとして利用するため、実際のコンポーネントファイルは、resources/js/pages/top/Index.vueとなります。これは、リスト2のコードです。
<script setup lang="ts">
interface Props { // (1)
name: string; // (1)
} // (1)
defineProps<Props>(); // (2)
</script>
<template>
<main>
<h1>Welcome</h1>
<p>
{{name}}さん、こんにちは!
</p>
</main>
</template>
リスト2の内容は、基本的にはVueのコンポーネントコードそのままなので問題はないと思います。ただ、一点だけ、Propsに注目してください。
（1）でPropsインターフェースを定義し、defineProps()マクロにそのインターフェースを渡すことで、Propsを定義しています。そして、その定義が、リスト1の（4）の$data、すなわち、コンポーネントに渡すデータと一致します。つまり、コントローラから渡されるデータは、Propsとして受け取って利用する、というのが手順4になります。
ルーティング登録
最後の手順である手順5です。とはいえ、これは従来のLaravelプロジェクトとまったく変わらず、web.phpへのコントローラクラスのメソッド登録であり、リスト3のコードとなります。これで、ルートパスである/にアクセスすると、第1回の図4と同じ画面である図3が表示されます。
Route::get("/", [TopController::class, "index"]);
［NOTE］CSSの無効化
リスト1～3のコーディングを行うと、確かに第1回の図4と同じ画面が表示されます。ただし、デフォルトでCSSが適用されてしまい、第1回の図4とは見え方が違います。このデフォルトで適用されるCSSを無効化する場合は、resources/js/app.tsの先頭行の次のコードを削除（あるいはコメントアウト）します。
import '../css/app.css';
