【Laravel × Inertiajs】Inertia.jsについて解説

JavaScript
2020.12.08

こんにちは、かつコーチです。

Laravelで開発するときに、VueやReactを使うとき、Inertia.jsを利用することがあります。

今回は、そのInertia.jsとは何かについて解説します。

Inertia.jsとは？

Inertia.jsは、フロントエンドとバックエンドをシームレスに結びつけるために設計されたツールです。

主にSPA（シングルページアプリケーション）の構築を簡素化し、

従来のサーバーサイドフレームワークを使いながらも、

モダンなJavaScriptフレームワーク（Vue.js、React、Svelteなど）を統合した開発を実現します。

特にLaravelとの組み合わせでよく使用されており、

フロントエンドとバックエンドの境界を曖昧にすることで、

SPAの利便性と従来のサーバーレンダリングの手軽さの両方を提供します。

Inertia.jsの基本的な概念

サーバーサイド主導のSPA

Inertia.jsはサーバーサイドレンダリングとクライアントサイドのSPAの中間的なアプローチを取っています。

通常のSPAは、フロントエンドのJavaScriptフレームワークがページ遷移を管理し、APIを介してデータを取得しますが、

Inertia.jsでは、サーバーがページ遷移とデータ提供を一元的に管理します。

これにより、以下のようなメリットが得られます：

  • クライアントサイドの複雑なルーティングが不要
  • サーバーサイドのコントローラーやルーティングを活かせる
  • フロントエンドでAPIとの複雑なやり取りを減らす

ブラウザの訪問ページ遷移

通常のアプリケーションでは、ブラウザがサーバーにリクエストを送信し、サーバーがHTMLを返します。

Inertia.jsでは、リクエストの際に、サーバーがJSON形式でページのデータを返し、

クライアントサイドのJavaScriptフレームワークがそのデータを使用して画面を更新します。

これにより、実際のページのリロードがなく、SPAのような体験を提供します。

[ブラウザ] --> [サーバーにリクエスト]
           <-- [サーバーはHTMLではなくJSONを返す]
[JavaScriptフレームワークが画面をレンダリング]

2. LaravelとInertia.jsの統合

Inertia.jsはLaravelとの相性が非常に良く、最もよく使用される組み合わせです。

これにより、Laravelのルーティングやコントローラーをそのまま活かしながら、

VueやReactなどのモダンなJavaScriptフレームワークを利用することが可能です。

Laravel側での設定

LaravelにInertia.jsを導入する際、通常は以下の手順で設定を行います：

  1. inertiajs/inertia-laravelパッケージのインストールbashコードをコピーするcomposer require inertiajs/inertia-laravel
  2. Vue.jsまたはReactの設定 Laravel BreezeやJetstreamを使用することで、Inertia.jsとVue.js/Reactのセットアップが容易に行えます。composer require laravel/breeze --devで、Laravel Breezeをインストールし、Inertia.jsのインストールオプションを選択します。
  3. ルーティングの設定 通常のLaravelルートと同様に、Inertia.jsでもweb.phpにルートを定義します。phpコードをコピーするuse Inertia\Inertia; Route::get('/dashboard', function () { return Inertia::render('Dashboard', [ 'user' => Auth::user(), ]); }); この例では、Dashboard.vue（またはReactコンポーネント）を表示し、サーバーからuserデータを渡します。

Inertia.jsのコントローラー

Laravelのコントローラー内でInertiaを使うことにより、

通常のコントローラーのアクションをそのままSPAで利用可能です。

use Inertia\Inertia;

class UserController extends Controller
{
    public function index()
    {
        $users = User::all();
        return Inertia::render('Users/Index', ['users' => $users]);
    }
}

このコードは、Users/Index.vue（もしくはReactコンポーネント）を表示し、

サーバーサイドで取得したusersデータをビューに渡します。

Inertia.jsの重要な機能

自動的な状態保持とリダイレクト

Inertia.jsは通常のサーバーリダイレクトをそのままJavaScriptベースのリダイレクトに変換します。

これにより、ページ全体の再読み込みを避けながらも、

従来のサーバーサイドのリダイレクト機能をそのまま使用できます。

return redirect()->route('dashboard');

これはJavaScriptのリダイレクトに変換され、

ページが完全にリフレッシュされることなくリダイレクトが行われます。

ページ間の状態共有

Inertia.jsでは、複数のページ間で状態を簡単に共有できます。

これにより、ログイン状態や他の共通データを全てのページで一貫して利用可能です。

return Inertia::share([
    'auth' => Auth::user(),
    'flash' => session('message'),
]);

フォーム処理とバリデーション

フォーム送信時もInertia.jsはスムーズに動作します。

サーバーサイドでバリデーションを行い、エラーメッセージをフロントエンドに戻すことが簡単です。

$request->validate([
    'title' => 'required|max:255',
]);

// フォームが成功した場合
return redirect()->route('posts.index')
    ->with('message', 'Post created successfully.');

エラーメッセージはInertia.js経由で自動的にフロントエンドに返されます。

Inertia.jsのメリットと欠点

メリット

  • シンプルなSPA開発: サーバーサイドとクライアントサイドを単一のコードベースで扱えるため、開発がシンプルです。
  • 従来のサーバーサイドルーティングの利用: モダンなSPAを開発しながらも、従来のサーバーサイドフレームワークのルーティングやコントローラーをそのまま使用できる。
  • APIの不要性: 通常のSPAではフロントエンドとバックエンドの間にAPIを挟む必要がありますが、Inertia.jsではそのような手間が省けます。

欠点

  • JavaScript依存: 全てのクライアントサイドの処理がJavaScriptに依存しているため、JSが無効化されている環境では機能しません。
  • SEOの課題: サーバーサイドでの完全なHTMLレンダリングではないため、SEOに関してはやや工夫が必要です。LaravelにSSR（サーバーサイドレンダリング）機能を追加して対応可能ですが、これには追加のセットアップが必要です。
  • 複雑な設定時の学習コスト: 初めてInertia.jsを利用する際には、フロントエンドとバックエンドの連携に慣れるまで時間がかかることがあります。

Inertia.jsの他言語サポート

Inertia.jsはLaravel以外のサーバーサイドフレームワーク（Rails、Django、Node.jsなど）でも使用可能ですが、

公式ドキュメントや多くのサポートがLaravelに焦点を当てているため、

Laravelとの組み合わせが最も強力です。

Laravel開発者にとって、Inertia.jsは従来の開発フローを崩さず、

モダンなフロントエンド技術を手軽に導入する手段として人気です。

まとめ

Inertia.jsは、サーバーサイドでのページ遷移とクライアントサイドでの動的更新のバランスをうまく取り、

Laravelなどのサーバーサイドフレームワークと

Vue.jsやReactといったフロントエンドフレームワークの統合をシンプルにします。

フルSPA開発の複雑さを回避しつつ、モダンなフロントエンド開発を実現できる強力なツールです。

タイトルとURLをコピーしました