先生と生徒の会話形式で理解しよう

生徒

「Bootstrapでモーダルとかツールチップって簡単に使えるんですか？」

先生

「はい、Bootstrapでは簡単にモーダルやトースト、ツールチップが使えます。でも、JavaScriptの初期化が必要な場合もあるんですよ。」

生徒

「初期化ってなんですか？」

先生

「初期化とは、JavaScriptでそれらの機能を使えるように“スイッチを入れる”作業です。今日は初心者向けに、モーダル・トースト・ツールチップがすぐに使えるスターターテンプレートを紹介します！」

1. モーダル・トースト・ツールチップとは何か

モーダル（Modal）は、画面の上にポップアップのようなウィンドウを表示する機能です。ユーザーに重要なお知らせや入力フォームを表示するのに使います。

トースト（Toast）は、画面の隅にふわっと表示されて、数秒後に自動で消えるお知らせメッセージです。保存完了やエラー通知に使われます。

ツールチップ（Tooltip）は、ボタンやリンクなどにマウスを乗せたときに小さな吹き出しが表示される機能です。補足説明に便利です。

2. Bootstrapで使うために必要な初期化とは？

Bootstrapでは、HTMLにクラスを追加するだけで動く機能もありますが、モーダルやトースト、ツールチップなど一部の機能はJavaScriptで「初期化」する必要があります。

この初期化は、ページを読み込んだときに自動で設定するようにすると便利です。

3. モーダル・トースト・ツールチップが使えるスターターテンプレート

ここでは、モーダル・トースト・ツールチップをすぐに使えるHTMLスターターパックを紹介します。初心者でもコピーして使える内容になっています。


<!-- ボタン：モーダルを開く -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#sampleModal">
  モーダルを開く
</button>

<!-- モーダル本体 -->
<div class="modal fade" id="sampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">モーダルのタイトル</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        モーダルの中身です。
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

<!-- トーストボタン -->
<button class="btn btn-success" id="showToast">トーストを表示</button>

<!-- トースト本体 -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <strong class="me-auto">通知</strong>
      <small>たった今</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body">
      トーストが表示されました。
    </div>
  </div>
</div>

<!-- ツールチップ付きボタン -->
<button type="button" class="btn btn-warning" data-bs-toggle="tooltip" title="これはツールチップです！">
  ツールチップ付きボタン
</button>

<!-- 初期化スクリプト -->
<script>
  // ツールチップの初期化
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
    new bootstrap.Tooltip(el)
  })

  // トーストの初期化
  const toastTrigger = document.getElementById('showToast')
  const toastLive = document.getElementById('myToast')
  if (toastTrigger) {
    toastTrigger.addEventListener('click', () => {
      const toast = new bootstrap.Toast(toastLive)
      toast.show()
    })
  }
</script>

ブラウザ表示

4. 初心者がつまずきやすいポイント

モーダル・トースト・ツールチップは見た目は簡単でも、初期化処理が必要な場合があります。HTMLだけ書いて動かないときは、JavaScriptでの設定を忘れていないか確認しましょう。

特にツールチップは、ただHTMLに書いただけでは表示されません。必ず初期化が必要です。

5. CDN版のBootstrapならそのまま使える

このスターターテンプレートは、CDN（インターネット上の読み込みリンク）を使ったBootstrapに対応しています。自分でファイルをダウンロードして読み込む必要はありません。

初心者の方は、CDN版のBootstrapを使って開発するのが簡単でおすすめです。

6. すべてをひとつにまとめたスターターパック例

モーダル・トースト・ツールチップがすべて揃ったページを、テンプレートとして保存しておくと便利です。今後の練習にも活用できます。

ボタンを押すだけで各機能が試せるように設計されているので、初心者の方も安心して試せます。

7. 忘れずに入れるべきスクリプトとは？

Bootstrapのモーダルやトースト、ツールチップを動かすには、bootstrap.bundle.jsを読み込む必要があります。これはJavaScriptのファイルで、ポップアップなどの動作を司る“脳みそ”のような役割です。

これを忘れると、モーダルをクリックしても開かなかったり、トーストが表示されなかったりするので注意しましょう。

8. Bootstrapスターターパックの使い方まとめ

モーダル・トースト・ツールチップは、初心者でも見栄えの良いUI（ユーザーインターフェース）を簡単に作ることができる機能です。

それぞれの初期化方法や配置の仕方を理解しておくと、Bootstrapの開発がぐっと楽になります。

このスターターパックを元に、少しずつ自分なりのカスタマイズを加えてみましょう！

まとめ

今回の記事では、Bootstrapを使ってモーダル・トースト・ツールチップをページに組み込む方法を学びました。これらの機能はユーザー操作を支援し、画面に自然な動きをつけるためにとても役立つものです。モーダルは重要な情報や操作をまとめて見せる場面で活躍し、トーストは通知を軽やかに届けるために便利で、ツールチップはボタンやアイコンに補足説明を添えることで操作性を向上させてくれます。

これらの機能はすべてBootstrapのCSSだけでは動作せず、JavaScriptによる初期化が必要です。とくにツールチップとトーストは、対象要素を正しく取得したうえでBootstrapのコンストラクタを呼び出すことで初めて表示されます。この仕組みを理解することで、クリックやホバーといったユーザー操作に応じて柔軟な動きを実現できるようになります。

記事内で紹介したスターターコードは、そのままコピーして使えるように構成されており、初学者でもスムーズに動作を確認できる設計になっています。ここではその応用として、元のコードと同じIDや変数名を維持しながら、色やクラス名を変えてデザインだけをアレンジした別バージョンを紹介します。動作は元のコードとまったく同じため、デザインを変えて試したい場合にとても便利です。

別デザイン版サンプルコード


<!-- ボタン：モーダルを開く（色・雰囲気変更） -->
<button type="button" class="btn btn-outline-primary fw-bold mt-3" data-bs-toggle="modal" data-bs-target="#sampleModal">
  モーダルを開く（カスタム）
</button>

<!-- モーダル本体（デザイン変更） -->
<div class="modal fade" id="sampleModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border border-primary shadow">
      <div class="modal-header bg-primary text-white">
        <h5 class="modal-title">カスタムデザインモーダル</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        デザインのみ変更したモーダルの中身です。
      </div>
      <div class="modal-footer bg-light">
        <button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">閉じる</button>
      </div>
    </div>
  </div>
</div>

<!-- トーストボタン（色変更） -->
<button class="btn btn-outline-success mt-3 fw-bold" id="showToast">
  トーストを表示（カスタム）
</button>

<!-- トースト本体（デザイン変更） -->
<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div class="toast" id="myToast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header bg-success text-white">
      <strong class="me-auto">通知</strong>
      <small>たった今</small>
      <button type="button" class="btn-close btn-close-white" data-bs-dismiss="toast"></button>
    </div>
    <div class="toast-body border border-success">
      カスタムデザインのトースト表示です。
    </div>
  </div>
</div>

<!-- ツールチップ付きボタン（色変更） -->
<button type="button" class="btn btn-outline-warning mt-3"
  data-bs-toggle="tooltip" title="カスタム版ツールチップです！">
  ツールチップ（カスタム）
</button>

<!-- 初期化スクリプト（変数・内容は変更しない） -->
<script>
  document.querySelectorAll('[data-bs-toggle="tooltip"]').forEach(function (el) {
    new bootstrap.Tooltip(el)
  })

  const toastTrigger = document.getElementById('showToast')
  const toastLive = document.getElementById('myToast')
  if (toastTrigger) {
    toastTrigger.addEventListener('click', () => {
      const toast = new bootstrap.Toast(toastLive)
      toast.show()
    })
  }
</script>

ブラウザ表示

先生と生徒の振り返り会話

先生

「モーダルやトースト、ツールチップがどのように動くか理解できましたか？」

生徒

「はい！Bootstrapの初期化がどう働いているのか分かりやすかったです。デザインだけ変えても動作は維持できるんですね！」

先生

「その通りです。IDや変数を変えずにクラスだけ調整すると、見た目だけを自由に変えることができます。」

生徒

「次はテーマカラーに合わせてもっとアレンジしてみます！」