thinkstream

サーバーサイドのセットアップ

Inertia をインストールする最初のステップは、サーバーサイドのフレームワークを設定することです。Inertia は Laravel 向けの公式サーバーサイドアダプターを提供しています。その他のフレームワークについては、コミュニティアダプターをご覧ください。

Inertia は Laravel 向けに最適化されているため、このサイトのドキュメント例では Laravel を使用しています。その他のサーバーサイドフレームワークで Inertia を使用する例については、各アダプターが管理しているフレームワーク固有のドキュメントを参照してください。

Laravel スターターキット

Laravel のスターターキットは、新しい Inertia アプリケーションのための即利用可能なスキャフォールディングを提供します。

これらのスターターキットは、Laravel と Vue または React を使って新しい Inertia プロジェクトを始めるための、最速の方法です。ただし、Inertia をアプリケーションに手動でインストールしたい場合は、以下のドキュメントを参照してください。

構築を始める

インストール

依存関係のインストール

まず、Composer パッケージマネージャーを使用して Inertia のサーバーサイドアダプターをインストールします。

bash
composer require inertiajs/inertia-laravel

ルートテンプレートのセットアップ

次に、アプリケーションへの最初のページ訪問時に読み込まれるルートテンプレートをセットアップします。このテンプレートには、サイトの CSS および JavaScript アセットに加えて、@inertia および @inertiaHead ディレクティブを含める必要があります。

blade
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        @vite('resources/js/app.js')
        @inertiaHead
    </head>
    <body>
        @inertia
    </body>
</html>

React アプリケーションの場合、開発時に Fast Refresh を有効にするため、@vite ディレクティブの前に @viteReactRefresh ディレクティブを含めることをおすすめします。

@inertia ディレクティブは、id が app の <div> 要素をレンダリングします。この要素は JavaScript アプリケーションのマウントポイントとして機能します。ディレクティブに別の値を渡すことで、id をカスタマイズすることもできます。

blade
<html>
    ...
    <body>
        @inertia('custom-app-id')
    </body>
</html>

ルート要素の id を変更した場合は、クライアントサイドでも必ず更新してください。

デフォルトでは、Inertia の Laravel アダプターはルートテンプレートの名前が app.blade.php であると想定します。別のルートビューを使用したい場合は、Inertia::setRootView() メソッドを使用して変更できます。

ミドルウェアの登録

次に、Inertia ミドルウェアをセットアップする必要があります。以下の Artisan コマンドを使用して、HandleInertiaRequests ミドルウェアをアプリケーションに公開することで設定できます。

sh
php artisan inertia:middleware

ミドルウェアが公開されたら、アプリケーションの bootstrap/app.php ファイル内の web ミドルウェアグループに HandleInertiaRequests ミドルウェアを追加します。

php
use App\Http\Middleware\HandleInertiaRequests;

->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
})

このミドルウェアは、アセットバージョンを設定するための version() メソッドと、共有データを定義するための share() メソッドを提供します。

最初のレスポンスを作成

これでサーバーサイドの準備は完了です！あとは Inertia のページを作成し、レスポンスを通じてレンダリングするだけです。

php
use Inertia\Inertia;

class EventsController extends Controller
{
    public function show(Event $event)
    {
        return Inertia::render('Event/Show', [
            'event' => $event->only(
                'id',
                'title',
                'start_date',
                'description',
            ),
        ]);
    }
}