フロントエンドの分離は正義だったのか──AI時代にInertia.jsを再評価する理由

対象読者

• Laravelでフロントエンドとバックエンドの分離に悩んでいる方
• Inertia.jsが気になっているけど、まだ触っていない方
• AIツールとの相性がいい構成を探している方

はじめに

私はフロントエンドとバックエンドは分離するのが当たり前だと思っていた時期がありました。

React/Vueでフロントを作り、LaravelでAPIを用意して、型定義を同期して、エンドポイントを設計して...。「フロントエンドとしての自分」と「バックエンドとしての自分」の間で橋渡し作業をしている感覚で、本来作りたい機能の開発に集中できないことが増えていました。

そんなときに出会ったのが Inertia.js です。APIレスでReactやVueが使えて、Laravelの知識がそのまま活かせる。しかも、Claude CodeやCursorのようなAIツールとの相性がいい。

この記事では、Inertia.jsが何を解決してくれるのか、どんな場面で選ぶべきかをまとめています。

Inertia.jsとは？

Inertia.js は、Laravel や Rails などのバックエンドに、React・Vue・Svelte をAPIレスで統合するライブラリです。

「ルーティングとデータ取得はバックエンドに任せ、UIだけをフロントエンドで描画する」という設計思想で、フロントエンドとバックエンドを分離しすぎずにSPAに近い体験を実現できます。

https://inertiajs.com/

なぜAI時代にモノリシック構成が合っているのか

Claude Code・Cursor・Gemini CLIなど、AIツールによる開発支援が急速に普及しています。このAIツールと相性がいいのが、Inertia.jsのようなモノリシック構成です。

コンテキストの一貫性

フロントエンドとバックエンドが同じリポジトリにあるため、コントローラーからビューまでの流れをAIが一度に把握しやすくなります。変数がどこから来てどこで使われているか、バックエンドの変更がフロントエンドにどう影響するかを、AIが一貫して追えます。

コミュニケーションコストの削減

フロントエンドとバックエンドをひとりで担えるため、API仕様のすり合わせやチーム間の調整が不要になります。「この機能を追加したい」と思ったら、そのまま実装に入れます。

実際の流れを見ると分かりやすいです。

コード例：TodoにpriorityカラムをAIで追加する場合

コントローラーとビューが同じリポジトリにあるため、「Todoに優先度（priority）を追加して」という指示だけでAIが一連の変更を完結させます。

1. マイグレーションでカラム追加

Schema::table('todos', function (Blueprint $table) {
    $table->enum('priority', ['low', 'medium', 'high'])->default('medium');
});

2. コントローラーでデータ取得に優先度を含める

public function index()
{
    return Inertia::render('Todos/Index', [
        'todos' => Todo::where('user_id', Auth::id())
            ->orderBy('priority', 'desc')
            ->orderBy('created_at', 'desc')
            ->get(),
    ]);
}

3. Reactコンポーネントで優先度表示を追加

<div className={`todo-item priority-${todo.priority}`}>
    <span className="priority-badge">{todo.priority}</span>
    <span>{todo.title}</span>
</div>

モデル→マイグレーション→コントローラー→ビューの流れをAIが一括で理解するため、修正漏れが起きにくくなります。

導入のしやすさ

新規プロジェクト

Laravel 12の公式スターターキットを使えば、1コマンドで環境が整います。

laravel new myapp --react

これだけで以下がセットアップされます。

• Laravel 12 + React 19 + Inertia 2
• TypeScript サポート
• shadcn/ui コンポーネント
• 認証機能（ログイン・登録・パスワードリセット）
• Tailwind CSS V4

既存プロジェクト

既存のLaravelプロジェクトへの導入は、パッケージのインストールと設定ファイルの作成だけで始められます。

composer require inertiajs/inertia-laravel
npm install @inertiajs/react

既存のBladeビューを段階的にReactコンポーネントへ移行できるため、一括移行のリスクを避けながら進められます。

注意点

どんな技術にもトレードオフがあります。Inertia.jsを選ぶ前に知っておいてほしい点をまとめます。

ネイティブアプリ展開時の再設計コスト

将来的にAndroid/iOSアプリを展開したくなった場合、Inertia.jsの構成をそのまま使えません。別途APIを設計する必要があります。

後からの分離が難しい

「フロントエンドとバックエンドを一体化する」思想のため、後から完全に分離するのは容易ではありません。大規模な構成変更が必要になります。

おわりに

私自身、「フロントエンドとバックエンドは分離するもの」という思い込みがありましたが、Inertia.jsに切り替えてからは、機能開発に集中できる時間が増えました。

注意点はあるものの、APIレスで設計判断が少なく、導入も簡単で、AIツールとの相性もよい。個人開発や小規模チームでLaravelを使っているなら、Inertia.jsは試してみる価値があると思います。