【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.php1 // メールの送信(ユーザー) 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.php1 '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.php1 <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.php1- return redirect()->route('posts.show', ['post' => $post->id]); 2+ return redirect()->route('posts.show', ['post' => $post->id])->with('success', '掲示板が投稿されました。');
/app/Http/Controllers/PostController.php1- return redirect()->route('posts.index'); 2+ return redirect()->route('posts.index')->with('error', '掲示板の編集は投稿者のみです。');;
コントローラーで処理を行った後、redirect()を使って別ページに移動させる際に、.with('キー', 'メッセージ')という記述を追加しています。これは「フラッシュメッセージ」をセッションに保存するための命令です。セッションとは、Webサイトがユーザーの情報を一時的に覚えておくための仕組みです。ここでのポイントは、.with()で保存されたメッセージは、次のページで一度表示されると自動的に消えるという点です。
第一引数の 'success' や 'error' はメッセージの種類を識別するための「キー」です。第二引数が実際に画面に表示されるメッセージの文字列です。このようにキーを使い分けることで、後のビュー(画面)側で成功メッセージとエラーメッセージのデザインを切り替えることができます。
変更点: sessionヘルパーでメッセージを保存する
/app/Http/Controllers/ContactController.php1+ // フラッシュメッセージをセッションに保存 2+ session()->flash('success', 'お問い合わせ内容が送信されました。'); 3+ 4 return redirect()->route('contact.complete');
こちらは、redirect()に.with()を繋げる方法とは別の、フラッシュメッセージの保存方法です。session()->flash('キー', 'メッセージ') という書き方でも、同じように一度だけ表示されるメッセージをセッションに保存できます。
この方法は redirect() の行とは独立して記述できるため、処理の流れの中でメッセージを保存するタイミングをより明確にしたい場合に便利です。.with()メソッドと機能的な違いはなく、どちらを使っても結果は同じなので、書き方の好みで選んで問題ありません。
変更点: BootstrapのJavaScriptを読み込む
/resources/views/layout.blade.php1 <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.php1 </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つの連携により、アプリケーションのどのページでもユーザーに分かりやすくフィードバックを返せるようになり、操作性が大きく向上します。