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の初期化方法の変更（jQuery脱却とVanilla JSへの移行）

4. JavaScriptの初期化方法の変更（jQuery脱却とVanilla JSへの移行）

Bootstrap 5における最も大きな進化の一つが、jQueryへの依存が完全に廃止されたことです。以前のBootstrap 4までは、動きを作るために必ずjQueryという別のライブラリを読み込む必要がありました。

Bootstrap 5からは、ブラウザが標準で持っているJavaScript（バニラJS）だけで動作します。これにより、Webサイトの読み込み速度が向上し、SEOの観点からも非常に有利になりました。プログラミング未経験者の方は、「余計なツールを使わずに、シンプルに動かせるようになった」と考えると分かりやすいでしょう。

具体的に、ドロップダウンメニューを動かすための「初期化」コードを比較してみましょう。以前は「$（ドル記号）」を使った独特な書き方でしたが、現在は直感的な記述に変わっています。

<script>
$(document).ready(function() {
    $('#exampleDropdown').dropdown();
});
</script>

<script>
// 1. 動かしたい要素（ボタンなど）をHTMLの中から探す
var dropdownElement = document.getElementById('exampleDropdown');

// 2. Bootstrapの機能（Dropdown）を適用して初期化する
var dropdown = new bootstrap.Dropdown(dropdownElement);
</script>

この新しい書き方のメリットは、特定の要素を狙い撃ちして制御しやすくなった点です。例えば、ボタンをクリックした時に動きをつけたい場合、下記のような構成になります。

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="demoDropdown" data-bs-toggle="dropdown">
        ここをクリック
    </button>
    <ul class="dropdown-menu">
        <li><a class="dropdown-item" href="#">メニュー1</a></li>
        <li><a class="dropdown-item" href="#">メニュー2</a></li>
    </ul>
</div>

<script>
// IDを指定して要素を取得
var el = document.getElementById('demoDropdown');
// Bootstrapのドロップダウンとして動くように設定
var myDropdown = new bootstrap.Dropdown(el);
</script>

このように、bootstrap.Dropdownやbootstrap.Collapseといった「クラス」を呼び出す形式になりました。最初は少し文字数が多く感じるかもしれませんが、この「どの要素に対して何をするか」を明確に書くスタイルは、現代のWeb制作における標準的な作法です。jQueryの知識がなくても、公式ドキュメントのサンプルをコピー＆ペーストするだけで簡単に動きを実装できるのが魅力です。

5. Bootstrap4から5へのNavbar移行・完全ガイド

5. Bootstrap4から5へのNavbar移行・完全ガイド

Bootstrap4からBootstrap5へのアップデートにおいて、Navbar（ナビゲーションバー）は最も修正が必要なパーツの一つです。 プログラミング初心者の方でも迷わないよう、具体的な変更点と、そのままコピペして使える比較用サンプルを解説します。

Bootstrap4と5の主な違い

大きな変更点は2つです。 1つ目は、JavaScriptを動かすための属性名に「bs」が付いたこと（例：data-toggle → data-bs-toggle）。 2つ目は、余白の指定（Margin）が左（Left）/右（Right）から、開始（Start）/終了（End）という表記に変わったことです。 これにより、右寄せにしていたmr-autoは、Bootstrap5ではme-auto（Margin End Auto）と記述します。

【比較用】Bootstrap4の記述例

<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="#navMenu4">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navMenu4">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active"><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の記述例（推奨）

Bootstrap5では、Dropdown（ドロップダウン）内のリンクを<li>タグで囲むことが推奨されるなど、より正確なHTML構造になっています。

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">ブランド名</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navMenu5">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navMenu5">
      <ul class="navbar-nav me-auto mb-2 mb-lg-0">
        <li class="nav-item"><a class="nav-link active" 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>
  </div>
</nav>

まとめると、Bootstrap5への移行は「data-bs-属性」への書き換えと、左右の指定（s/e）の変更が肝心です。 特にNavbarはスマホ表示時のハンバーガーメニューなど、JavaScriptが絡む部分が多いため、この「bs」の付け忘れに注意するだけで、表示崩れや動作不良の多くを解消できます。

まとめ

まとめ

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の仕様変更に柔軟に対応できるよう、本記事の内容を繰り返し確認しておくとよいでしょう。