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

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

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,
        }),
    }
}

フォームはpostputdeleteメソッドを使用し送信されます。フォーム作成時に指定されたデータはすべて自動的にリクエストへ含まれます。それに付け加え、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>

フォームの現在の状態に関する追加情報はrecentlySuccessfulprocessingメソッドで利用できます。これらのメソッドは無効や「進行中」の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-modalconfirmation-modalの2種類のモーダルを用意しています。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プロパティにより判定できます。モーダルのコンテンツは、titlecontentfooter、3つのスロットで指定します。

ドキュメント章別ページ

スタック

ヘッダー項目移動

注目:アイコン:ページ内リンク設置(リンクがないヘッダーへの移動では、リンクがある以前のヘッダーのハッシュをURLへ付加します。

移動

クリックで即時移動します。

バージョン

設定

適用ボタンクリック後に、全項目まとめて適用されます。

カラーテーマ
和文指定 Pagination
和文指定 Scaffold
Largeスクリーン表示幅
インデント
本文フォント
コードフォント
フォント適用確認

フォントの指定フィールドから、フォーカスが外れると、当ブロックの内容に反映されます。EnglishのDisplayもPreviewしてください。

フォント設定時、表示に不具合が出た場合、当サイトのクッキーを削除してください。

バックスラッシュを含むインライン\Code\Blockの例です。

以下はコードブロックの例です。

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class User extends Model
{
    /**
     * ユーザに関連する電話レコードを取得
     */
    public function phone()
    {
        return $this->hasOne('App\Phone');
    }
}

設定を保存する前に、表示が乱れないか必ず確認してください。CSSによるフォントファミリー指定の知識がない場合は、フォントを変更しないほうが良いでしょう。

キーボード・ショートカット

オープン操作

PDC

ページ(章)移動の左オフキャンバスオープン

HA

ヘッダー移動モーダルオープン

MS

移動/設定の右オフキャンバスオープン

ヘッダー移動

T

最初のヘッダーへ移動

E

最後のヘッダーへ移動

NJ

次ヘッダー(H2〜H4)へ移動

BK

前ヘッダー(H2〜H4)へ移動

その他

?

このヘルプページ表示
閉じる