こんばんは!
最近Bootstrap最新版を導入し、新しい機能を追加して浮かれていたところ『あれ?うまくいかないな』と思う部分がありました。
具体的には、リロード後は問題ないのですが画面遷移などをした後にオフキャンバスやドロップダウンなどの機能が作動しないといったものでした。
メンターさんに質問し、なぜそうなっていたのか理解できたので共有してみようと思います。
環境
Rails 6系
Bootstrap 最新版(5.3?)
Cloud9
原因
ズバリ、Rails特有のターボリンク(Turbolinks)が画面遷移後にBootstrapのJavascriptを使っている部分を読み込めなくしているとのことでした。そういえば、普通にRailsでjsファイルに書き込むときはターボリンク無効化する記述しているのになんでBootstrapではその発想が思いつかなかったんだ!と自分の技量不足に反省しつつ、、、
そもそもターボリンクとは?という方はこちらを参考にしてみてください。
ターボリンクは最初にページを読み込むときにしかhead内とjsファイルなどを読み込まず読み込み速度を高速化させる性質があるので、画面遷移後にBootstrapがうまく動いていなかったようです。ただ、メンターさんによればターボリンクはそこまで高速化してくれてるかというとそうでもないらしいので、解決方法としては
アプリ内のターボリンクをすべて無効化する!
がいいようです。たしかに実際ターボリンクを無効化してみて最初の画面を読み込むときだけ少し時間かかるかも?ぐらいでした。正直あまり変わっていない印象なので、この解決方法で納得できました。
部分的に無効化することもできますがBootstrapを使っていると、すべてに記述していくのはとても大変なので、、、
具体的な解決方法
app/javascript/packs/application.jsを開き、ターボリンクの記述をコメントアウトすることで、ターボリンクを無効化します。
Rails.start()
// Turbolinks.start()
ActiveStorage.start()
このようにTurbolinks.start()
という記述をコメントアウトしてください。
そのあとサーバーを起動してみると、なんということでしょう!すべて動きます
教えてくださったメンターさんに大感謝です!!
最後に
今日は一日の終わりにため込んだ質問をメンターさんにお聞きしたのですが、解決が早くその分説明に時間をかけてくださる方で本当に感動しました!この感謝をどう伝えていいやら。
PF作成を初めて数日ですが、初めての自分の好きなように作っていい機会(ある程度の決まりはありますが)でとても楽しく取り組めています。また、過去の人々が書いてくださった記事に本当にお世話になっています。いつか自分の記事も誰かの役に立てますように~
ということで今回は以上です!お疲れ様でした!