はじめに
Rails6.0でアプリを作成していてJavascriptでタブUIの実装をしました。
いざブラウザで確認してみると、該当ページを開いているうちは問題なく動作するのですが
ページ遷移をしてもう一度該当ページに戻ってくると、タブのコンテンツが真っ白になってしまいました。。
その画面でリロードすると正しく動作をするのですが、これではアプリとしてよろしくないので
今回はこのバグの修正の仕方をまとめたいと思います。
目次
1. バグの正体：Turbolinks
そもそもTurobolinksとは？
Rails4から公式に導入されたGemのひとつです。
簡単に言えば、ウェブアプリケーションをより速く導いてくれる機能が備わっています。
turbolinksでページ遷移するときはページの表示に必要なすべての要素を読み込まずbody要素だけ入れ替えます。しかも入れ替えるときにはjavascriptやjsonを読み込まないでHTMLだけ読み込むのでページ遷移が高速化するという仕組みです。
タイトルにある通り、リロードしないとJSファイルが読み込まれないのは、ページ遷移時にTurbolinksがJSファイルを読み込まないことが原因で起こっていたんですね。
2. 解決方法
解決方法は複数あるようですが、今回はJSファイルにturbolinks:loadというイベントを追加する方法で解決します。このイベントはturbolinksが働くごとにjavascriptを読み込むことを意味します。
test.js
document.addEventListener("turbolinks:load", function() {
// 処理内容
})
この記述をすることでページが遷移しても本来JSファイルを無視するTurbolinksがうまくJSファイルを読み込んでくれるようになります！
おわりに
最後まで読んでいただきありがとうございました！
お疲れさまでした。。