(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でトーストを操作する方法も学んでみよう
わからないことがあったら、どんどん調べて試してみてくださいね。学びは「試行錯誤」の中にあります!