はじめに🐯
※ここに記すことは、個人の試行錯誤体験記です。記載する情報が必ずしも正しいとは限りません。投稿時点での個人の最適解です。また、間違った認識も多くあると思います。その時は、優しく指摘いただけますと幸いです。
こんな方にオススメです🙆♂️
- 駆けだし始めた初学者
- フラッシュメッセージってなんだっけ？
- ChatGPT使ったけどいまいちわかんない
なぜ、実装したのか🛠
- 現役エンジニアのメンターサービス受講中。そこのカリキュラムである、チーム開発の担当タスクのため
フラッシュメッセージについて💡
そもそも、フラッシュメッセージを知らなかったのでメンターに質問したがはっきりと認識できなかったので、調べて理解度を高めました。
個人的なサマリー💁♂️
- ウェブアプリケーションにおいてユーザーが行った特定のアクションの結果に関する一時的な通知(フォームの送信やデータの更新など)
- 通常、次のページの読み込み時に一度だけ表示され、その後自動的に消えるように設計されている
- UXを向上させるための重要なツール
特徴🚥
一時性
フラッシュメッセージは通常、HTTPリクエストでのみ表示され、その後はセッションから自動的に削除されます。これにより、情報の一過性が保たれ、ユーザーがページを更新したときに古いメッセージが再表示されない。
フィードバックの提供
ユーザーが何らかのアクションを行った際に即時的なフィードバックを提供することで、アプリケーションの使いやすさを向上させます。例えば、フォームが正しく送信されたことや、エラーが発生したことを知らせるメッセージがこれに該当します。
視覚的な注意喚起
フラッシュメッセージは通常、色やアイコンを用いて、成功、警告、エラー、情報といった異なる種類の通知を視覚的に区別します。
実装の流れ🛶（おおまかです）
1. Controllerにロジックを記述
public function update(PostRequest $request, $id)
{
$post = Post::findOrFail($id);
$post->content = $request->content;
$post->save();
//withメソッドを使用して投稿編集フラッシュメッセージを記述
return redirect()->route('posts.index')->with('greenMessage','更新が成功しました。');
}
2. Viewに表示させる記述
@if (session('redMessage'))<!-- ユーザー退会後のフラッシュメッセージの実装 -->
<div class="alert alert-danger text-center mx-auto w-75 mb-3">
{{ session('redMessage') }}
</div>
@elseif (session('greenMessage'))<!-- 投稿編集後のフラッシュメッセージの実装 -->
<div class="alert alert-success text-center mx-auto w-75 mb-3">
{{ session('greenMessage') }}
</div>
@endif
困ったこと🤷♂️
想定外のスタイリングカラーの表示
Bootstrapを採用していたのでChtaGPTのGrimoireに尋ねました。（嘘ついてる可能性もあるので気をつける必要あり）
Bootstrapのアラートカラークラス（Grimoire が生成の文言）
Bootstrapには、様々なタイプのアラートを表示するためのスタイルが用意されています。これらのスタイルは、色を用いてメッセージの種類（成功、警告、エラー、情報など）を視覚的に区別します。以下は、Bootstrapでよく使用されるアラートの色に関連するクラスがあります。
ここまでが、テクノロジーの叡智の情報です。
その上で、ググっていきましたが、結局は公式が一番正しい情報ですね！
ということで、Bootstrap公式もリサーチしました。
Bootstrap official
解決策🧞♂️
- メンターにレビューしてもらう
なんだかんだで、一番しっくりきて、腹落ちしました。 - テクノロジーの叡智を活用（ChatGPT4）
ハルネーションに気をつける（嘘つくことです） - 過去の叡智を活用（Qiita）
ロジックを知るのに役立ちました。
大事なこと🎯
- しっかりとロジックを考えてから手を動かす
- リサーチ時間は決めよう
- ダメなら、メンターを活用だ！
- ChatGPTは嘘をつくことがほとんどなので、聞き方が大事
最後に📚
初めての投稿で、どう書くとわかりやすいのかな？と自問自答しなら書きました。
少しでも、何かの役に立てたのなら嬉しいです。
そして、同じような志の方と少しでも共感できたらさらに嬉しいです！
最後まで読んでありがとうございます！