Bootstrap Navbar・Dropdown・CollapseのJS差分を徹底解説！data属性と初期化方法の変更点

1. data属性の変更点

1. data属性の変更点

Bootstrap4ではdata-toggleやdata-targetといった属性を使っていました。しかし、Bootstrap5ではJavaScriptの構造が見直され、すべてのdata-*属性がdata-bs-*に統一されました。

例えば、data-toggle="collapse"はdata-bs-toggle="collapse"に、data-target="#menu"はdata-bs-target="#menu"に書き換える必要があります。

2. Collapseの書き換え例

2. Collapseの書き換え例

ナビゲーションバーを折りたたむ「ハンバーガーメニュー」では、Collapseが使われます。Bootstrap4とBootstrap5では、次のように記述が変わります。

<!-- Bootstrap4 -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
  <span class="navbar-toggler-icon"></span>
</button>

<!-- Bootstrap5 -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu">
  <span class="navbar-toggler-icon"></span>
</button>

ポイントは、すべてのdata-*にbsが追加されたことです。

3. Dropdownの書き換え例

3. Dropdownの書き換え例

ドロップダウンメニューも同様に、data-toggleがdata-bs-toggleに変更されました。

<!-- Bootstrap4 -->
<ul class="list-unstyled m-0">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      メニュー
    </a>
    <div class="dropdown-menu" aria-labelledby="navbarDropdown4">
      <a class="dropdown-item" href="#">リンク1</a>
      <a class="dropdown-item" href="#">リンク2</a>
    </div>
  </li>
</ul>

<!-- Bootstrap5 -->
<!-- Bootstrap5 -->
<ul class="list-unstyled m-0">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      メニュー
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
      <li><a class="dropdown-item" href="#">リンク1</a></li>
      <li><a class="dropdown-item" href="#">リンク2</a></li>
    </ul>
  </li>
</ul>

クラス名はそのまま使えますが、トリガーとなる属性が変わっている点に注意しましょう。

4. JavaScriptの初期化方法の変更

4. JavaScriptの初期化方法の変更

Bootstrap4では、jQueryを使って初期化を行っていました。しかしBootstrap5では、jQuery依存が完全に廃止され、純粋なJavaScriptでの初期化が必要です。

<!-- Bootstrap4での初期化 -->
$('#navbarDropdown').dropdown();

<!-- Bootstrap5での初期化 -->
var dropdownElement = document.getElementById('navbarDropdown');
var dropdown = new bootstrap.Dropdown(dropdownElement);

このように、Bootstrap5ではbootstrap.Dropdownやbootstrap.Collapseといったクラスを使って直接初期化します。プログラミング初心者の方は「jQueryを書かなくても動くようになった」と理解すると分かりやすいでしょう。

5. Navbarの全体例

5. Navbarの全体例

最後に、Navbar全体の例を示します。Bootstrap4からBootstrap5へ移行するときに、どの部分を書き換えるべきかを比較できます。

<!-- Bootstrap4のNavbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item"><a class="nav-link" href="#">ホーム</a></li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">メニュー</a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#">リンク1</a>
          <a class="dropdown-item" href="#">リンク2</a>
        </div>
      </li>
    </ul>
  </div>
</nav>

<!-- Bootstrap5のNavbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">ブランド</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarMenu">
    <ul class="navbar-nav me-auto">
      <li class="nav-item"><a class="nav-link" href="#">ホーム</a></li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">メニュー</a>
        <ul class="dropdown-menu">
          <li><a class="dropdown-item" href="#">リンク1</a></li>
          <li><a class="dropdown-item" href="#">リンク2</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

Bootstrap4から5への移行では、属性名の変更（data-toggle→data-bs-toggleなど）と、JavaScript初期化の書き換えが最も重要なポイントです。ここを押さえれば、Navbar、Dropdown、Collapseは問題なく動作します。

まとめ

まとめ

Bootstrapのバージョンアップにより、Bootstrap4とBootstrap5ではHTMLの構造やJavaScriptの扱い方にいくつかの重要な変更がありました。特にナビゲーションバー（Navbar）、ドロップダウンメニュー（Dropdown）、折りたたみメニュー（Collapse）といったUIコンポーネントは、見た目は似ていても、内部で利用する属性や初期化処理が大きく変わっています。

Bootstrap4では、jQueryをベースとした初期化とdata-toggleやdata-targetなどの属性を使って動作を制御していました。しかしBootstrap5では、jQueryへの依存を完全に廃止し、純粋なJavaScriptクラスを使用して初期化するスタイルに切り替わりました。また、data-toggleやdata-targetといった属性はすべてdata-bs-toggleやdata-bs-targetに置き換えられています。

このような仕様変更により、Bootstrap4で作られたHTMLをBootstrap5でそのまま使うと、ドロップダウンが動かない、メニューが展開されないなどの不具合が発生することがあります。これはJavaScriptの初期化方法や属性の名称が一致していないためです。正しい属性に書き換え、必要に応じてJavaScriptコードを見直すことで、正常に動作させることができます。

実際の開発では、既存のコードをメンテナンスする場面が多く、Bootstrapのバージョンアップに伴う修正作業は避けて通れません。特にフロントエンドのUIを安定して保つためには、data属性や初期化コードの変更を正しく理解し、迅速に対応できることが重要です。

以下はBootstrap5対応のNavbarサンプルです。CollapseやDropdownが正常に機能するよう、正しいdata-bs-*属性とJavaScript初期化の方法が反映されています。

<nav class="navbar navbar-expand-lg navbar-dark bg-dark p-3">
  <a class="navbar-brand" href="#">ロゴ</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarContent">
    <ul class="navbar-nav me-auto">
      <li class="nav-item">
        <a class="nav-link active" href="#">ホーム</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          メニュー
        </a>
        <ul class="dropdown-menu" aria-labelledby="navDropdown">
          <li><a class="dropdown-item" href="#">リンク1</a></li>
          <li><a class="dropdown-item" href="#">リンク2</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

また、Bootstrap5でJavaScriptを明示的に初期化する必要がある場合には、以下のように記述します。

<script>
  const dropdownElement = document.getElementById('navDropdown');
  const dropdown = new bootstrap.Dropdown(dropdownElement);
</script>

このように、Bootstrap5ではJavaScriptとHTMLの設計が明確に分離され、よりモダンで安定したUI開発が可能になっています。Bootstrap4から5へ移行する際は、data属性と初期化コードの両方を確認し、適切に対応することが求められます。

今後のプロジェクトやメンテナンス作業において、Bootstrapの仕様変更に柔軟に対応できるよう、本記事の内容を繰り返し確認しておくとよいでしょう。