Inertia.js 導入ガイド: 概要、例、代替案

ラーフル・チョッデ著✏️

最新のフロントエンド フレームワークは、React と Next.js、Vue と Nuxt.js、Svelte と SvelteKit など、専用のフルスタック フレームワークとうまく組み合わせられます。しかし、React のような最新のフロントエンド ソリューションと、Laravel のような従来のバックエンドまたはサーバー側のフレームワークを組み合わせる場合、同じ使いやすさとすぐに使えるサポートを実現することは不可能に思えます。

JavaScript フロントエンド ソリューションと従来のバックエンド フレームワークの間の適応性のギャップは、Inertia.js によって埋められます。この導入ガイドでは、Inertia を使用して、サーバー側のルーティングを維持しながら、従来のバックエンド フレームワークと最新の JavaScript フロントエンドを備えたシングルページ アプリ (SPA) を構築する方法を学びます。

Inertia.js とは何ですか?

Inertia.js は、開発者が間に API を必要とせずに、一般的なフロントエンド フレームワークとバックエンド フレームワークを使用して最新の SPA を構築できるツールです。 2019 年に Jonathan Reinink によって作成された Inertia の背後にある主なアイデアは、既存のサーバー側フレームワークを活用しながら最新の SPA を構築するプロセスを簡素化することでした。

簡単に言うと、Inertia はサーバー側とクライアント側のフレームワークを結合する接着剤として機能し、バックエンドとフロントエンド間の効率的な通信を確保します。 Inertia を使用すると、フロントエンドとバックエンド、またはサーバー側の 2 つの異なるコードベースを維持するのではなく、アプリ全体をモノリスのような 1 つのコードベースで開発します。

Inertia.js は時間の経過とともにどのように変化しましたか?

当初、Inertia は Vue と Laravel のみをサポートしていました。その後のリリースでは、より多くのフレームワークのサポートが進化し、拡張されました。

最新の Inertia モノリスは、サーバーサイド レンダリング (SSR)、自動アセット バージョニング、ページ コンポーネントの遅延読み込み、TypeScript サポートなどの重要な機能を提供します。後でフレームワークの統合について説明しながら、そのフレームワークのサポートについて調べます。

Inertia.js の仕組み

慣性は、フロントエンドとバックエンドの間のアダプターのように機能します。通常の SPA とは次の点で異なります:

• SPA のようなエクスペリエンスを提供しながら、サーバー側のルーティングを維持します
• ページ全体のリロードを小規模なフェッチ リクエストに置き換えます
• サーバーから JSON データを返して受信します
• 水分補給に必要な JavaScript が少なくなります

Inertia を利用したアプリを使用してブラウザからリクエストが行われると、リクエストは最初にバックエンドに到達します。その結果、Inertia 応答が作成され、最初に Inertia JavaScript ライブラリを含む完全な HTML ドキュメントが Inertia クライアントを通じてブラウザーに返されます。

後続のナビゲーションでは、Inertia クライアントはフェッチ リクエストを作成し、サーバーから JSON データを返します。この受信したデータを使用して、クライアントはフロントエンドを更新し、ページ全体をリロードしなくても変更がアプリに反映されます。

これは、プロセス全体を視覚的に説明したフローチャートです:

さらに読む:

• Inertia.js の概要

Inertia.js を選ぶ理由?

SPA に従来のバックエンド フレームワークを使用する必要があるが、フロントエンドを自由に処理できる状況にある場合は、Inertia または同様のツールの使用を検討する必要があります。

Inertia は Laravel 向けにカスタマイズされており、Laravel プロジェクトでの安定性が向上します。あなたが Laravel 開発者で、Blade テンプレートがデフォルトで提供する以上のものを実行したい場合は、Inertia を試してみるとよいでしょう。

Inertia があなたの友人になる可能性のあるいくつかの使用例をさらに検討してみるとよいでしょう。次の 2 つのセクションでは、Inertia を使用することの長所と短所について説明します。これは、アプリ開発で Inertia を選択する際に十分な情報に基づいた決定を下すのに役立ちます。

Inertia.js の短所

一般に SPA には既知の欠点がいくつかありますが、ここでは説明しません。代わりに、開発ユーティリティとしての Inertia の欠点について触れます。

柔軟性が低い

Inertia を使用すると、アプリのフロントエンドとバックエンドを単一のコードベースで管理できます。この密結合により、Inertia は、保守性の向上、懸念事項の分離、スケーラビリティ、独立した開発、技術スタックの柔軟性などの理由から、フロントエンドとバックエンドを別々に保守する必要があるプロジェクトには適していません。

開発者の経験

Inertia のようなツールを使用すると、探索して学習するためのユーティリティがスタックに 1 つ追加されます。 Inertia 固有のパターンと規則を理解するには中程度の学習曲線が必要ですが、少し面倒で時間がかかる場合があります。

フロントエンドとバックエンドで Inertia のようなツールに適応することはまだ主流ではないため、これらのツールを使用して作業を行うための標準的な方法はありません。したがって、Inertia から切り替えるには、特にフロントエンドで大幅なリファクタリングが必要になります。

また、フロントエンドとバックエンドの境界がモノリス内で一致するため、特に API と単体テストのテストの複雑さは確実に増加します。

小さなコミュニティ

Inertia には GitHub 上に 6,000 を超えるスターがあり、85 人を超える寄稿者がいます。その Laravel アダプターには 2,000 を超える星が付いています。これらすべての統計を合計すると、Inertia ほど多くの機能やフレームワークのサポートを提供しない同じカテゴリのツールよりもはるかに低くなります。

そのため、それを使用して何か特定のものを構築したいのに、従うべき十分な参考文献やガイドが見つからないという状況が発生する可能性があります。

Inertia.js と Livewire などの競合製品との正面比較については、以下の表を参照してください。

さらに読む:

• Livewire と Inertia.js: Laravel フロントエンドの比較

技術的な考慮事項

Inertia では、適切なキャッシュ戦略を確立するのが簡単ではないため、最初にアプリをオフラインにする作業が複雑になる可能性があります。また、デフォルトでは、Inertia はリクエストごとにページ全体のコンポーネントを送信し、ペイロード サイズが増加しますが、これは部分的なリロードで解決できることにも留意してください。

Inertia.js の長所

Inertia には、従来のクライアント側でレンダリングされる SPA に比べて、一般的な利点がいくつかあります。その主な強みを 1 つずつ説明しましょう。

シームレスな統合

Inertia は、一般的なフロントエンドおよびバックエンド フレームワークと完璧に統合し、デモ ビルドで Vue を直接サポートします。フロントエンドとバックエンドの両方を組み合わせたサポートされるフレームワークとライブラリには、Laravel、Rails、Phoenix、Django、React、Vue、Svelte が含まれます。

Laravel を使用すると、Vite でアセットを構築できるため、Webpack ベースの Laravel Mix よりもはるかに高速で生産的な開発エクスペリエンスが得られます。 Vite ベースのアセット バンドルは、JavaScript ベースのフロントエンドを実装することが目標である場合に最適です。

さらに読む:

• Inertia.js、Vue.js、AdonisJs の入門
• Laravel と Vue を使用したシングルページ アプリの作成

開発の簡素化

上で説明したように、開発者のエクスペリエンスはやや劣るものの、Inertia は統合を簡素化し、フロントエンドとバックエンドを連携させるための別個の API の必要性を排除します。 Inertia を使用すると、スターター キットを使用できるようになり、開発用にクライアント側とサーバー側の両方の環境をセットアップするための手動インストール ガイドが提供されます。

パフォーマンス

Inertia アプリは、巨大な JavaScript バンドルを含む完全にサーバーでレンダリングされた HTML をクライアントに送信する代わりに、クライアント上で比較的高速にレンダリングする初期 JSON データを含む最小限の HTML シェルを受け取ります。

これにより、Inertia ベースのアプリは、通常のクライアント側でレンダリングされる SPA よりも複雑さを増すことなく、初期パフォーマンスがわずかに向上します。また、全体的な UX の品質が向上し、重要なコア Web Vital 指標である First Contentful Paint も改善されます。

さらに読む:

• SPA 向けのコア Web Vitals のベスト プラクティス

SEO に優しい

慣性ベースのアプリはサーバー側のルーティングを使用するため、URL がより整理され、簡単にクロール可能になります。これにより、各ページのメタデータの処理が非常に簡単になります。また、最後のポイントで説明したように、これらのアプリは、クライアントに送信される初期データの量が少ないため、FCP スコアが高くなる可能性があります。

これらの両方の機能を組み合わせると、SEO が向上し、Inertia.js アプリに従来の SPA よりも優れた優位性が与えられます。

ヒント: クライアント側レンダリング (CSR) が FCP メトリクスに悪影響を及ぼしている場合は、Inertia.js の SSR プラグインを使用して完全にサーバーでレンダリングされるアプリを選択すると、スコアが向上します。

バンドルサイズ

Inertia.js はフロントエンドとバックエンドの間のアダプターとして機能するため、(当然のことながら) 非常にコンパクトで、圧縮および gzip 圧縮された重さはわずか約 15kB です。

ドキュメント

Inertia のドキュメントを参照すると、特に Laravel をバックエンド フレームワークとして使用する場合にすぐに使い始めることができます。また、レガシー バージョンのアップグレード ガイドもあり、一般的な概念から高度な概念までを 1 か所でカバーしています。

Inertia.js を使ってみる

最も人気のある 2 つのフロントエンドおよびバックエンド ソリューション、つまり React ベースのフロントエンドを備えた Laravel ベースのバックエンドを使用して Inertia をセットアップする方法を学びましょう。このチュートリアルで説明されているすべてのコードは、この GitHub リポジトリにあります。

簡単にするために、この設定には TypeScript の使用が含まれていないことに注意してください。

サーバー側のインストール

マシンに Laravel がインストールされていると仮定して、Laravel インストーラー コマンドを使用して新しい Laravel プロジェクトを作成しましょう。

laravel new

開発者ターミナルに次のようなものが表示されるはずです:

ターミナルでコマンドを実行し、プロジェクトの名前を指定すると、インストーラーは開始キットとテスト フレームワークを選択し、Git リポジトリを初期化し、その他のセットアップ手順を実行するように求めます。

Breeze や Jetstream などのスターター キットには、既製の Inertia.js ベースの足場とデモ アプリが含まれていますが、私たちはそれを望んでいません。代わりに、最初からセットアップします。

さらに読む:

• Laravel Breeze の Inertia-React スタックと Next.js および Gatsby の比較
• Laravel と AdonisJs: どちらを使用するべきですか?

インストール手順が終わるまでに、データベースを選択するように求められます。この記事の説明には PostgreSQL を使用しているため、pgsql を選択しました。データベースの好みに応じて選択してください。

次に、ターミナルで次の Composer コマンドを実行して、Laravel の Inertia.js 統合をインストールする必要があります。

composer require inertiajs/inertia-laravel

上記のコマンドは、Inertia 用の Laravel アダプターとその依存関係をインストールします。また、Laravel と Inertia が連携するための基礎も整います。

その後、Laravel で Inertia リクエストを処理するために Inertia ミドルウェアを追加しましょう。これを行うには、次の職人コマンドを使用します:

laravel new

クライアント側のインストール

Laravel のデフォルトの Blade テンプレートの代わりに、React を使用してページとコンポーネントを処理します。プロジェクト フォルダーに cd で移動し、次のコマンドを使用して React と React DOM をインストールしましょう。これを行うには、選択した Node パッケージ マネージャーを使用します。

composer require inertiajs/inertia-laravel

プロジェクト全体を通じて Vite をアセット マネージャーとして使用するため、Vite の React プラグインも開発依存関係としてインストールしましょう。

php artisan inertia:middleware

最後に、以下のコマンドを使用して React の Inertia サポートを追加します。

pnpm add react react-dom

この設定では Tailwind CSS も使用していますが、これは完全にオプションです。 Tailwind CSS もインストールしたい場合は、React または Vue アプリで Tailwind CSS をインストールする場合と同じ手順を実行します。

構成

まず、resources/js ディレクトリで app.js ファイルを見つけ、その名前を app.jsx に変更し、その内容を次のものに置き換えます。

pnpm add --save-dev @vitejs/plugin-react

上記の変更は、Inertia がページを識別し、正しいルートにリンクするのに役立ちます。

次に、resources/view ディレクトリにある welcome.blade.php ファイルの名前を app.blade.php に変更し、その内容を次のように置き換えます。

pnpm add @inertiajs/react

Web ページの基本的な HTML 構造内に、このファイルには、リロードの実行やスクリプトの追加などのために特定のスクリプトを挿入するために必要な Inertia ディレクティブと Vite ディレクティブが含まれていることに注意してください。

次に、Inertia 固有のリクエストを処理するために必要なミドルウェアを bootstrap/app.php ファイルに追加します。

import { createInertiaApp } from "@inertiajs/react";
import { createRoot } from "react-dom/client";
import "../css/app.css";

createInertiaApp({
  resolve: (name) => {
    const pages = import.meta.glob("./Pages/**/*.jsx", { eager: true });
    return pages[`./Pages/${name}.jsx`];
  },
  setup({ el, App, props }) {
    createRoot(el).render(<App {...props} />);
  },
});

Vite が提供するメリットを享受するために、React プラグインを Vite と連携するように設定しましょう。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  @viteReactRefresh
  @vite('resources/js/app.jsx')
  @inertiaHead
</head>
<body>
  @inertia
  <div id="app"></div>
</body>
</html>

最後に、次のコマンドを使用して Laravel と React の両方を実行しましょう:

<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
use App\Http\Middleware\HandleInertiaRequests;

return Application::configure(basePath: dirname(__DIR__))
  ->withRouting(
    web: __DIR__.'/../routes/web.php',
    commands: __DIR__.'/../routes/console.php',
    health: '/up',
  )
  ->withMiddleware(function (Middleware $middleware) {
    $middleware->web(append: [
        HandleInertiaRequests::class,
    ]);
  })
  ->withExceptions(function (Exceptions $exceptions) {
    //
  })->create();

これらのコマンドを 1 つのターミナル ウィンドウでまとめて実行するシェル スクリプトを作成できますが、作業をシンプルかつ簡単にするために、ここでは 2 つの別々のターミナルで実行しましょう。

これらのコマンドが正常に実行されると、2 つのローカル URL が表示されます。 Laravel を実行して、Laravel アプリがどのように表示されるかを確認します。これで、Inertia を使用した基本アプリのセットアップが完了しました!

Inertia.js の主な機能

Inertia アプリを使用すると、さまざまなことができます。知っておくべき優れた機能のいくつかを見てみましょう。

ページとレイアウト

さまざまなレイアウトやページをより適切に整理するには、resources/js ディレクトリに 2 つのサブディレクトリを作成します。ここでコンポーネントを別のディレクトリで管理し、必要に応じてページ内で使用することもできます。

メイン レイアウトの簡単な例を次に示します。

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [
    laravel({
      input: "resources/js/app.jsx",
      refresh: true,
    }),
    react(),
  ],
  resolve: {
    alias: {
      "@": "/resources/js",
    },
  },
});

これは基本的にベース レイアウトとして機能するコンポーネントであるため、専用のレイアウト フォルダーに配置されます。次のコードに示すように、MainLayout をページのコンポーネントとして利用できるようになりました:

laravel new

MainLayout.jsx と About.jsx がどのように連携して、Tailwind CSS が提供するスタイルを使用して作業ページを形成できるかを簡単に示します。

リンクとルーティング

従来の Laravel ルーティングでは、新しいルートを作成して、最後のセグメントで学習したページにフックするのが簡単です。ファイルベースではありませんが、ルーティングの管理は非常に簡単です。 Express や Fastify などの JavaScript ベースのバックエンド フレームワークを使用したことがある場合は、Laravel でのルーティングの仕組みにすでに慣れているでしょう。

routes/web.php ファイルに移動し、新しいルートを追加し、以下のコードに示すように Inertia のレンダリング メソッドを使用して関連ページをレンダリングします。

composer require inertiajs/inertia-laravel

Inertia の動的リンクは React や Next に似ており、以下に示すように Inertia の Link コンポーネントを使用して実行できます。

php artisan inertia:middleware

以下のスクリーン キャプチャは、上記のコード ブロックで作成したばかりのナビゲーションの SPA のような動的動作を示しています。

HTTP リクエスト (GET/POST/非 GET リクエスト)

Inertia は、状態とフォームの送信を処理するための GET および POST リクエストを処理する useForm フックを提供します。また、 usePage フックも提供します。これを使用すると、成功または失敗のメッセージなど、サーバーからクライアントに渡される共有データにアクセスできます。

これは、ユーザー データをロードして送信するための GET リクエストと POST リクエストを作成する簡単な例です。 GET リクエストは Inertia によって暗黙的に処理されますが、useForm フックから post メソッドを使用して POST リクエストを作成してサーバーにデータを送信することに注意してください。

pnpm add react react-dom

このアプローチを使用すると、データベースからデータのリストを取得して HTML テーブルに表示するためのページを作成できます。また、以下に示すようにフォームを使用してこのデータをデータベースに追加することもできます。

進行状況インジケーター

Inertia.js は、NProgress ベースの進行状況表示を提供します。 App.jsx ファイルを確立するときにこれを有効にし、そこで進行状況インジケーターの構成設定を指定できます。

pnpm add --save-dev @vitejs/plugin-react

NProgress の読み込みアニメーションがどのようなものかをよく知らない場合は、ここで少し覗いてみましょう:

データベースの統合

Laravel を定期的に使用している場合は、データベースを Inertia セットアップに統合して使用するのにそれほど時間はかかりません。必要なデータベース資格情報を .env ファイルに追加し、適切なデータベース ドライバーを使用していることを確認し、config/database.php ファイルを確認するだけで準備完了です。

既存のデータベースでは、Laravel の移行システムを使用して必要なデータベース スキーマを定義できます。データベースを持っていなかったので、データベースを作成し、Laravel Seeder メカニズムを使用して偽のユーザーデータを入力し、フロントエンドに表示しました。その後に私が行ったいくつかの手順は次のとおりです。

• アプリ ディレクトリにユーザー データのモデルを作成し、このデータに関するデータベース リクエストを処理する HTTP コントローラーも作成しました
• resource/js/Pages ディレクトリに Users ページを作成し、ユーザー配列を受け取る prop をそれに提供しました。このユーザー配列は、Inertia で本質的に作成された GET リクエストを通じて必要なデータを取得します。 POST リクエストを発行してデータをデータベースに追加することもできます
• routes/web.php ファイルでユーザールートを定義し、HTTP コントローラーをそれにリンクしました

Laravel エコシステムを初めて使用する人、または Laravel でデータベースを頻繁に操作しない人にとって、データベースを移行してデータを設定する際には、これよりも少し時間がかかる場合があります。このような場合、構成キャッシュをクリアすると、キャッシュされた構成オプションによって引き起こされるエラーを取り除くのに非常に役立つ可能性があります。

Inertia.js の使用例

Inertia の潜在的な用途は多岐にわたります。 Inertia を使用して Laravel と最新の JavaScript フロントエンドを組み合わせると、堅牢なバックエンド機能を備えたモノリシック アプリのフルスタック開発が簡素化されます。

すべてのチームや状況に適しているわけではありませんが、Inertia が良い選択肢と思われる使用例をいくつか紹介します。

• テンプレート化に Blade に依存したくないアプリで、クライアント側の機能を処理する堅牢なソリューションが必要なアプリ
• バックエンドとして Laravel を使用しているが、主に JavaScript ベースのフロントエンド フレームワーク用に作成および保守されている最新のライブラリを利用したい古いアプリ
• サーバーレスではなく従来のサーバー技術によって提供される活用を享受するために、Laravel ベースのバックエンドへの移行を計画している最新のアプリ
• 検索エンジンでの可視性の向上と SSR のパフォーマンス上の利点を求める SPA
• PHP と JavaScript の両方を愛し、使いたい人向け

Inertia.js 対 Livewire 対 ハイブリッド

Inertia は、サーバー側とクライアント側のフレームワークとライブラリをブリッジするための唯一のソリューションではありません。 Livewire と Hybridly も、独自の利点と欠点を持つ 2 つの人気のあるツールです。オプションを比較するときは、次の点を考慮するとよいでしょう。

• コミュニティ — Inertia.js のコミュニティは Livewire に比べて比較的小さいですが、Hybridly よりは優れています。
• 機能 — Livewire と Hybridly はフロントエンド フレームワークの実装サポートを提供しませんが、Inertia.js は主要な JavaScript ベースのフロントエンド ソリューションをサポートすることで知られています。
• パフォーマンス — 主に実装に依存しますが、Inertia.js ベースの SPA はより優れた知覚パフォーマンスを提供できますが、Livewire と Hybridly を使用したサーバー レンダリング アプリは、ほとんどのページがサーバー レンダリングされるため、より優れている可能性があります。 .
• ドキュメント — Livewire と Inertia.js には、Hybridly に比べて優れたドキュメントがあり、かなり新しく、さらに改善の余地があります。

この表は、決定をさらに詳しく伝えるために、これら 3 つを比較する役立つスナップショットを提供します。

Feature	Inertia.js	Livewire	Hybridly
Server-side framework	Laravel, Rails	Laravel only	Laravel only
Client-side framework	Vue.js, React, Svelte	None (PHP-based)	Vue.js
SPA-like experience	Yes	Yes	Yes
Server-side rendering (SSR)	Optional	Yes	Yes
Real-time updates	No (needs additional setup)	Yes	Yes
Full-page reloads	No	No	No
Learning curve	Moderate	Low	Moderate
Component-based architecture	Yes	Yes	Yes
State management	Client-side	Server-side	Both
SEO-friendly	Good	Excellent	Excellent
Backend-driven UI	Partial	Full	Full
Progressive enhancement	Limited	Yes	Yes
File uploads	Supported	Native support	Supported
Pagination	Supported	Native support	Supported
Form handling	Client-side	Server-side	Both
Authentication	Supported	Native support	Supported
Authorization	Supported	Native support	Supported
Testing	Both client & server	Server	Both client and server
Ecosystem/Community	Small	Large	Small (newer)
Performance	Very good	Good	Very good
Bundle size	Larger (due to JS framework)	Smaller	Moderate
Offline support	Possible	Limited	Possible
Mobile app development	Possible	Not ideal	Possible

結論

この導入ガイドでは、Inertia.js とは何か、また、Inertia.js を使用して、Laravel などの従来のバックエンド フレームワークと React などの最新のフロントエンド ライブラリを利用したハイブリッド アプリケーションを作成する方法について学びました。

Inertia を使用することの長所と短所、その実用的なアプリケーションのいくつか、および Laravel でのセットアップ例について学びました。ガイドに従っているときに行き詰まった場合は、取り上げたプロジェクト用にこの GitHub リポジトリのクローンを作成することを検討してください。または、コメントを残してください。喜んでサポートさせていただきます。

---

新しい機能を構築したり、パフォーマンスを向上させるために、新しい JS ライブラリを追加していますか?彼らが逆のことをしていたらどうなるでしょうか？

フロントエンドがより複雑になっていることは疑いの余地がありません。新しい JavaScript ライブラリやその他の依存関係をアプリに追加するときは、ユーザーが未知の問題に遭遇しないように、可視性を高める必要があります。

LogRocket は、JavaScript エラーを自分のブラウザで発生したかのように再生できるフロントエンド アプリケーション監視ソリューションで、バグにより効果的に対応できます。

LogRocket は、フレームワークに関係なく、あらゆるアプリで完璧に動作し、Redux、Vuex、および @ngrx/store からの追加のコンテキストをログに記録するプラグインを備えています。問題が発生する原因を推測する代わりに、問題が発生したときにアプリケーションがどのような状態にあったかを集計してレポートできます。 LogRocket はアプリのパフォーマンスも監視し、クライアントの CPU 負荷、クライアントのメモリ使用量などのメトリクスをレポートします。

自信を持って構築 — 無料でモニタリングを始めましょう。

以上がInertia.js 導入ガイド: 概要、例、代替案の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。