フロントエンド：LaravelとReactをつなぐ『Inertia.js』について整理してみた

はじめに

最近、LaravelやReactをキャッチアップしている中で、いまいち自分の中で腑に落ちていないのが「Inertia.js」です。

これです...。

便利という事はわかりますが、「何がどのように便利なのか？/なんで使っているのか？」この辺が自分の頭で理解できていないと感じました。

研修の中で「Inertia.js」を使っており、いろいろな面で恩恵を受けていると感じています...。一方で、どの点が嬉しいと感じているのか自分の中でまだ言語化できていないため、改めて整理してみようと思います。

Inertia.jsとは？

Inertia.jsは、サーバーサイドフレームワークのルーティングと、Reactなどのコンポーネントを組み合わせることができるみたいです（特に、Laravel向けに最適化されているぽい）。

Inertia has no client-side routing, nor does it require an API. Simply build controllers and page views like you've always done! Inertia works great with any backend framework, but it's fine-tuned for Laravel.

引用元：https://inertiajs.com/

通常のSPAでは必要な「API」を作らずに、サーバー側のデータをそのままReactコンポーネントに渡すことができます。

参考文献

何が嬉しいのか？

• 明示的なREST APIを作成しなくても良い
• Laravelのルーティングやコントローラーの知識ですぐSPAを構築できる
• 画面遷移もページ内で継続されるので、UXも良い

Inertia使用した実装例

Laravel側（web.php や Controller）にて：

use Inertia\Inertia;
use App\Models\Fruit;

Route::get('/fruits', function () {
    return Inertia::render('Fruits/Index', [
        'fruits' => Fruit::all()
    ]);
});

LaravelとInertia.jsを使って、/fruits にアクセスされたときに「フルーツ一覧ページ」を表示する処理を定義しています。

Fruit::all() により、データベースからフルーツ一覧を取得し、Inertiaでフロント側に渡しています。

React側（resources/js/Pages/Fruits/Index.jsx）：

import React from 'react';

const FruitIndex = ({ fruits }) => {
  return (
    <div>
      <h1>Fruit List</h1>
      <ul>
        {fruits.map(fruit => (
          <li key={fruit.id}>{fruit.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default FruitIndex;

Laravel + Inertia.js の構成で、Laravelから渡されたフルーツ一覧データ（fruits）を受け取り、画面にリスト表示するコンポーネントです。

各フルーツの name をリストで表示しています。

つまり、こんな流れの理解

Laravel → Inertia → React の流れで、
「サーバーで取得したフルーツ一覧」を Reactで表示する構成となっている。

Laravelがデータを持ち、Inertiaが橋渡しし、Reactが描画するという分担構成のイメージ

ユーザーが /fruits にアクセス
        ↓
Laravel（Fruit::all() でデータ取得）
        ↓
Inertia（Fruits/Index コンポーネントにデータを渡す）
        ↓
React（props.fruits をもとにリストを描画）
        ↓
ブラウザにフルーツ一覧が表示される

つまり、APIを自前で書かなくても、Laravelのルーティングから直接Reactにデータを渡せるのが Inertia.js の大きな特徴だと思っています（自分の理解が合っていると信じたい...）。

まとめ

ここまで読んでいただき、ありがとうございました！
文章としてまとめることで、少しだけ頭の中のモヤモヤが整理された気がしますが、まだまだキャッチアップが必要だと感じています。

特に私の場合は Laravel の習得が必要なので、今後も Inertia.js をさまざまな場面で活用していくことになると思います。引き続き頑張っていきたいです。

わからないことが多いと頭の中が混乱してしまいますが、一つひとつ整理しながら、自分のスキルとしてしっかり身につけていきたいです...！