（自分用メモ）詳細 スクール課題２ Airbnbのクローン作成 Bootstrapの導入後のドロップダウンメニューが機能しない
＜結論＞
BootstrapのGemは入っていたが、適応されてなかった。適応して、DPメニュを書いて機能
→Gemとかによくありがちだけど、インストールするだけでは機能しない。
インストールして、適応させるとこまで行って初めて使える。使える状態まで必ず持っていくこと
例）docker立ち上げと中に入るが別コマンド
＜以下本文＞
■現状
表題の件、ドロップダウンメニュを適応させるために以下を参考に進めております。
上記記事のbootstrapとJqueryの設定完了し、HTMLコード記入しましたが、うまく機能せず。
質問するに至りました。
■実際に出ている不具合
■やりたいこと
不具合を解決し、正常にドロップダウンメニューを適応したい。
■環境
M1チップ
ventura ver13.0
rails616
ruby304
bootstrap431
■既に試したこと、参考にしたページ
質問ボックス確認させて頂きましたが、当ケースに該当するものが見つけられず、ご助力頂けますでしょうか。
■git
＜回答＞
ユーザー画像
masa(メンター)
2022/11/17 11:55
お疲れさまです！
不具合というのをもう少し詳しく説明してもらえますか？
画像だけだと不具合の内容が把握できないのですが、画像は開いた状態というわけではなくそもそもドロップダウンメニューにならないということでしょうか？
また、原因を切り分けたくそもそもbootstrapの導入はできていますか？(他の箇所だと適応できているのかどうか)
できているならこの箇所のコードなどの問題で、
できていないなら導入でなにか不具合があるということが分かりますね！
今後はrails6を使用してほしいのですがrails7を使用している場合、特有のエラーが報告されていることもあるためそれも疑って調べるようにしましょう！
ユーザー画像
長井宏樹
2022/11/17 14:21
メンターMASA様
ご連絡ありがとうございます。
意図した画像が貼れていませんでした。失礼しました。
rails6(6.1.6)を使用しております。
bootstrapの導入はできていると思っています。（以下画像package.Json参照）
不具合というのは、「ドロップダウンメニューが表示されない」ということです。説明不足で申し訳ありません。
jQuery BootstrapをGEMでインストール後、以下参考サイト内容を実行しました。
その後、Viewコード記載し、過去の質問も調べ、いくつか参考にしましたがうまくいかず、
質問させて頂いています。
参考例）https://mng-camp.potepan.com/questions/2a5dcf0e-fbc9-4da2-a751-0f9a69f0336d
GEM file
該当View
package.Json
ユーザー画像
masa(メンター)
2022/11/17 14:33
導入はできているという認識で大丈夫でしょうか？以下の部分です。
また、原因を切り分けたくて、そもそもbootstrapの導入はできていますか？(他の箇所だと適応できているのかどうか)
できているならこの箇所のコードなどが問題で、
できていないなら導入でなにか不具合があるということが分かりますね！
bootstrapの記述を参考にしたサイト、bootstrapのバージョンも調べて共有してください。
・記述例、これでどの記述をどの箇所に書いてみても反応しないなら導入ができていないので下記記事などで導入をやり直す・見直してください(参考サイトはbootstrap5です)
しっかりとできているならこの箇所の記述の問題です。(ドロップダウンメニューの箇所を見直しましょう)
・導入方法の確認
ユーザー画像
長井宏樹
2022/11/17 16:16
メンターMASA様
ご連絡有り難うございます。
頂いたリンク確認いたしました。
どうやらBootstrapが入ってなかったようです（Ver4.3.1のGEMを入れておりましたが適応されていませんでした）
頂いたリンク（https://blog.to-ko-s.com/install-bootstrap5/）を参考にBootstrap5.1.1を導入しましたが、
リンク先記載の”導入されているかの確認方法”で
<body class="bg-dark">
を挿入してみるとありますが、実施しましたが。画面黒にならず、Bootstrap5.1.1が入らない状態です。
他にも自分で以下サイトを参考に導入してみましたが、機能せず。原因がわからない状態です。
（rails6にbootstrap5を入れるの項目）
ユーザー画像
長井宏樹
2022/11/17 16:53
PC再起動の後、もう一度確認してみましたら、背景黒になっており、Bootstrap5.1.1が適応されておりました。
ただ、ドロップダウンは機能していませんでした。
現在、頂いたサイト参考にViewの書き方に注意して実装進めております。
ユーザー画像
masa(メンター)
2022/11/17 17:25
導入ができたなら、下記のように関係ないviewファイルに試しに記述してみるとドロップダウンメニュー作成できますか？？(他のでも良いのですが、サンプルをそのまま書いてドロップダウンメニューが作れるのかを確かめたいなと思いました。)
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</div>
これで表示されるのであれば、該当のヘッダー部分のクラスの指定や閉じタグ等にミスがあると思われます。
ただ、そもそも開かないのであれば別に問題があるかもしれないため、ドロップダウンメニュー以外のボタンなどはできるのかや、以下のようなサイトを参考に試行錯誤してみてください。
(追加で質問する場合はその都度最新の状態でpushしてgithubのURLを共有してください🙏)
ユーザー画像
長井宏樹
2022/11/17 19:48
MASA様
ご回答有り難うございます。
Dropdown出てきまして、解決できました。
MASA様が予想されていました通り、Bootstrap導入しただけでは動きませんでした。
公式サイトIntroduction（以下リンク）より
以下一文をBody内で記載することが必要でした。
<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>
解決までご助力頂き有り難うございました。
Discussion