【Laravel】フラッシュメッセージを実装する|簡単な掲示板アプリの作成

Laravelで、ユーザーの操作後に一度だけ表示される「フラッシュメッセージ」の実装方法を解説します。コントローラーでのリダイレクト時に `with()` メソッドを使って成功やエラーのメッセージをセッションに保存し、Bladeテンプレート側でそれを受け取って表示する具体的な手順を学べます。これにより、ユーザーに処理結果を分かりやすく伝えられます。

作成日: 更新日:

開発環境

  • OS: Windows10
  • Visual Studio Code: 1.73.0
  • PHP: 8.3.11
  • Laravel: 11.29.0
  • laravel/breeze: 2.2

サンプルコード

/app/Http/Controllers/ContactController.php

/app/Http/Controllers/ContactController.php
1         // メールの送信(ユーザー)
2         Mail::to($request->email)->send(new ContactMail($contactData, 'user'));
3 
4+        // フラッシュメッセージをセッションに保存
5+        session()->flash('success', 'お問い合わせ内容が送信されました。');
6+
7         return redirect()->route('contact.complete');
8     }
9 
10

/app/Http/Controllers/PostController.php

/app/Http/Controllers/PostController.php
1             'user_id' => auth()->id()
2         ]);
3 
4-        return redirect()->route('posts.show', ['post' => $post->id]);
5+        return redirect()->route('posts.show', ['post' => $post->id])->with('success', '掲示板が投稿されました。');
6     }
7 
8     /**
9 
10         // 所有者のみ編集ページにアクセス可能
11         if (Auth::id() !== $post->user_id) {
12-            return redirect()->route('posts.index');
13+            return redirect()->route('posts.index')->with('error', '掲示板の編集は投稿者のみです。');;
14         }
15 
16         return view('posts.edit', compact('post'));
17 
18         // 所有者のみ更新可能
19         if (Auth::id() !== $post->user_id) {
20-            return redirect()->route('posts.index');
21+            return redirect()->route('posts.index')->with('error', '掲示板の更新は投稿者のみです。');
22         }
23 
24         $post->update([
25             'content' => $request->content
26         ]);
27 
28-        return redirect()->route('posts.show', ['post' => $post->id]);
29+        return redirect()->route('posts.show', ['post' => $post->id])->with('success', '掲示板を更新しました。');
30     }
31 
32     /**
33 
34         // 所有者のみ削除可能
35         if (Auth::id() !== $post->user_id) {
36-            return redirect()->route('posts.index');
37+            return redirect()->route('posts.index')->with('error', '掲示板の削除は投稿者のみです。');
38         }
39 
40         $post->delete();
41 
42-        return redirect()->route('posts.index');
43+        return redirect()->route('posts.index')->with('success', '掲示板を削除しました。');
44     }
45 }
46

/resources/views/layout.blade.php

/resources/views/layout.blade.php
1     <title>掲示板アプリ</title>
2     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
3     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
4+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
5 </head>
6 <body>
7     <nav class="navbar navbar-expand-lg bg-primary">
8             </div>
9         </div>
10     </nav>
11+    @if (session('success'))
12+        <div class="alert alert-success alert-dismissible fade show" role="alert">
13+            <div class="text-center">
14+                {{ session('success') }}
15+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
16+            </div>
17+        </div>
18+    @endif
19+
20+    @if (session('error'))
21+        <div class="alert alert-danger alert-dismissible fade show" role="alert">
22+            <div class="text-center">
23+                {{ session('error') }}
24+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
25+            </div>
26+        </div>
27+    @endif
28+
29     <div class="container mt-4">
30         @yield('content')
31     </div>
32

コード解説

変更点: redirect時にwith()でメッセージを渡す

/app/Http/Controllers/PostController.php
1-        return redirect()->route('posts.show', ['post' => $post->id]);
2+        return redirect()->route('posts.show', ['post' => $post->id])->with('success', '掲示板が投稿されました。');
/app/Http/Controllers/PostController.php
1-            return redirect()->route('posts.index');
2+            return redirect()->route('posts.index')->with('error', '掲示板の編集は投稿者のみです。');;

コントローラーで処理を行った後、redirect()を使って別ページに移動させる際に、.with('キー', 'メッセージ')という記述を追加しています。これは「フラッシュメッセージ」をセッションに保存するための命令です。セッションとは、Webサイトがユーザーの情報を一時的に覚えておくための仕組みです。ここでのポイントは、.with()で保存されたメッセージは、次のページで一度表示されると自動的に消えるという点です。

第一引数の 'success''error' はメッセージの種類を識別するための「キー」です。第二引数が実際に画面に表示されるメッセージの文字列です。このようにキーを使い分けることで、後のビュー(画面)側で成功メッセージとエラーメッセージのデザインを切り替えることができます。

変更点: sessionヘルパーでメッセージを保存する

/app/Http/Controllers/ContactController.php
1+        // フラッシュメッセージをセッションに保存
2+        session()->flash('success', 'お問い合わせ内容が送信されました。');
3+
4         return redirect()->route('contact.complete');

こちらは、redirect().with()を繋げる方法とは別の、フラッシュメッセージの保存方法です。session()->flash('キー', 'メッセージ') という書き方でも、同じように一度だけ表示されるメッセージをセッションに保存できます。

この方法は redirect() の行とは独立して記述できるため、処理の流れの中でメッセージを保存するタイミングをより明確にしたい場合に便利です。.with()メソッドと機能的な違いはなく、どちらを使っても結果は同じなので、書き方の好みで選んで問題ありません。

変更点: BootstrapのJavaScriptを読み込む

/resources/views/layout.blade.php
1     <title>掲示板アプリ</title>
2     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
3     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
4+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
5 </head>

ここでは、Webページのデザインを整えるBootstrapの、動きを制御するためのJavaScriptファイルを読み込んでいます。具体的には、この後で実装するフラッシュメッセージの表示エリアに「×」の閉じるボタンを設置しますが、そのボタンが正しく機能するためにこのJavaScriptファイルが必要になります。この一行を追加することで、Bootstrapが提供する様々な動的な機能(アラートを閉じる、ドロップダウンメニューを開くなど)が使えるようになります。

変更点: Bladeでセッションメッセージを表示する

/resources/views/layout.blade.php
1     </nav>
2+    @if (session('success'))
3+        <div class="alert alert-success alert-dismissible fade show" role="alert">
4+            <div class="text-center">
5+                {{ session('success') }}
6+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
7+            </div>
8+        </div>
9+    @endif
10+
11+    @if (session('error'))
12+        <div class="alert alert-danger alert-dismissible fade show" role="alert">
13+            <div class="text-center">
14+                {{ session('error') }}
15+                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
16+            </div>
17+        </div>
18+    @endif
19     <div class="container mt-4">
20         @yield('content')
21     </div>

すべてのページの共通レイアウトとなる layout.blade.php ファイルに、コントローラーで保存したフラッシュメッセージを表示するためのコードを追加しています。

@if (session('success')) は、セッションの中に 'success' というキーのメッセージが存在するかどうかをチェックする条件分岐です。もし存在すれば、@endif までの間のHTMLコードが出力されます。

{{ session('success') }} の部分で、実際に保存されていたメッセージの文字列を表示しています。{{ }} で囲むことで、安全に文字列を出力できます。

同様に @if (session('error')) のブロックも用意し、エラーメッセージが存在する場合に対応しています。alert-success(緑色)と alert-danger(赤色)というBootstrapのクラスを使い分けることで、メッセージの種類に応じて見た目を変えています。このコードを共通レイアウトに記述することで、アプリケーションのどのページからリダイレクトされても、フラッシュメッセージを同じデザインで表示できるようになります。

おわりに

おわりに 今回は、ユーザーの操作結果を一度だけ通知するフラッシュメッセージの実装方法を学びました。コントローラーでは、リダイレクト時にwith()メソッドやsession()->flash()を使い、「success」や「error」といったキーと共にメッセージをセッションへ保存しました。ビュー側では、共通レイアウトに@if (session())という記述を追加し、セッションにメッセージが存在する場合のみ画面に表示する仕組みを作りました。この2つの連携により、アプリケーションのどのページでもユーザーに分かりやすくフィードバックを返せるようになり、操作性が大きく向上します。

関連コンテンツ