Zenn
AUN Tech BlogPublicationへの投稿
⏩

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

吉岡裕貴
に公開
Laravel
PHP
React
Vue.js
Inertia.js
tech

要約

  • AIツール時代には、Inertia.js のようなモノリシック構成が効果的
  • 理由: AIツールが単一のコードベース内でデータフローを追跡しやすく、フロントエンドとバックエンドの連携をスムーズに理解・修正できる
  • APIレスで React/Vue/Svelte 使用可能、フルスタックエンジニア+AIの優れた組み合わせ
  • 学習コスト: Laravel知識があれば1〜2週間で習得可能

結論: Claude Code、Cursor などのAIツールと組み合わせることで、Inertia.js は設計の複雑さを軽減し、開発スピードを大幅に向上させる

https://inertiajs.com/

はじめに

2025年現在、フロントエンドとバックエンドの境界線は複雑化しています。
Next.js、Remix、tRPC、GraphQL、型安全、APIルーティング── モダンな技術スタックは高機能で自由度が高いですが、一方で「考えることが多すぎる」という悩み があります。

特にフルスタックエンジニアにとっては、「フロントエンドとしての自分」 と 「バックエンドとしての自分」 の間でAPI仕様を調整したり、型定義を同期したり、データの流れを設計したりと、本来は不要な 橋渡し作業に時間を取られて しまいます。

そんな中、私は Inertia.js に注目しています。

✅ モノリシック構成のまま React/Vue/Svelte のようなSPAに近い開発体験が得られる
✅ フロントエンドとバックエンドのコミュニケーションコストを大きく削減
✅ Claude Code や Cursor、Gemini CLIなどのAIツールと相性が良い

この記事では、Inertia.jsの特徴と魅力を他のフレームワークと比較しながら掘り下げ、どのような場面で適切な選択肢になるかをお伝えしたいと思います。

Inertia.jsとは？

Inertia.js は、Laravel や Rails などの従来のサーバーサイドアプリケーション に、React やVue、Svelteといった モダンなフロントエンドフレームワークとAPIレスで統合するライブラリ です。

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

特徴

✅ APIレス：APIエンドポイントを設計せず、コントローラーからデータをViewに渡せる
✅ フロントエンドは React/Vue/Svelte を使えるモダン構成
✅ バックエンドは Laravel/Rails など自由

Inertia.jsが解決する課題

1. AIツール時代の開発パラダイムシフト

Claude Code、Cursor、Gemini CLIなど、AIツールによる開発支援が急速に普及してきた今、開発の考え方が根本的に変わりつつあります。

従来の開発：職能分離、API設計、複雑なアーキテクチャ
AIツール時代：AIが理解しやすい構造、単一文脈、シンプルなデータフロー

2. なぜモノリシック構成がAI時代に最適なのか？

  1. コンテキストの一貫性

    • フロントエンドとバックエンドが同じリポジトリ内にあるため、コントローラーからビューまでのデータフローをAIが一度に把握しやすい
    • 「この変数がどこから来て、どこで使われているか」がファイル間で追いやすい
    • バックエンドのロジック変更がフロントエンドにどう影響するかを明確に捉えられる

  2. フルスタックエンジニアの価値向上

    • 一人で全体を見渡せる構成により、意思決定が迅速
    • AIがLaravelとReactの両方をサポートすることで、1人での開発効率が大幅に向上
    • API設計やチーム間調整が不要で、アイデアから実装までがスムーズ

  3. AIツールとの実際の連携例

Laravel + React + Inertia.js の場合

コード例
// Laravel Controller
class TodoController extends Controller
{
    public function index()
    {
        $todos = Todo::where('user_id', Auth::id())
            ->orderBy('created_at', 'desc')
            ->get();

        $stats = [
            'total' => Todo::where('user_id', Auth::id())->count(),
            'completed' => Todo::where('user_id', Auth::id())->where('completed', true)->count(),
        ];

        return Inertia::render('Todos/Index', [
            'todos' => $todos,
            'stats' => $stats,
        ]);
    }
}

// React Component
export default function TodosIndex({ todos, stats }) {
    return (
        <div className="todos-app">
            <h1>My Todos ({stats.completed}/{stats.total} completed)</h1>
            
            <div className="todo-list">
                {todos.map(todo => (
                    <div key={todo.id} className={`todo-item ${todo.completed ? 'completed' : ''}`}>
                        <span>{todo.title}</span>
                        <span className="due-date">{todo.due_date}</span>
                    </div>
                ))}
            </div>
        </div>
    );
}

AIツールに「Todoに優先度（priority）を追加して」と指示した場合

コード例
  1. データベース: マイグレーションでカラム追加
Schema::table('todos', function (Blueprint $table) {
    $table->enum('priority', ['low', 'medium', 'high'])->default('medium');
});
  1. バックエンド: コントローラーでデータ取得に優先度を含める
public function index()
{
    return Inertia::render('Todos/Index', [
        'todos' => Todo::where('user_id', Auth::id())
            ->orderBy('priority', 'desc')
            ->orderBy('created_at', 'desc')
            ->get(),
    ]);
}
  1. フロントエンド: 優先度表示と色分けを追加
<div className={`todo-item priority-${todo.priority}`}>
    <span className="priority-badge">{todo.priority}</span>
    <span>{todo.title}</span>
</div>
  1. 結果: AIがモデル→マイグレーション→コントローラー→ビューの流れを理解し、一貫した機能追加を実現

このように、AIツールは「コントローラー→ビュー」のデータフローを一度に理解できるため、修正漏れや不整合が起きにくい というメリットがあります。

3. フルスタックエンジニアの「考えることが多すぎる問題」

Next.js や Remix などのフルスタックフレームワークは高機能ですが、状態管理、API設計、型安全、認証、ローディング処理など 多くの設計判断を行う 必要があります。
これは 個人開発や小規模チームにとって、大きな負担 です。

Inertia.jsは、こうした設計上の意思決定の多くをバックエンドに任せることで、API設計の負担を軽減 してくれます。

4. 学習コストと導入障壁

新規プロジェクトの場合

Laravel 12では、公式の Starter Kits を使うことで、Laravel + React + Inertia.jsの環境を簡単にセットアップできるようになりました。

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コンポーネントに移行できます。

これにより、大規模なリファクタリングや一括移行のリスクを避けながら、モダンなフロントエンド環境を段階的に導入することが可能になります。

どちらの場合も、プロジェクト開始時の環境構築の手間が大幅に削減され、すぐに本質的な機能開発に集中できます。特にAI時代においては、このような統一された環境がAIツールの理解を助け、より効果的な開発サポートを受けることができます。

Inertia.jsの技術的な注意点

どんな技術にもメリットとデメリットは存在します。Inertia.jsを選ぶ際に知っておいてほしい注意点をまとめます。

  1. 密結合によるエラー解析の難しさ
    フロントエンド／バックエンドが密接に連携するため、エラーが発生した際に「どちら側の問題か」を特定しづらいことがあります。
    → ログやデバッグツールの活用、エラー処理の設計がより重要になります。

  2. ネイティブアプリ展開時の再設計コスト
    将来的にAndroid/iOSなどネイティブアプリを展開したくなった場合、Inertia.jsの構成をそのまま流用できません。新たにAPIを設計する必要があります。
    → REST APIやGraphQLなど、追加の開発コストが発生します。

  3. 後からのフロントエンド／バックエンド分離が難しい
    「フロントエンド／バックエンドを一体化」する思想のため、後から「完全なAPI＋SPA構成」や「バックエンド・フロントエンドの完全分離」へ移行するのは容易ではありません。
    → 画面遷移やデータ受け渡しの仕組みが密結合になっているため、大規模な構成変更が必要になります。

プロジェクトの将来像や拡張性を考えるなら、こうした注意点もぜひ頭に入れて選択してください。

他のフレームワークとの比較

フレームワーク アーキテクチャ API設計 使用技術 学習コスト AIとの相性 規模感
Inertia.js モノリシックSPA 不要 Laravel/Rails + React/Vue/Svelte 低 高 小〜中規模
Livewire サーバー主導UI 不要 Laravel + Alpine.js 低 高 小〜中規模
Blitz.js Next.jsベース 抽象化 TypeScript + React 中 高 小規模
Remix フルスタック 必要 React + TypeScript 中〜高 中〜高 中〜大規模
Next.js ハイブリッド 必要 React + TypeScript 高 中 中〜大規模

各フレームワークの特徴

フレームワーク 特徴
Livewire フロントエンドが Blade 中心で、モダンなJSフレームワークとはアプローチが異なる
Blitz.js Next.js との関係が変化しており、将来の方向性が数年前とは異なる
Remix 設計自由度が高く、小規模開発では選択肢が多い分決断が必要
Next.js API層が必要なケースが多く、従来のSSRとは異なるアーキテクチャ

Apidog MCP Server という選択肢

Apidog MCP Server のように、API仕様書とAIツールを連携させてコードを自動生成するやり方もありますが、以下の課題が残ります。

  • API仕様書を書く必要がある
  • フロントエンドとバックエンドのコミュニケーションが必要
  • チーム間でAPI設計の議論が必要

Inertia.jsなら、これらの問題を軽減できます。
API設計そのものが不要だからです。

どんな人に向いている？

タイプ 最適な選択 理由
個人/副業 Inertia.js Laravelの知識があれば短期間で習得可能、シンプルな構成
Laravelメインのエンジニア Livewire または Inertia.js Livewireは既存のBlade知識活用、Inertia.jsはモダンUI需要時
Reactメインのエンジニア Inertia.js または Remix 既存のReactスキルを活かしつつ、シンプルな構成を選択
大規模チーム Next.js 責務が明確でチーム開発に適し、スケーラビリティが高い
AIツール活用派 Inertia.js コード構成が統一されており、AIがフロントとバックを組み合わせて理解しやすい

2025年以降の開発の可能性

AIツール×モノリシック×フルスタックエンジニアの時代

2025年以降、開発においては以下のような構成が主流になると考えています。

  1. 個人・小規模チーム: モノリシック + AI支援

    • 1人のフルスタックエンジニアがAIツールを活用
    • 複雑なアーキテクチャよりもシンプルな構成を選択
    • 開発速度と保守性を両立

  2. 中規模チーム: ハイブリッド構成

    • 主要機能はモノリシックで高速開発
    • 必要な部分のみマイクロサービス化
    • AIツールでリファクタリング支援

  3. 大規模チーム: 職能分離は継続

    • ただし、AIツールによる生産性向上で必要人数は減少
    • フルスタックエンジニアの価値が相対的に向上

フルスタックエンジニアの価値が高まる理由

  • AIが複雑性の一部をサポート: たとえばUIデザイン、SQLクエリ最適化、テストコード作成など、従来は専門知識が必要だった領域をAIがサポート
  • 全体最適化: API設計やフロントエンド・バックエンド間の調整を考えずに済み、本質的な機能開発に集中できる
  • 迅速な意思決定: 「この機能を追加したい」と思ったら、API設計の会議やフロントエンドチームとの調整なしに即座実装開始
  • 学習コスト削減: AIがライブラリの使い方、デバッグ手法、パフォーマンス最適化などをサポート

結論

Inertia.jsは設計のバランスを重視した選択

Inertia.jsは、APIレスでモダンなUIを構築できる一方、バックエンドとフロントエンドの責務をシンプルに保ち、チーム間のコミュニケーションコストを削減します。

そして何より、現在のAIツールと組み合わせやすい構成になっています。

2025年の開発者に求められるスキル

  • フルスタックエンジニア + AI: 全体を見渡せる能力とAIツールの活用スキル
  • シンプルな設計: 複雑さよりも理解しやすさを重視
  • 高速プロトタイピング: アイデアを素早く形にする能力

大規模なフレームワークの複雑さよりも、シンプルで理解しやすい構成が求められる場面で、Inertia.jsのバランス感覚は大きな価値を発揮します。

結論としては、2025年以降、AIと協働できるフルスタックエンジニアの価値が飛躍的に高まり、その間に入るための 最適なプラットフォームが、Inertia.jsのような「シンプルなモノリシック構成」 だと私は考えています。

AIツールを使った開発を試したい方は、ぜひ一度 Inertia.js を試してみてください！

AUN Tech Blog
AUN Tech BlogPublication

修正指示をスムーズにする校正ツール「AUN（aun.tools）」を広島を拠点に開発・運営している、株式会社フォノグラムのテックブログです。 エンジニア熱烈❤️‍🔥募集中です！

Discussion