Inertia.jsについて

1.はじめに

今回ReactとlaravelでSPAを構築する際、Inertia.jsを導入しました。
公式では、
「Inertia を使用すると、最新の SPA に伴う複雑さを伴わずに、完全にクライアントサイドでレンダリングされるシングルページアプリを作成できます。」
また「Laravel向けに最適化されている」と記されています。

本記事では、Inertiaの機能の中でも使用する機会が多いと思われる、

• Linkコンポーネント
• useForm
• リダイレクト方法

についてまとめていこうと思います。

2.導入手順

Laravelはスターターキットとして
React 19(with inertia)、TypeScript、Tailwind、shadcn/uiコンポーネントライブラリ
を使用するReactスターターキットを用意している。

以下のコードを実行し、スターターキットを選択する。
ちなみに、Laravel 12からbladeスターターキットは無くなっているので注意。

composer global require laravel/installer

3.Inertia.jsのLinkコンポーネント

Linkコンポーネントは、通常の a タグの代わりに使うことでSPAの体験を提供するための主要な要素の一つです。
ページ遷移時にフルページリロードを避け、部分的な更新のみでスムーズなユーザー体験を提供できます。

使用例

import { Link } from '@inertiajs/react';

export default function Home() {
  return (
    <div>
      <h1>トップページ</h1>
      {/* Inertia の Link で遷移 */}
      <Link href="/about" className="text-blue-600 underline">
        このサイトについて
      </Link>
    </div>
  );
}

特徴とプロパティ

• href: リンク先のURLを指定します。通常のaタグと同様です
• method: リクエストメソッドを指定します。デフォルトはGETですが、POST、PUT、PATCH、DELETEなども指定できます
• data: リクエスト時に送信するデータを指定します。フォームデータなどを渡す際に使用します
• as: リンクのHTMLタグを指定します。デフォルトはaタグですが、buttonなど他のタグを使用することもできます
• replace: trueにすると、履歴スタックを置き換えます（window.history.replaceStateを使用）

4.Inertia.jsのuseFormについて

useFormはInertia.jsが提供するReactのカスタムフックで、フォームの状態管理と送信を簡単に行うためのものです。このフックを使うことで、フォームの入力値を管理し、バリデーションや送信処理を簡潔に実装できます。

使用例

import React from 'react';
import { useForm } from '@inertiajs/react';

export default function CreatePost() {
  const { data, setData, post, processing, errors, reset } = useForm({
    title: '',
    body: '',
  });

  const submit = (e) => {
    e.preventDefault();
    post('/posts', {
      onSuccess: () => reset(), // 成功したらフォームをリセット
    });
  };

  return (
    <form onSubmit={submit} className="space-y-4">
      <div>
        <label className="block">タイトル</label>
        <input
          type="text"
          value={data.title}
          onChange={(e) => setData('title', e.target.value)}
          className="border p-2 w-full"
        />
        {errors.title && <div className="text-red-500">{errors.title}</div>}
      </div>

      <div>
        <label className="block">本文</label>
        <textarea
          value={data.body}
          onChange={(e) => setData('body', e.target.value)}
          className="border p-2 w-full"
        />
        {errors.body && <div className="text-red-500">{errors.body}</div>}
      </div>

      <button
        type="submit"
        disabled={processing}
        className="bg-blue-500 text-white px-4 py-2 rounded"
      >
        投稿する
      </button>
    </form>
  );
}

プロパティとメソッド

useFormフックが返すオブジェクトにはいくつかのプロパティとメソッドがあります。
下記、よく使用する一部を紹介します。

• data: フォームのデータオブジェクト。初期値を渡してフォームの入力値を管理します
• setData: フォームデータを更新する関数。setData('fieldName', value)の形式で使用します
• post/put/patch/delete/get: フォームを送信するためのメソッド。HTTPメソッドに応じて適切なものを選択します
• processing: フォームが送信中かどうかを示すブール値。送信中はtrueになります
• errors: バリデーションエラーメッセージを格納するオブジェクト。サーバーサイドからのエラーを表示するのに使用します
• reset: フォームデータをリセットする関数
• clearErrors: エラーメッセージをクリアする関数

5.Inertia.js におけるリダイレクト方法

Inertia.js を使う場合、リダイレクトには大きく分けて2種類の方法があります。

5.1 return Inertia::location(route('profile.edit'));

• Inertia特有のリダイレクト方法

• クライアントサイドでリダイレクト（JavaScript経由で URL を変更）

• SPA 体験を維持（ページ全体のリロードなしで、部分的に遷移）

// コントローラ内
public function update(Request $request)
{
    // 更新処理...
    return Inertia::location(route('profile.edit'));
}

5.2 return redirect()->route('profile.edit');

• 通常の Laravel リダイレクト

• サーバーサイドでリダイレクト（HTTP 302 が返り、ブラウザが再リクエスト）

• フルリロード発生（SPA 体験は一時的に中断）

使い分け

• Inertia::location

SPA らしいスムーズなページ遷移を維持したい場合

Inertia ページ間での移動を自然に見せたい場合

• redirect()->route

フルリロードが許容されるケース

Inertia を使っていない処理やログアウト処理など

6.まとめ

本記事では、Inertia.js を使う上で特によく利用する機能を整理しました。

• Link コンポーネント
  通常の aタグの代わりに使用し、フルリロードを避けてスムーズなページ遷移を実現できます。

• useForm フック
  フォームの状態管理・送信・エラーハンドリングを一括で扱える便利なフック。
  data、setData、post などを組み合わせてシンプルに実装できます。

• リダイレクト方法
  Inertia::location … クライアントサイドでの遷移、SPA 体験を維持
  redirect()->route … サーバーサイドの標準的なリダイレクト、フルリロード