リロードしないとJavaScriptが動かない？【Rails】

本記事について（お断り）

この記事は、しがないプログラミング初心者がお勉強よろしくプログラミング・技術に触れるべく、行ったことの備忘録として書き綴ったものです。至らぬ点、誤解を招く表現など、ご指摘がありましたら甘んじて受け入れます🙇‍♂️

問題

JQueryを使って背景画像をフェードインさせる実装を行った。
該当ページを呼び出すと、しっかりとフェードインしてきた。よしよし。
別ページに遷移して再度該当ページを開いてみる。あれ、真っ白だ。なぜ？

原因

原因をググっていると、どうやらTurbolinksが関係しているっぽい。
Turbolinksとは、Rails4から標準装備されているgemで、ページ遷移の際に、CSSやJavaScriptの読み込みを省略してくれ、高速化をもたらしてくれるという素晴らしい機能。ただし、高速化が期待できる反面で、JavaScript関係でトラブルが起こる可能性も。初心者には取っ付きづらい機能、私のように。

解決策

１.Turbolinksが提供しているイベントturbolinks:loadを利用する

jsファイル冒頭に

$(document).on('turbolinks:load', function() {
  ...

もしくは

document.addEventListener('turbolinks:load', function() {
  ...

と書いておけば、ロードしてくれるのでJavaScriptが機能するようになります。

２.Turbolinksを無効にする

・部分的にTurbolinksを無効にする

link_toにオプションとして埋め込むことで

<%= link_to 'hoge', hoge_path, data: {"turbolinks" => false} %>

遷移先のページでtubolinksを無効にする。

・gemファイルから削除する

gem 'turbolinks', '~> 5'

Gemfileから直接turbolinksを削除することでturbolinksを完全無効化する。
ただし、turbolinksは前述のとおり高速化をもたらしてくれている素晴らしい機能であることは違いない。コストとメリットを考えて、無効化するかを慎重に考えた方がいい。

解決！

参考

Rails ページ移動した際にリロードしないとJSが機能しない
現場で使える Ruby on Rails 5速習実践ガイド