Laravel Jetstream 1.0 Inertia

イントロダクション

Jetstreamが提供しているInertia.jsスタックは、テンプレート言語としてVue.jsを使います。Inertiaアプリケーションの構築は、多くの部分が典型的なVueアプリケーションの構築と似ています。しかし、Vueのルータの代わりにLaravelのルータを使います。InertiaはLaravelコンポーネントデータの名前を提供することにより、LaravelのバックエンドからVueコンポーネントの単一ファイルをレンダーできるようにする小さなライブラリーです。データはコンポーネントの"props"へ受け渡します。

言い換えればこのスタックは、複雑なクライアントサイドのルーティングを使用せず、Vue.jsのフルパワーを提供します。今まで使ってきたLaravelの標準ルータが使用できます。

Inertiaの使用時、アプリケーションのルートはInertiaの「ページ」をレンダーすることで、レスポンスを返します。これはLaravelのBladeビューを返すのと、とても似ています。

use Illuminate\Http\Request;
use Inertia\Inertia;

/**
 * 一般的なプロフィール設定スクリーンの表示
 *
 * @param  \Illuminate\Http\Request  $request
 * @return \Inertia\Response
 */
public function show(Request $request)
{
    return Inertia::render('Profile/Show', [
        'sessions' => $this->sessions($request)->all(),
    ]);
}

Inertiaスタックの使用時、認識しておくべきJetstreamのユニークな機能があります。以降でこうした機能を説明します。

{tip} Inertiaスタックを使用する前に、Inertiaドキュメント全体を読んでおくことを強くおすすめします。

コンポーネント

JetstreamのInertiaスタックで構築するとき、UIの一貫性を支援し使いやすくするため、さまざまなVueコンポーネント（ボタン、パネル、入力、モーダル）を作成します。これらのコンポーネントは使用するもしないも自由です。これらのコンポーネントはアプリケーションのresources/js/Jetstreamディレクトリへ設置します。

resources/js/Pagesディレクトリ内にあるJetstreamの既存のビュー内で使い方を確認すれば、これらのコンポーネントの使用方法についての洞察を得られるでしょう。

カスタムレンダリング

Teams/ShowやProfile/ShowのようなInertiaページのいくつかは、Jetstream自身の中からレンダーされます。しかしアプリケーション構築時に、そうしたページへ追加のデータを渡す必要が起きることもあるでしょう。そのため、Jetstreamはそうしたページへデータ／propsを渡せるようカスタマイズできるように、Jetstream::inertia()->whenRenderingメソッドを用意してます。

このメソッドはページの名前とクロージャを引数に取ります。このクロージャは受信HTTPリクエストと、ページに送られる典型的なデフォルトデータの配列を引数に受けます。通常、このメソッドはJetstreamServiceProviderのbootメソッドの中で呼び出します。

use Illuminate\Http\Request;
use Laravel\Jetstream\Jetstream;

Jetstream::inertia()->whenRendering(
    'Profile/Show',
    function (Request $request, array $data) {
        return array_merge($data, [
            // カスタムデータ…
        ]);
    }
);

フォーム／バリデーションヘルパ

フォームとバリデーションエラーをより簡単に取り扱えるようにするため、laravel-jetstreamNPMパッケージを作成しました。このパッケージはJetstream Inertiaスタックを使用する場合、自動的にインストールされます。

Vueコンポーネントを通じてアクセスされる$inertiaオブジェクトへ新しいformメソッドをこのパッケージは追加します。formメソッドはエラーメッセージに簡単にアクセスできるようにし、フォーム送信に成功した時にフォームの状態をリセットするような利便性を提供する新しいフォームオブジェクトを作成するため使用します。

data() {
    return {
        form: this.$inertia.form({
            name: this.name,
            email: this.email,
        }, {
            bag: 'updateProfileInformation',
            resetOnSuccess: true,
        }),
    }
}

フォームはpost、put、deleteメソッドを使用し送信されます。フォーム作成時に指定されたデータはすべて自動的にリクエストへ含まれます。それに付け加え、Inertiaリクエストオプションも指定できます。

this.form.post('/user/profile-information', {
    preserveScroll: true
})

フォームのエラーメッセージはform.errorメッセージを使用してアクセスします。このメソッドは指定したフィールドの最初のエラーメッセージを返します。

<jet-input-error :message="form.error('email')" class="mt-2" />

すべてのバリデーションエラーを一次元化したリストは、errorsメソッドを使用してアクセスできます。この方法は、エラーメッセージを単純なリストで表示するときに便利です。

<li v-for="error in form.errors()">
    {{ error }}
</li>

フォームの現在の状態に関する追加情報はrecentlySuccessfulとprocessingメソッドで利用できます。これらのメソッドは無効や「進行中」のUI状態を記述するのに便利です。

<jet-action-message :on="form.recentlySuccessful" class="mr-3">
    Saved.
</jet-action-message>

<jet-button :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
    Save
</jet-button>

Jetstream Inertiaフォームヘルパの使用の詳細は、Jetstreamのインストール時に作成されるInertiaページをレビューし、学んでください。ページはアプリケーションのresources/js/Pagesディレクトリに設置しています。

モーダル

Jetstreamは、dialog-modalとconfirmation-modalの２種類のモーダルを用意しています。confirmation-modalは削除など破壊的なアクションを確認するときに使用しますが、一方のdialog-modalはいつでも使用できるより一般的なモーダルウィンドウです。

モーダルの使い方を示すため、以下のような自分のアカウントを削除したいユーザーにモーダルで確認する場合を考えてください。

<jet-confirmation-modal :show="confirmingUserDeletion" @close="confirmingUserDeletion = false">
    <template #title>
        Delete Account
    </template>

    <template #content>
        本当にあなたのアカウントを削除しますか？一度アカウントを削除してしまうと、あなたのリソースとデータは永遠に失われてしまいます。
    </template>

    <template #footer>
        <jet-secondary-button @click.native="confirmingUserDeletion = false">
            Nevermind
        </jet-secondary-button>

        <jet-danger-button class="ml-2" @click.native="deleteTeam" :class="{ 'opacity-25': form.processing }" :disabled="form.processing">
            Delete Account
        </jet-danger-button>
    </template>
</jet-confirmation-modal>

ご覧の通り、モーダルのオープン／クローズ状態はコンポーネントが宣言しているshowプロパティにより判定できます。モーダルのコンテンツは、title、content、footer、３つのスロットで指定します。