スナックバー通知
スナックバーは、操作の結果を画面下部に短く表示してすぐ消える通知パターンです。このサンプルでは showSnack 関数がメッセージとタイプ（情報・成功・エラー）を受け取り、固定配置した要素にテキストと色分けクラスを当てて表示します。
解説
スナックバーは、操作の結果を画面下部に短く表示してすぐ消える通知パターンです。このサンプルでは showSnack 関数がメッセージとタイプ（情報・成功・エラー）を受け取り、固定配置した要素にテキストと色分けクラスを当てて表示します。is-visible クラスで下からスライドインし、3秒後に setTimeout で自動的に消えます。連続でボタンを押しても、前のタイマーを clearTimeout で打ち消すため重ならず安定します。aria-live を備え、内容の更新がスクリーンリーダーに伝わります。
使う場面
- フォーム送信後の「送信しました」などの完了通知
- コピー・保存・削除といった操作のフィードバック
- 軽微なエラーや警告の一時的な提示
表示時間は setTimeout の 3000（ミリ秒）を変えるだけで調整できます。色は snackbar--success などのクラスごとの background で変更可能です。重要な確認やユーザーの操作を必須とするメッセージには、自動で消えるスナックバーは不向きで、ダイアログを使うべきです。表示位置は bottom や left の値で自由に動かせます。
よくある質問
表示が消えるまでの時間を変えられますか？
JavaScriptのsetTimeoutに指定した3000という数値がミリ秒単位の表示時間です。たとえば5000にすれば5秒間表示されます。長すぎると邪魔になるため、2秒から4秒程度が読みやすい目安です。
成功とエラーで色を分けたいのですが？
このサンプルはすでに情報・成功・エラーの3タイプに対応しており、それぞれsnackbar--info、snackbar--success、snackbar--errorのクラスで背景色を切り替えています。色はCSSのbackgroundで自由に変更できます。