Thinkstream

レスポンスの作成

Inertia のレスポンス作成は簡単です。まず、コントローラまたはルート内で Inertia::render() メソッドを呼び出し、レンダリングしたい JavaScript ページコンポーネントの名前と、そのページ用のプロパティ（データ）を指定します。

以下の例では、4 つの属性（id、title、start_date、description）を含む単一のプロパティ（event）を Event/Show ページコンポーネントに渡しています。

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'
            ),
        ]);

        // 代わりに inertia() ヘルパーを使用することもできます...
        return inertia('Event/Show', [
            'event' => $event->only(
                'id',
                'title',
                'start_date',
                'description'
            ),
        ]);
    }
}

プロパティ

サーバーからページコンポーネントにデータを渡すには、プロパティを使用します。プリミティブ型、配列、オブジェクト、そして自動的に解決されるいくつかの Laravel 固有の型など、さまざまな値を props として渡すことができます。

php

use App\Models\User;
use Illuminate\Http\Resources\Json\JsonResource;

Inertia::render('Dashboard', [
    // プリミティブ値
    'title' => 'Dashboard',
    'count' => 42,
    'active' => true,

    // 配列とオブジェクト
    'settings' => ['theme' => 'dark', 'notifications' => true],

    // Arrayable オブジェクト（Collection、Model など）
    'user' => auth()->user(), // Eloquent モデル
    'users' => User::all(), // Eloquent コレクション

    // API リソース
    'profile' => new UserResource(auth()->user()),

    // Responsable オブジェクト
    'data' => new JsonResponse(['key' => 'value']),

    // クロージャ
    'timestamp' => fn() => now()->timestamp,
]);

Eloquent モデルやコレクションのような Arrayable オブジェクトは、自動的に toArray() メソッドを使って変換されます。API リソースや JSON レスポンスのような Responsable オブジェクトは、toResponse() メソッドを通じて解決されます。

`ProvidesInertiaProperty` インターフェース

コンポーネントに props を渡す際、適切なデータ形式に自分自身を変換できるカスタムクラスを作成したい場合があります。Laravel の Arrayable インターフェースは単にオブジェクトを配列に変換するだけですが、Inertia では、より強力でコンテキストを考慮した変換を行える ProvidesInertiaProperty インターフェースが提供されています。

このインターフェースでは、toInertiaProperty メソッドを実装する必要があります。このメソッドは、プロパティキー（$context->key）、ページのすべての props（$context->props）、およびリクエストインスタンス（$context->request）を含む PropertyContext オブジェクトを受け取ります。

php

use Inertia\PropertyContext;
use Inertia\ProvidesInertiaProperty;

class UserAvatar implements ProvidesInertiaProperty
{
    public function __construct(protected User $user, protected int $size = 64)
    {
        //
    }

    public function toInertiaProperty(PropertyContext $context): mixed
    {
        return $this->user->avatar
            ? Storage::url($this->user->avatar)
            : "https://ui-avatars.com/api/?name={$this->user->name}&size={$this->size}";
    }
}

定義後、このクラスを prop の値として直接使用できます。

php

Inertia::render('Profile', [
    'user' => $user,
    'avatar' => new UserAvatar($user, 128),
]);

PropertyContext を使うことでプロパティキーにアクセスでき、共有データとマージするといった強力なパターンが可能になります。

php

use Inertia\Inertia;
use Inertia\PropertyContext;
use Inertia\ProvidesInertiaProperty;

class MergeWithShared implements ProvidesInertiaProperty
{
    public function __construct(protected array $items = [])
    {
        //
    }

    public function toInertiaProperty(PropertyContext $context): mixed
    {
        // プロパティキーにアクセスして共有データを取得
        $shared = Inertia::getShared($context->key, []);

        // 新しいアイテムとマージ
        return array_merge($shared, $this->items);
    }
}

// 使用例
Inertia::share('notifications', ['Welcome back!']);

return Inertia::render('Dashboard', [
    'notifications' => new MergeWithShared(['New message received']),
    // 結果: ['Welcome back!', 'New message received']
]);

`ProvidesInertiaProperties` インターフェース

場合によっては、関連する props をまとめて、異なるページ間で再利用したいことがあります。その場合、ProvidesInertiaProperties インターフェースを実装することで対応できます。

このインターフェースでは、キーと値のペアの配列を返す toInertiaProperties メソッドを実装する必要があります。このメソッドは、コンポーネント名（$context->component）とリクエストインスタンス（$context->request）を含む RenderContext オブジェクトを受け取ります。

php

use App\Models\User;
use Illuminate\Container\Attributes\CurrentUser;
use Inertia\RenderContext;
use Inertia\ProvidesInertiaProperties;

class UserPermissions implements ProvidesInertiaProperties
{
    public function __construct(#[CurrentUser] protected User $user)
    {
        //
    }

    public function toInertiaProperties(RenderContext $context): array
    {
        return [
            'canEdit' => $this->user->can('edit'),
            'canDelete' => $this->user->can('delete'),
            'canPublish' => $this->user->can('publish'),
            'isAdmin' => $this->user->hasRole('admin'),
        ];
    }
}

これらの prop クラスは、render() および with() メソッドで直接使用できます。

php

public function index(UserPermissions $permissions)
{
    return Inertia::render('UserProfile', $permissions);

    // または...

    return Inertia::render('UserProfile')->with($permissions);
}

複数の prop クラスを、他の props と一緒に配列として組み合わせることもできます。

php

public function index(UserPermissions $permissions)
{
    return Inertia::render('UserProfile', [
        'user' => auth()->user(),
        $permissions,
    ]);

    // またはメソッドチェーンを使用して...

    return Inertia::render('UserProfile')
        ->with('user', auth()->user())
        ->with($permissions);
}

ルートテンプレートのデータ

アプリケーションのルート Blade テンプレートで prop データにアクセスしたい場合があります。たとえば、meta description タグ、Twitter カードの meta タグ、Facebook Open Graph の meta タグを追加したい場合などです。このような場合、$page 変数を通じてデータにアクセスできます。

blade

<meta name="twitter:title" content="{{ $page['props']['event']->title }}">

場合によっては、JavaScript ページコンポーネントには送信されないデータをルートテンプレートに提供したいこともあります。これは withViewData メソッドを呼び出すことで実現できます。

php

return Inertia::render('Event', ['event' => $event])
    ->withViewData(['meta' => $event->meta]);

withViewData メソッドを呼び出した後は、通常の Blade テンプレート変数と同様に、定義したデータへアクセスできます。

blade

<meta name="description" content="{{ $meta }}">

最大レスポンスサイズ

クライアントサイドでの履歴ナビゲーションを有効にするため、すべての Inertia サーバーレスポンスはブラウザの履歴 state に保存されます。ただし、一部のブラウザでは、履歴 state に保存できるデータ量に制限がある点に注意してください。

たとえば、Firefox では上限が 16 MiB に設定されており、この制限を超えると NS_ERROR_ILLEGAL_VALUE エラーが発生します。通常、アプリケーションを構築するうえで実用的に必要となるデータ量を、この制限が超えることはほとんどありません。