トースト通知コンポーネント
このトースト通知は、画面右上に一時的なメッセージを差し込んで、操作結果をユーザーにそっと知らせるコンポーネントです。 showToast(type, msg) を呼ぶと div 要素を動的に生成し、 position:fixed の toast-wrap に積み上げます。
解説
このトースト通知は、画面右上に一時的なメッセージを差し込んで、操作結果をユーザーにそっと知らせるコンポーネントです。showToast(type, msg) を呼ぶと div 要素を動的に生成し、position:fixed の toast-wrap に積み上げます。表示は @keyframes slideIn で右からスライドし、約3秒後に slideOut で消える流れです。種類は success・error・info の3つで、それぞれ緑・赤・青の背景色を BEM 修飾子（toast--success 等）で切り替えています。
使う場面
- フォーム保存やコピー完了など「成功したこと」を画面遷移なしで伝えたいとき
- 通信エラーやバリデーション失敗を、ページを汚さず一瞬だけ知らせたいとき
- 「同期中」「送信中」などの軽い状態通知
表示時間は setTimeout の 3000 を書き換えるだけで調整できます。色は修飾子クラスの背景色を変えれば自由に統一可能です。注意点として、トーストは消えると内容が残らないため、重要な情報の唯一の表示手段にはせず、aria-live 領域を併用して読み上げに配慮すると親切です。
よくある質問
トーストの表示時間を変えるには？
JavaScript内のsetTimeoutの3000という値が表示ミリ秒です。5秒にしたいなら5000に変更します。短すぎると読み切れないため、文章量に合わせて2500から5000程度が目安です。
通知の種類を増やせますか？
増やせます。CSSにtoast--warningのような修飾子クラスを追加して背景色を決め、showToastにその種類名を渡すだけです。アイコンを変えたい場合はJS内のic-onsオブジェクトに対応するSVGを足します。