RailsにBootstrapテンプレートが適用できない

Question

前提・実現したいこと

Railsで以下テンプレートを仕様してWebサイトを作成しています。
https://startbootstrap.com/templates/sb-admin/

サンプルページのように動くページを作成したいのですが、ハンバーガーメニューが正しく機能せず、以下のように表示されてしまいます。
![

サイドバーに加え、チャートやページネーションなども機能していないです。

補足情報（FW/ツールのバージョンなど）

Ruby2.6.5
Rails5.2.4.1
Bootstrap4.4.1

Comments

[maisumakun]

Bootstrapの導入はどのように行っていますか？

JavaScript、CSSをどのように用意したかの詳細をお願いします。

[Noir]

Bootstrapの導入はGemfileにgem 'bootstrap'を記述した後、bundle installで導入しました。

Javascriptはportal\app\assets\javascriptsにscripts.jsを貼り付けた後、Application.html.erbに<script src="javascripts/scripts.js"></script>を記述してます。

CSSもportal\app\assets\stylesheetsにstyles.cssを貼り付けてApplication.html.erbに<link rel="stylesheet" href="../stylesheets/styles.css">と記述しています。

[maisumakun]

Bootstrap自体のJavaScript/CSSや、jQuery、popper.jsなどは準備しましたか？

https://getbootstrap.com/docs/4.0/getting-started/javascript/#dependencies

[Noir]

BootstrapCDN(https://www.bootstrapcdn.com/)やその他サイトを参考に以下をapplication.html.erbに記載しています。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="js/bootstrap.js"></script>

これとは別に用意するものがあるという事でしょうか？

[maisumakun]

> これとは別に用意するものがあるという事でしょうか？

いえ、何も書かれていなかったので、「必要なものの導入が抜けている」可能性を疑っただけです。

Answer 1

Javascriptはportal\app\assets\javascriptsにscripts.jsを貼り付けた後、Application.html.erbに<script src="javascripts/scripts.js"></script>を記述してます。

こちらは正常に読み込めていますでしょうか。assets/以下なので、設定次第ではそのまま参照できない可能性があります。

Comments

[Noir]

ページのソースから確認したらRooting Errorでアクセスできませんでした。
この場合正常に読み込まれていないという事でしょうか？
またどのようにしたら読み込めるのかもご教授頂きたく思います。

[maisumakun]

> この場合正常に読み込まれていないという事でしょうか？

そのとおりです。

> またどのようにしたら読み込めるのかもご教授頂きたく思います。

他のJavaScriptはSprockets（app/assets/）で書いていますか？Webpacker（app/javascript/）ですか？

[Noir]

> そのとおりです。

なるほど、ありがとうございます。

> 他のJavaScriptはSprockets（app/assets/）で書いていますか？Webpacker（app/javascript/）ですか？

他のJavascriptは、app/assets/に書いています。
application.jsに
//= require jquery
//= require bootstrap-sprockets
//= require_tree .
と書いていますが、これは関係ありますか？

[maisumakun]

> application.jsに（中略）と書いていますが

はい、当該のscripts.jsをapp/assets/javascripts/以下に置けば、「require_tree .」が読み込むはずです（サーバの再起動などは必要かもしれませんが）。

[Noir]

サーバを再起動したところ、scripts.jsが正常に読み込まれソースから参照することができました、ありがとうございます。（チャートやページネーションも正常に機能するようになりました。）

ただ、ハンバーガーメニューはまだ使えず、中のメニューが飛び出してしまう状態です。