Bootstrap Navbar・Dropdown・CollapseのJS差分を徹底解説！data属性と初期化方法の変更点
生徒
「先生、Bootstrap4で作ったナビゲーションバーをBootstrap5に移行しようとしたら、ドロップダウンやメニューが動かなくなりました。どうしてですか？」
先生
「それはBootstrap5でJavaScriptの初期化方法やdata-*属性の書き方が変わったからです。特にNavbar、Dropdown、Collapseは変更点が多いので、正しい書き換えが必要になりますよ。」
生徒
「具体的には、どこを直せばいいんでしょうか？」
先生
「それでは、Bootstrap4からBootstrap5に移行するための変更点を順番に見ていきましょう！」
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の書き換え例
ナビゲーションバーを折りたたむ「ハンバーガーメニュー」では、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の書き換え例
ドロップダウンメニューも同様に、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の初期化方法の変更
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の全体例
最後に、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は問題なく動作します。
