ブログ一覧に戻る
2025年12月3日
Ken Suzuki
技術

Laravel Sail, Inertia.js, Reactで始めるモダンSPA開発環境構築ガイド

Laravelの強みを活かしながら、ReactとTypeScriptでモダンなSPAを効率的に構築する「Inertia.js」環境構築ガイド。DockerベースのLaravel Sailを使用し、最新バージョンの環境をゼロから立ち上げる手順をコマンド付きで徹底解説します。

LaravelReactInertia.jsTypeScriptSail
Laravel Sail, Inertia.js, Reactで始めるモダンSPA開発環境構築ガイド

はじめに

LaravelはPHPの強力なフレームワークですが、ReactやVue.jsのようなモダンなJavaScriptフレームワークと組み合わせることで、よりリッチなシングルページアプリケーション（SPA）を効率的に構築できます。特にInertia.jsは、サーバーサイドのルーティングやコントローラーをそのまま活かしつつ、フロントエンドをモダンなコンポーネントで構築できる素晴らしいツールです。

この記事では、Laravel Sail（Dockerベースのローカル開発環境）を使い、Laravel + Inertia.js + React + TypeScriptの開発環境をゼロから構築する手順を、コマンドの解説付きで紹介します。

対象読者

  • Laravelの基本的な知識がある方
  • Reactを使った開発に興味がある方
  • LaravelでSPAを構築したいと考えている方

1. Laravelプロジェクトの作成

まずは、Composerを使って新しいLaravelプロジェクトを作成します。ここではプロジェクト名を new-project とします。

composer create-project laravel/laravel new-project

作成が完了したら、プロジェクトディレクトリに移動します。

cd new-project

2. Laravel Sailの導入

次に、Dockerベースの開発環境であるLaravel Sailをセットアップします。これにより、ローカルマシンを汚すことなく、MySQLやRedisなどのサービスを簡単に利用できます。

php artisan sail:install

インストールが完了したら、Sailを起動してDockerコンテナを立ち上げます。

./vendor/bin/sail up

-d オプションを付けるとバックグラウンドで起動します。

これ以降、php artisan や composer、npm などのコマンドは ./vendor/bin/sail を先頭に付けて実行します。そうしないとローカル環境のNodeバージョンとDocker内のバージョンが違う場合にややこしいことになりますからね。

3. Inertia.js（サーバーサイド）のセットアップ

LaravelにInertia.jsのアダプタをインストールします。

./vendor/bin/sail composer require inertiajs/inertia-laravel

次に、Inertia.jsのリクエストを処理するためのミドルウェアを生成します。

./vendor/bin/sail artisan inertia:middleware

生成された app/Http/Middleware/HandleInertiaRequests.php ミドルウェアを登録します。

Laravel 10以降のバージョン (Laravel 12を含む) では、bootstrap/app.php 内でミドルウェアを登録するのが一般的です。

bootstrap/app.php の withMiddleware メソッド内で、web ミドルウェアグループに HandleInertiaRequests を追加してください。

use App\Http\Middleware\HandleInertiaRequests;
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(__DIR__))
    // ...
    ->withMiddleware(function (Middleware $middleware) {
        $middleware->web(append: [
            HandleInertiaRequests::class,
        ]);
    })
    // ...

4. Inertia.js（クライアントサイド）のセットアップ

フロントエンドにInertia.jsを導入し、Reactと連携させます。

依存パッケージのインストール

Inertia.jsのReactアダプター、およびReactとReactDOMをNPMでインストールします。

./vendor/bin/sail npm install @inertiajs/react react react-dom

Inertiaアプリケーションの初期化

resources/js/app.tsx (または app.jsx) ファイルを以下のように作成・編集し、Inertiaアプリケーションを初期化します。ここでは、React 18以降の createRoot を使用しています。

import './bootstrap'; // 必要であれば、Laravelのbootstrapファイルをインポート
import React from 'react';
import { createRoot } from 'react-dom/client';
import { createInertiaApp } from '@inertiajs/react';

createInertiaApp({
  // ページの解決方法を定義します。import.meta.glob を使用して、
  // resources/js/Pages ディレクトリ以下のReactコンポーネントを自動的にロードします。
  resolve: name => {
    const pages = import.meta.glob('./Pages/**/*.tsx', { eager: true });
    // .jsx を使用している場合は、上記と下記の両方を .jsx に変更してください
    return pages[`./Pages/${name}.tsx`];
  },
  setup({ el, App, props }) {
    // React 18のcreateRootを使用してアプリケーションをマウントします
    createRoot(el).render(<App {...props} />);
  },
  // オプション：ページ遷移時のプログレスバー設定
  progress: {
    color: '#29d',
  },
});

resources/js/Pages ディレクトリが存在しない場合は作成し、そこにページコンポーネントを配置することになります。

ルートテンプレートの作成

LaravelのBladeテンプレートをInertiaアプリケーションのルートとして使用します。resources/views/app.blade.php (任意のファイル名でOK) を作成し、以下のように記述します。

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Laravel Inertia React App</title>
        @viteReactRefresh
        @vite(['resources/js/app.tsx', 'resources/css/app.css'])
        @inertiaHead
    </head>
    <body class="font-sans antialiased">
        @inertia
    </body>
</html>

重要なポイント：

  • @viteReactRefresh と @vite は、Viteを使ってフロントエンドアセットをコンパイル・ロードするために必要です。
  • @inertiaHead は、Inertiaが <head> 内に必要なメタタグなどを挿入するために使用します。
  • @inertia ディレクティブが、Inertiaアプリケーションをマウントするルート要素 (<div id="app"></div> と同等) をレンダリングします。

5. TypeScriptの導入

今回は、より堅牢な開発を目指してTypeScriptを導入します。

./vendor/bin/sail npm install -D typescript @types/react @types/react-dom

TypeScriptの設定ファイル tsconfig.json を生成します。jsx オプションを react に設定することで、TSX（TypeScript + JSX）ファイルが扱えるようになります。

./vendor/bin/sail npx tsc --init --jsx react

6. ルーティングの作成

指定されたアドレスがフロントエンドのどのコンポーネントを指すかを, LaravelのWebルーティング routes/web.php にルートとして設定します。

use Inertia\Inertia;

Route::get('/', function () {
    return Inertia::render('Home'); // '/'とアドレスバーに指定したらHome.tsxを参照するという設定
});

7. フロント側のコンポーネントを作成

最初のInertia.jsコンポーネントとして、resources/ts/PagesフォルダにHome.tsxを作成します。

import React from 'react';

export default function Home() {
  return <h1>Laravel Sail + Inertia + React + TS 環境構築完了！</h1>;
}

まとめ

これで、Laravel Sail上でInertia.jsとReact、TypeScriptを使ったモダンな開発環境の土台が整いました。

これらの手順については、また別の記事で詳しく解説したいと思います。

Happy Hacking!

Laravel Sail, Inertia.js, Reactで始めるモダンSPA開発環境構築ガイド | Shirokuma.online