Bootstrapのドロップダウンが動かない場合の対処法！
この記事では、Bootstrapのdropdowns（ドロップダウン）が動かない場合の対処法をご紹介します！実装時によくある動かない原因とサンプルコードの説明もしているので、動いていないコードとの違いを確認してみましょう！
Bootstrapのドロップダウン（dropdown）が動かない
Bootstrapとは、WEBサイトやWEBアプリケーションを作成するフロントエンドWEBアプリケーションフレームワークです。
タイポグラフィ、フォーム、ボタン、ナビゲーション、その他にもたくさんのHTMLとcssを使ったコンポーネントが用意されてます。
今回は、下の画像のようなドロップダウンが動かない場合の対処法をご紹介します。
※Bootstrap4（4.5.2）を対象としていますのでご注意ください。
Bootstrapのドロップダウン（dropdown）が動かない場合の対処法
それでは、Bootstrapのdropdowns（ドロップダウン）が動かない場合の対処法について見ていきましょう！
サンプルコードもありますのぜひ参考にしてみてください。
原因1. cssが読み込めていない、またはHTML構造やclass名が間違っている
まずは、cssが読み込めていなかったり、HTML構造やclass名が間違っていないか確認しましょう。
もし、スタイルが効かない場合はこのあたりが原因である可能性が高いです。
【HTML】cssが読み込めていない、またはHTML構造やclass名が間違っている
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">下のサンプルコードは、HTML構造やclass名の一部抜粋となります。
【HTML】cssが読み込めていない、またはHTML構造やclass名が間違っている
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true"
aria-expanded="false">Primary</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</div><!-- /btn-group -->隠れているメニューの表示に関わるので、button要素に.dropdown-toggleのclass属性とdata-toggle="dropdown"の属性を付与してください。
その次の要素に.dropdown-menuをclass属性を付与します。
その他については、ボタンのスタイルによるclass属性です。
aria-haspopup属性とaria-expanded属性というのは、WAI-ARIAという、ブラウザによる支援技術です。
ユーザーのアクセシビリティを向上させるために昨今ではWEBアプリケーションだけに関わらず、大手のWEBサイトにも多く利用されています。
原因2. Javasciprtが読み込めていない
HTMLの構造も問題なく、スタイルも整っているのにボタンをクリックしてもメニューが表示されない。
そんなときは、必要なJavascriptファイルが読み込まれていない可能性があります。
下のサンプルコードが読み込まれているか確認してみましょう！
【HTML】原因2. jQueryなどの必要なJavasciprtファイルが読み込めていない
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<!-- popper.js -->
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"
integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN"
crossorigin="anonymous"></script>
<!-- bootstrap.js -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>注意点は、jQueryとbootstrapのJSファイルは読み込んでいるのに、クリックしても表示されないという例がよくあるみたいです。
実装には、popperというJSファイルも必要になりますので、読み込まれているかよく確認しましょう！
また、Javascriptの場合はプログラムを実行する流れもあるので、読込むファイルの順番にも注意してください。
それでも動かないときは・・・
プレビュー付きのサンプルコードよりコピーアンドペーストして利用しましょう。
動かなくなる原因が分からない初心者のうちは、きちんと動くソースコードから少しずつ変更するように心がけましょう！
今回は、動かない場合の対処法になるので、もっとたくさんのパターンのドロップダウンを使いたい場合は、日本語の本家リファレンスサイトもあわせて読んでみてください。
Bootstrap 5について・・・
今回はBootstrap4（4.5.2）についての説明でしたが、
現在（2021年1月26日）、すでに最新版のBootstrap 5.0.0のベータ版がリリースされています。
主な変更点としては、依存関係のあったjQueryを完全に削除し、SVGのカスタムアイコン（去年リリース済み）の追加、CSSとJavaScriptの簡素化・修正・改良、IE10のサポート終了が挙げられます。
jQueryが完全に削除されるそうなので、Javascriptのあたりに大きく変更がありそうですね！
まとめ
今回は、Bootstrapのdropdowns（ドロップダウン）が動かない場合の対処法をについてご紹介しました。
1つずつチェックしてみると意外と簡単なところに原因があったりします。
経験を積めば、どこに原因があるのか分かるようなってきますので、皆さんも頑張ってくださいね！
