bootstrap5 ドロップダウンが機能するまで

#はじめに
railsチュートリアルをローカル環境で、2021年11月現在で最新のgemを使って進めています。
ヘッダーのドロップダウン機能を同じように実装してもうまくいかなかったので色々調べて機能するまでを備忘録としてまとめました。

#筆者の環境
Macbook Air(M1, 2020)
macOS Big Sur バージョン11.4

ruby 3.0.2p107 (2021-07-07 revision 0db68f0233) [arm64-darwin20]
Rails 6.1.4.1
bootstrap 5.1.0

#ドロップダウンリンクをクリックしても表示されなかった
railsチュートリアルで使用されているbootstrap３と2021年11月現在で最新のbootstrap5では変更になったクラスが多いのでBootstrap5公式とチートシートを参考にしながら似たような見た目になるように実装しています。

8.2.3 レイアウトリンクを変更する　にてドロップダウンを実装するところで、チートシートをコピーして貼り付けて、リンクなどを変えてうまくいったかみたときに、ドロップダウンのリンク（ここではAccount）をクリックしても表示されてほしい、Settings, Profile, Logoutのリンクが表示されませんでした。

#原因
ドロップダウンはCSSだけでなくJavaScriptも使用されているため、JavaScriptも読み込まなければいけないそうです。

ドロップダウンは、トグル可能で、リンクのリストなどを表示するためのコンテキストオーバーレイです。これらは、含まれているBootstrapのドロップダウンJavaScriptプラグインでインタラクティブになります。

引用：　Bootstrap5 dropdown

#解決法

多くのコンポーネントでは、機能するためにJavaScriptの使用を必要がある。具体的には、独自のJavaScriptプラグインとPopperが必要。次のいずれかの <script> をページの最後の方にある </body> 終了タグの直前に配置して、ページを有効にする。

引用：　Bootstrap5設置ガイド

application.html.erb

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

上記をapplication.html.erbに記述したらドロップダウンが機能しました！

#参考