カテゴリ: Bootstrap 更新日: 2026/02/16

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

Navbar/Dropdown/CollapseのJS差分:data属性・初期化の変更点
Navbar/Dropdown/CollapseのJS差分:data属性・初期化の変更点

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

生徒

「先生、Bootstrap4で作ったナビゲーションバーをBootstrap5に移行しようとしたら、ドロップダウンやメニューが動かなくなりました。どうしてですか?」

先生

「それはBootstrap5でJavaScriptの初期化方法やdata-*属性の書き方が変わったからです。特にNavbar、Dropdown、Collapseは変更点が多いので、正しい書き換えが必要になりますよ。」

生徒

「具体的には、どこを直せばいいんでしょうか?」

先生

「それでは、Bootstrap4からBootstrap5に移行するための変更点を順番に見ていきましょう!」

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

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

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

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

???? 書き換えのルール
Bootstrap 4 (旧) Bootstrap 5 (新)
data-toggle="..." data-bs-toggle="..."
data-target="..." data-bs-target="..."
data-dismiss="..." data-bs-dismiss="..."

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


<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の書き換え例
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の書き換え例
3. Dropdownの書き換え例

ドロップダウンメニューも同様に、data-toggledata-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の初期化方法の変更
4. JavaScriptの初期化方法の変更

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


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

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

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

5. Navbarの全体例

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-toggledata-bs-toggleなど)と、JavaScript初期化の書き換えが最も重要なポイントです。ここを押さえれば、Navbar、Dropdown、Collapseは問題なく動作します。

まとめ

まとめ
まとめ

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

Bootstrap4では、jQueryをベースとした初期化とdata-toggledata-targetなどの属性を使って動作を制御していました。しかしBootstrap5では、jQueryへの依存を完全に廃止し、純粋なJavaScriptクラスを使用して初期化するスタイルに切り替わりました。また、data-toggledata-targetといった属性はすべてdata-bs-toggledata-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の仕様変更に柔軟に対応できるよう、本記事の内容を繰り返し確認しておくとよいでしょう。

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

生徒

「Bootstrap4とBootstrap5の違いがよくわかりました!特にdata属性が変わっていたのが原因だったんですね。」

先生

「そのとおりです。data-bs-toggleやdata-bs-targetなど、Bootstrap5特有の書き方に書き換えることが大切です。」

生徒

「あと、jQueryを使わずにJavaScriptで初期化する方法も学べてよかったです!」

先生

「今後の開発では、Bootstrap5の標準に従ってシンプルなJavaScriptで書くのが主流になります。しっかり使いこなしてくださいね!」

2026年最新 スキルアップ・実践セミナー

【60分集中】CSSを1行も書かない!?Bootstrap 5ユーティリティクラス活用で開発工数を50%削減

「スピード」が武器になる。Bootstrap 5で商用クオリティのWebサイトを高速構築。

本講座では、世界シェアNo.1のフレームワークBootstrap 5を使いこなし、ゼロからレスポンシブサイトを組み上げる「現場最速のワークフロー」を学びます。単なる導入に留まらず、ユーティリティクラスを活用した効率化と、実務で必須となるカスタマイズ技法を60分で完全習得します。

具体的なワークショップ内容と環境

【つくるもの】
モダンなランディングページ(LP)やダッシュボードのプロトタイプを作成します。ナビゲーション、ヒーローセクション、カードレイアウト、フッターなど、Bootstrapのコンポーネントを組み合わせて「一瞬で形にする」感動を体験してください。

【開発環境】
VS CodeにBootstrap 5専用のSnippet(補完機能)を導入し、手入力を最小限にする環境を構築。最新のCDN利用法や、表示速度(Core Web Vitals)を意識した最適な読み込み設定など、プロの初期設定を伝授します。

この60分で得られる3つの革新スキル

1. グリッドシステムの完全マスター

スマホ・タブレット・PCでレイアウトを自由自在に切り替える「ブレイクポイント」の極意を学びます。

2. ユーティリティクラスによる爆速デザイン

CSSを1行も書かずに、マージン・パディング・カラーを制御。開発工数を半分以下にする実戦術を習得します。

3. 脱・標準デザインのカスタマイズ

「Bootstrap感」を消し、独自のブランドイメージに合わせるための、上書きの作法とデザインの整え方を伝授します。

※本講座は、HTML/CSSの基本を理解した方向けの「実践加速講座」です。制作会社のコーダーや副業フリーランスとして「案件の回転率」を上げ、市場価値を最大化させたい方をモクモクがバックアップします。

【60分集中】CSSを1行も書かない!?Bootstrap 5ユーティリティクラス活用で開発工数を50%削減

Bootstrap 5を楽しみながら、一緒に学びましょう!

各回少人数・マンツーマン形式で徹底サポート

このセミナーの詳細・お申し込みはこちら
カテゴリの一覧へ
新着記事
New1
CSS
CSSのcolumn-countを完全ガイド!初心者でもわかる複数列レイアウトの作り方
New2
CSS
CSSのz-indexとposition完全ガイド!初心者でもわかる要素を重ねる方法
New3
Bootstrap
Bootstrapオフキャンバス入門:.offcanvasと.offcanvas-start・end・top・bottomの基本をやさしく解説
New4
CSS
CSSのoverflowプロパティ完全ガイド!初心者でもわかるvisible・hidden・scroll・autoの違い
人気記事
No.1
Java&Spring記事人気No1
CSS
CSSで文字の間隔を調整する方法!初心者でもわかるletter-spacingとword-spacingの使い方
No.2
Java&Spring記事人気No2
CSS
CSSで要素のサイズを自動調整!autoとfit-contentの使い方
No.3
Java&Spring記事人気No3
CSS
CSSのmarginとpaddingの違いとは?初心者でもわかるボックス間のスペース調整の基本
No.4
Java&Spring記事人気No4
Bootstrap
Bootstrap Iconsのライセンスと商用利用の注意点【著作権と表記を初心者向けに解説】
No.5
Java&Spring記事人気No5
CSS
CSSのoverflowプロパティ完全ガイド!初心者でもわかるvisible・hidden・scroll・autoの違い
No.6
Java&Spring記事人気No6
CSS
CSSの文字色と背景色をやさしく解説!初心者でもわかる基本の設定方法
No.7
Java&Spring記事人気No7
HTML
HTMLのliタグとは?初心者でもわかるul・ol内での正しい役割を完全解説
No.8
Java&Spring記事人気No8
CSS
CSSの状態によるセレクタ完全ガイド!初心者でもわかる:checkedと:disabledの使い方