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

1. data属性の変更点：Bootstrap 5最大の注意点

1. data属性の変更点：Bootstrap 5最大の注意点

Bootstrap 4から5への移行で、最も多くの初心者がつまずくポイントが「data属性の名称変更」です。Bootstrap 5では、JavaScriptとの連携に使う属性名すべてに「-bs-」という文字が含まれるようになりました。

これは、他のライブラリのdata属性と混ざらないようにするための工夫ですが、これを知らずに古いコードをコピーしても「ボタンを押してもメニューが開かない」という状態になってしまいます。プログラミング未経験の方は、まず「data-の後に bs- を付ける」とだけ覚えておきましょう。

例えば、ボタンをクリックして何かを表示させる基本的な仕組み（モーダルや崩壊メニューなど）では、次のように記述をアップデートします。

<button type="button" data-toggle="collapse" data-target="#demo">
    古い書き方（反応しません）
</button>

<button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#demo">
    新しい書き方（ここをクリック！）
</button>

<div class="collapse mt-3" id="demo">
    <div class="card card-body">
        おめでとうございます！正しく「data-bs-」を使ったのでメニューが開きました。
    </div>
</div>

このように、data-bs-toggleは「何をしたいか（折りたたみを切り替える）」、data-bs-targetは「どこを動かしたいか（ID名）」を指定する役割を持っています。このルールさえ守れば、複雑なJavaScriptを書かなくてもリッチな動きを実装できます。

2. Collapse（折りたたみ機能）の書き換え例

2. Collapse（折りたたみ機能）の書き換え例

スマホ用サイトでよく見かける「三本線のハンバーガーメニュー」をクリックすると、メニューがスッと縦に広がる動き。これが「Collapse（コラップス）」という機能です。

Bootstrap 4からBootstrap 5へ移行する際、最も注意すべき点は、HTMLタグ内に記述する「カスタムデータ属性」の名称変更です。プログラミング未経験の方でも、「data-」の直後に「bs-」を入れるというルールさえ覚えれば、簡単に修正できます。

▼ Bootstrap 4：以前の書き方（data-toggleを使用）

<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">
<li class="nav-item active"><a class="nav-link" href="#">ホーム</a></li>
<li class="nav-item"><a class="nav-link" href="#">サービス紹介</a></li>
</ul>
</div>

▼ Bootstrap 5：最新の書き方（data-bs-toggleに変更）

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav p-3 bg-light">
<li class="nav-item"><a class="nav-link" href="#">ホーム</a></li>
<li class="nav-item"><a class="nav-link" href="#">サービス紹介</a></li>
<li class="nav-item"><a class="nav-link" href="#">お問い合わせ</a></li>
</ul>
</div>

3. Dropdown（ドロップダウン）の書き換え例

3. Dropdown（ドロップダウン）の書き換え例

クリックするとメニューが下に広がる「ドロップダウン」も、Bootstrap 5への移行で修正が必要な頻出ポイントです。 最大の違いは、JavaScriptを動かすための設定（データ属性）が data-toggle から data-bs-toggle へと変更されたことです。

また、Bootstrap 4ではメニュー部分（.dropdown-menu）を div タグで囲むのが一般的でしたが、Bootstrap 5からはアクセシビリティ（情報の伝わりやすさ）を考慮し、ul タグと li タグのリスト構造で記述することが推奨されています。

<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>

<ul class="list-unstyled m-0">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown5" role="button" data-bs-toggle="dropdown" aria-expanded="false">
      新メニュー
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdown5">
      <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の仕様変更に柔軟に対応できるよう、本記事の内容を繰り返し確認しておくとよいでしょう。