【Rails】Bootstrapのドロップダウン機能が本番環境で機能しないので検証してみました

Bootstrapのドロップダウン機能を開発環境では機能しましたが、本番環境で機能しなかったのでその対処法を備忘録として、残しておきます。同じような状態で開発がストップしている方の助力になれば幸いです。

開発環境
起こったこと
やったこと
今回学んだこと

開発環境

・Rails 5.2.0

・Heoku

起こったこと

Bootstrapのドロップダウンメニュー機能を使ってメニューをドロップダウンさせリンクを表示させようとしましたがローカル環境では機能したものの、本番環境ではドロップダウンが出てこず機能しませんでした。（エラーではないものの、ドロップダウンのメニューが見れない状態）

やったこと

開発環境では動いて、本番環境では動かなくなるということからHTMLの記述方法には問題がないと仮定。

javascriptが正常に読み込まれていない可能性があることからjavascriptのファイルを見直してみる。

ググってみるとaplication.js の中でjqueryを先に読み込まないといけないようだった。

aplication.js

// This is a manifest file that’ll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin’s
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It’s not advisable to add code directly here, but if you do, it’ll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require bootstrap-sprockets
//= require rails-ujs
//= require jquery
//= require bootstrap
//= require activestorage
//= require turbolinks
//= require_tree .

↓ 　黄色いハイライトの順番を変更しjqueryが先頭へ来るようにする。

aplication.js

// This is a manifest file that’ll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin’s
// vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It’s not advisable to add code directly here, but if you do, it’ll appear at the bottom of the
// compiled file. JavaScript code in this file should be added after the last require_* statement.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require bootstrap-sprockets
//= require rails-ujs
//= require bootstrap
//= require activestorage
//= require turbolinks
//= require_tree .

結果、変化なし。

次にBootstrap公式ページを読んでみると（ブートストラップ公式）

「ドロップダウンはサードパーティのライブラリ ( Popper.js ) に構築され, 動的な位置決めとviewportの検出が可能です。」

とのことであった。Popper.jsをbootstrap.jsを読み込む前に記述しなければならないようだ(popper.min.jsでも可)。もしくは代わりにPopper.jsを内部に含む bootstrap.bundle.min.js や bootstrap.bundle.js を使用するそうだ。

なので以下のように黄色のハイライトのpopperを記述してみた。

aplication.js

//= require jquery
//= require popper
//= require bootstrap-sprockets
//= require rails-ujs
//= require bootstrap
//= require activestorage
//= require turbolinks
//= require_tree .

デプロイを試みてみるとムム！エラーが発生してしまった。

Precompiling assets failed.

ググってみると

プリコンパイルとは、
コンパイルするための事前処理（読んで字の如し）
コンパイラ(翻訳者)が理解できるソースにする処理だそう。

コンパイルとは、
コンパイルとは、エディタで書いたプログラミング言語（高水準言語）を機械語に変換する作業。
PC：機械語で命令
人間：機械語は書きにくいからプログラミング言語（高水準言語）で記述。

要するに「機械語に変換する作業の事前処理が失敗した」ということでしょう。

上のログを辿っていくと

Sprockets::FileNotFound: couldn’t find file ‘popper’ with type ‘application/javascript’

「ポッパーファイルが‘application/javascript’には見つからなかった」と言っています。

ポッパーファイルに問題があったのでしょうか。一度popperを消してその他の不必要と思われるものも消してみる。

popper、activestrage、bootstrap-sprocketsを消してみて以下のようにした。

aplication.js