Laravelでのフラッシュメッセージのベストプラクティス

WEB制作
Laravelでのフラッシュメッセージのベストプラクティス
目次

想定環境

  • Laravel8

フラッシュメッセージとは

フラッシュメッセージとは、データの登録時や削除などのアクション実行後に簡単なメッセージを表示させる機能ことです。

Bootstrap v5 ドキュメントより

Sessionヘルパーの問題点

Laravelでフラッシュメッセージを送信する場合、一般的には下記の様なコードが紹介されているかと思います。

\Session::flash('flash_message', 'This is a message');

ただ、これだとkeyの値が任意の値を取れてしまうため、ソースコードを書くときに混乱を招いてしまいます。

更に、メッセージレベルも表現しようとした場合には、下記の様なコードとなります。

\Session::flash('flash_message', 'This is a message');
\Session::flash('message_type', 'error');

フラッシュメッセージのkeyを管理するのでも怪しかったのが、メッセージタイプのkeyとメッセージタイプを管理しなくしなくてはならなくなってしまいました。

デフォルトのヘルパーだけでは、フラッシュメッセージを管理することは困難なため、フラッシュメッセージ用のライブラリを使用しましょう。

prologue/alertsのインストール

今回は、prologue/alerts を使用します。composerコマンドでライブラリをインストールします。

$ composer require prologue/alerts

インストール後、サービスプロバイダーとエーリアスをapp/config/app.phpに登録します。

<?php

return [
    'providers' => [
        // ...

        Prologue\Alerts\AlertsServiceProvider::class,
    ],

    'aliases' => [
        // ...

        'Alert' => Prologue\Alerts\Facades\Alert::class,
    ],
];

設定ファイルをartisanコマンドを用いて生成します。

$ php artisan vendor:publish --provider="Prologue\Alerts\AlertsServiceProvider"

メッセージの送信

prologue/alerts は、フラッシュメッセージ用のライブラリです。ライブラリを用いることで、メッセージレベルを制御することができるようになります。prologue/alerts を用いてのメッセージ送信は、下記のように行います。

Alert::success('You have successfully logged in')->flash();

メッセージレベルは、デフォルトでは、info, success, warning, error が使用できます。

Alert::info('This is an info message.');
Alert::success('This is a success message.');
Alert::warning('This is a warning message.');
Alert::error('This is an error message.');

config/prologue/alerts.phpを変更することで、メッセージレベルの種類を追加することも可能です。

'levels' => [
    'info',
    'warning',
    'error',
    'success',
],

メッセージの表示

Viewでフラッシュメッセージを表示する場合は、以下のようになります。

@foreach (Alert::getMessages() as $type => $messages)
    @foreach ($messages as $message)
        <x-alert type="error" :message="$message"/>
    @endforeach
@endforeach

e.g. /resources/views/components/alert.blade.php

<div class="alert alert-{{ $type }}" role="alert">
    {{ $message }}
</div>

アイコンなどの切り替え

メッセージタイプ毎にアイコンなどを切り替える場合は、メッセージタイプ毎にコンポーネントを作成すると良いでしょう。

@foreach (Alert::getMessages() as $type => $messages)
    @foreach ($messages as $message)
        @component("components.alert.${type}")
            {{ $message }}
        @endcomponent
    @endforeach
@endforeach

e.g. /resources/views/components/alert/warning.blade.php

@component("components.alert.alert", [ 'type' => 'warning' ])
    @slot('icon')
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-triangle-fill flex-shrink-0 me-2" viewBox="0 0 16 16" role="img" aria-label="Warning:">
            <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/>
        </svg>
    @endsolt

    {{ $message }}
@endcomponent

e.g. /resources/views/components/alert/alert.blade.php

<div class="alert alert-{{ $type }} d-flex align-items-center" role="alert">
    @if(isset($icon) && !$icon->isEmpty())
        {!! $icon !!}
    @endif
    <div>
        {{ $slot }}
    </div>
</div>

終わりに

今回、フラッシュメッセージの管理ライブラリとして、prologue/alertsを紹介させていただきました。ライブラリの中にはViewなども生成できるライブラリも存在しますが、Viewは、アプリケーションごとにカスタマイズされる可能性が高いので、メッセージタイプのみをライブラリで管理するのがベストではないのかと思います。

もちもん、Viewも生成できるライブラリを使用することも、アプリケーションを迅速に作成する上では必要なツールの一つになるとは思います。

参考サイト