laravel8.0のInertiaでflash messageを利用する方法

はむ

laravelのInertiaで「登録完了しました！」のような一時的なメッセージを表示させたいのですが、どうすればできますか？

タック

laravelにはflash messageという優れた仕組みがあります。Inertiaを使うと利用方法が少し異なるので見ていきましょう！

今回は次の方におススメの内容になります。

一時的なメッセージを表示させたい
複数の一時的なメッセージを表示させたい
Inertiaでflash messageを使う方法を知りたい

一時的にメッセージを表示させる裏の仕組みを理解したうえで、実際に利用できるようになります。それでは見ていきましょう！

flash messageとは何か
Inertiaでflash messageを使う

flash messageとは何か

flash messageとは「セッションにデータを一時保存して、次のページで利用できる仕組み」です。

登録の完了などのステータスメッセージを表示させたい場合に利用します。

セッションはサーバーにデータを保存してブラウザを閉じるまで保存してくれます。

後続のHTTPリクエストの後（次のページが表示されて次にページが読み込まれた後）に一時保存したデータを削除します。

この一連の処理を自動で行ってくれるため、次のページでのみメッセージを表示させたいときに便利です。

Inertiaでflash messageを使う

flash messageを使う流れは次のとおりです。

flash messageを設定する
flash messageをVueファイルに渡す
Vueファイルでflash messageを受け取り表示する

今回はユーザーが完了した時にインフォメーションメッセージを表示させましょう！

flash messageを設定する

スタートはInertiaを導入したところからです。まだの方はこちらから

laravel8系から登場したInertia.jsとは？導入からcompositionAPIへの書き換えまで

まずはセッションにメッセージを保存します。ユーザー登録完了し、ログインした後に実装します。

RegisteredUserController.php

public function store(Request $request)
{
    $request->validate([
        'name' => 'required|string|max:255',
        'email' => 'required|string|email|max:255|unique:users',
        'password' => ['required', 'confirmed', Rules\Password::defaults()],
    ]);

    $user = User::create([
        'name' => $request->name,
        'email' => $request->email,
        'password' => Hash::make($request->password),
    ]);

    event(new Registered($user));

    Auth::login($user);

    session()->flash('message', 'ユーザー登録しました。');

    return redirect(RouteServiceProvider::HOME);
}

「message」をキーにして「ユーザー登録しました」をセッションに保存しています。

Laravelでセッションデータを利用する方法は、グローバルなsessionヘルパとRequestインスタンスの２つあります。

今回は、グローバルなsessionPHP関数を使用して、セッション内のデータを取得／保存しました。

Requestインスタンスを利用して次のように書き換えることもできます。どちらを使用しても差はほとんどありません。

$request->session()->flash('message', 'ユーザー登録しました。');

flash messageをVueファイルに渡す

Vueファイルに値をわたすために、セッションに保存したデータを取得します。

HandleInertiaRequests.php

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'flash' => [
            'message' => $request->session()->get('message'),
        ],
    ]);
}

Vueファイルで一律に取得したいデータは、shareメソッドにまとめて記述します。

 'flash' => [
'message' => $request->session()->get('message'),
],

messageというキーでセッションから取得した値（ユーザー登録しました。）を、messageというキーに値としていれています。

親クラスのshareメソッドの戻り値に、ここで設定する値を合体しています。

ちなみに、親クラスのshareメソッドでは、バリデーションのエラーメッセージを格納していることがわかります。

Middleware.php

public function share(Request $request)
{
    return [
        'errors' => function () use ($request) {
            return $this->resolveValidationErrors($request);
        },
    ];
}

これで、セッションに保存した値をVueファイルに送る準備ができました。

Vueファイルで値を受け取る

flash messageを受け取るコンポーネントを作成しましょう。

resources/js/Components/FlashMessage.vue

<template>
    <div v-if="message">
        <ul class="flex items-center justify-center bg-gray-600 text-white">
            <li>{{ message }}</li>
        </ul>
    </div>
</template>

<script>
import {usePage} from "@inertiajs/inertia-vue3";
import {computed} from "vue";

export default {
    name: "FlashMessage",

    setup() {
         const message = computed(() => usePage().props.value.flash.message)

        return {
            message,
        }
    }
}
</script>

<style scoped>

</style>

import {usePage} from "@inertiajs/inertia-vue3";

shareメソッドで設定した値を受け取るために、usePageをインポートします。

const message = computed(() => usePage().props.value.flash.message)

メッセージに変化があった場合に表示させたいので、computedで値を監視して、変化後の値をmessgeで定義しています。

usePage().props.value.で値にアクセスできます。今回はflashキーにあるmessageキーにアクセスしたいので、flash.messageと記述します。

ダッシュボードにflash messageコンポーネントを置きましょう。

resources/js/Pages/Dashboard.vue

<template>
    <Head title="Dashboard" />

    <BreezeAuthenticatedLayout>
        <template #header>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                Dashboard
            </h2>
        </template>

        <FlashMessage/>

　　～省略～
</template>

<script>
import BreezeAuthenticatedLayout from '@/Layouts/Authenticated.vue'
import { Head } from '@inertiajs/inertia-vue3';
import FlashMessage from "@/Components/FlashMessage";

export default {
    components: {
        FlashMessage,
        BreezeAuthenticatedLayout,
        Head,
    },
}
</script>

これで準備は整いましたので、ユーザー登録をしてみましょう！

「ユーザー登録しました。」と表示されれば成功です。