(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();
  });
});

ここでは何をしている?

  1. ページが読み込まれたら処理を開始
  2. ボタン要素とトースト要素を取得
  3. BootstrapのToastクラスを使ってトーストを作成
  4. ボタンクリックで.show() → トーストが表示!

bootstrap.Toastって何?

Bootstrap 5では、JavaScriptのAPIとしてクラスが提供されており、new bootstrap.Toast(...)のようにしてインスタンスを作ります。

これは、「Toastを操作するリモコン」のようなものです。.show()を押すと、ビューンとトーストが現れます!


実行してみよう!

もし手元にHTMLを試せる環境があれば、ぜひ実際に表示させてみてください。

  1. コードをHTMLファイルに保存
  2. ブラウザで開く
  3. 「トーストを表示」ボタンを押す

すると、画面右下に通知がポンっと出てきますよ。


トースト通知のメリットとデメリット

メリットデメリット
ユーザー体験が向上する見逃される可能性がある
軽量でページを邪魔しない表示位置によっては邪魔になる
実装が簡単(Bootstrapならなおさら)過度に使うと逆効果になる

ちょうど良いタイミングと頻度で使うことが大切です。


まとめと今後の学習ステップ

今回は、「トースト通知ってなに?」から「Bootstrapでどう実装するのか」まで、初心者の方でも理解できるように解説しました。

今後は以下のような学習を進めてみるとさらに理解が深まります!

  • Toastのオプション(例:autohide, delay, animation)を色々試してみよう
  • Bootstrapの他のコンポーネント(モーダルやツールチップ)も使ってみよう
  • jQueryやReactでトーストを操作する方法も学んでみよう

わからないことがあったら、どんどん調べて試してみてくださいね。学びは「試行錯誤」の中にあります!

最後までお読みいただきありがとうございます。