(Sample)
Webアプリを使っていて「右下にちょっとした通知が出るやつ、どうやって作ってるの？」と思ったことはありませんか？
それ、実は 「トースト通知」 と呼ばれるものなんです。今回は、初心者エンジニアでも理解できるように、Bootstrapという便利なCSSフレームワークを使って、トースト通知を作る方法をわかりやすく解説します！
トースト通知って何？
「トースト」って、パンのこと…？
はい、名前の由来はまさに「トースト（パン）」なんです。ポップアップ通知が焼きたてのトーストのように、ひょこっと出てきてすぐに消える様子から、そう呼ばれています。
どんなときに使うの？
例えばこんな場面でよく使われます：
- フォームを送信したあと「送信完了」のお知らせ
- メールを受信したときの通知
- エラーが起きたときの簡易アラート
ユーザーの操作に対して「今こうなってますよ〜」と軽く伝えるための手段です。
まずはコード全体を見てみよう
冒頭で紹介されたHTMLコードは、Bootstrapを使ってトースト通知を表示するサンプルです。大きく分けて、次の4つの要素で構成されています。
| 構成要素 | 内容 |
|---|---|
<head>部分 | BootstrapとFont Awesomeの読み込み |
<button> | ユーザーがクリックするボタン |
.toast要素 | 表示される通知本体 |
<script> | トーストを表示するためのJavaScript |
各パートを丁寧に見ていこう
HTMLの<head>部分
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
これはBootstrapのCSSを読み込んでいます。これがあることで、ボタンやトーストにBootstrapのスタイルが適用されます。
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
これはFont Awesome（フォント・オーサム）。通知の中のアイコン（✉️）を表示するためのライブラリです。
トースト本体の構造
<div class="toast" id="toast" ...>
<div class="toast-header">
<i class="fas fa-envelope me-2"></i>
<strong class="me-auto">通知</strong>
<small>今</small>
<button ... class="btn-close"></button>
</div>
<div class="toast-body">
これはトースト通知のメッセージです。10秒後に消えます。
</div>
</div>
ポイント解説：
class="toast"：トースト通知として動作させるためのBootstrapのクラス。data-bs-autohide="true"：自動で非表示にする設定。data-bs-delay="10000"：非表示になるまでの時間（ミリ秒）。ここでは10秒（=10000ms）。
JavaScriptで表示させる
document.addEventListener("DOMContentLoaded", () => {
const showToastButton = document.querySelector("#showToastButton");
const toastElement = document.querySelector("#toast");
const toast = new bootstrap.Toast(toastElement);
showToastButton.addEventListener("click", () => {
toast.show();
});
});
ここでは何をしている？
- ページが読み込まれたら処理を開始
- ボタン要素とトースト要素を取得
- Bootstrapの
Toastクラスを使ってトーストを作成 - ボタンクリックで
.show()→ トーストが表示！
bootstrap.Toastって何？
Bootstrap 5では、JavaScriptのAPIとしてクラスが提供されており、new bootstrap.Toast(...)のようにしてインスタンスを作ります。
これは、「Toastを操作するリモコン」のようなものです。.show()を押すと、ビューンとトーストが現れます！
実行してみよう！
もし手元にHTMLを試せる環境があれば、ぜひ実際に表示させてみてください。
- コードをHTMLファイルに保存
- ブラウザで開く
- 「トーストを表示」ボタンを押す
すると、画面右下に通知がポンっと出てきますよ。
トースト通知のメリットとデメリット
| メリット | デメリット |
|---|---|
| ユーザー体験が向上する | 見逃される可能性がある |
| 軽量でページを邪魔しない | 表示位置によっては邪魔になる |
| 実装が簡単（Bootstrapならなおさら） | 過度に使うと逆効果になる |
ちょうど良いタイミングと頻度で使うことが大切です。
まとめと今後の学習ステップ
今回は、「トースト通知ってなに？」から「Bootstrapでどう実装するのか」まで、初心者の方でも理解できるように解説しました。
今後は以下のような学習を進めてみるとさらに理解が深まります！
Toastのオプション（例：autohide,delay,animation）を色々試してみよう- Bootstrapの他のコンポーネント（モーダルやツールチップ）も使ってみよう
- jQueryやReactでトーストを操作する方法も学んでみよう
わからないことがあったら、どんどん調べて試してみてくださいね。学びは「試行錯誤」の中にあります！