Thinkstream

サーバーサイドフレームワークの設定が完了したら、次にクライアントサイドフレームワークをセットアップする必要があります。Inertia は現在、React、Vue、Svelte をサポートしています。

Laravel のスターターキットは、新しい Inertia アプリケーション向けに、すぐに使えるスキャフォールディングを提供します。

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

構築を開始

インストール

依存関係をインストール

まず、使用するフレームワークに対応した Inertia のクライアントサイドアダプターをインストールします。

Inertia アプリを初期化

次に、メインの JavaScript ファイルを更新して Inertia アプリを起動します。これを行うには、ベースとなる Inertia コンポーネントでクライアントサイドフレームワークを初期化します。

setup コールバックには、ルートとなる Inertia の App コンポーネントを含め、クライアントサイドフレームワークを初期化するために必要なすべての情報が渡されます。

デフォルト設定の構成

createInertiaApp() に defaults オブジェクトを渡すことで、さまざまな機能のデフォルト設定を構成できます。すべてのキーに対してデフォルトを指定する必要はなく、調整したいものだけを指定すれば問題ありません。

createInertiaApp({
    // ...
    defaults: {
        form: {
            recentlySuccessfulDuration: 5000,
        },
        prefetch: {
            cacheFor: "1m",
            hoverDelay: 150,
        },
        visitOptions: (href, options) => {
            return {
                headers: {
                    ...options.headers,
                    "X-Custom-Header": "value",
                },
            };
        },
    },
});

visitOptions コールバックは、対象の URL と現在の訪問オプションを受け取り、上書きしたい任意のオプションを含むオブジェクトを返す必要があります。利用可能な設定オプションの詳細については、フォーム、プリフェッチ、および手動訪問のドキュメントを参照してください。

実行時に設定を更新する

エクスポートされている config インスタンスを使用して、実行時に設定値を更新することもできます。これは、ユーザーの設定やアプリケーションの状態に基づいて設定を調整する必要がある場合に特に便利です。

コンポーネントの解決

resolve コールバックは、Inertia にページコンポーネントをどのように読み込むかを指示します。ページ名（文字列）を受け取り、ページコンポーネントのモジュールを返します。このコールバックの実装方法は、使用しているバンドラー（Vite または Webpack）によって異なります。

デフォルトでは、コンポーネントをイager ロード（即時読み込み）することを推奨しています。これにより、単一の JavaScript バンドルが生成されます。ただし、コンポーネントを遅延読み込みしたい場合は、コード分割のドキュメントを参照してください。

ルート要素の定義

デフォルトでは、Inertia はアプリケーションのルートテンプレートに id が app のルート要素が存在すると想定しています。アプリケーションのルート要素が異なる id を持つ場合は、id プロパティを使用して指定できます。

createInertiaApp({
    id: 'my-app',
    // ...
})

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

ページデータ用の script 要素

デフォルトでは、Inertia は初期ページデータをルート要素の data-page 属性に保存します。代わりに <script type="application/json"> 要素を使用するように Inertia を設定することもでき、これはわずかに高速で、ブラウザの開発者ツールでも確認しやすくなります。

createInertiaApp({
    // ...
    defaults: {
        future: {
            useScriptElementForInitialPage: true,
        },
    },
})

サーバーサイドレンダリングを使用している場合は、SSR のエントリーポイントも必ず更新してください。Laravel を使用している場合は、@inertia Blade ディレクティブが script 要素を出力するように、inertia.use_script_element_for_initial_page の設定値も true に設定してください。

クライアントサイドのセットアップ