【Rails】リロードしないとJavaScriptが動かない!【簡単に解決】


はじめに

以前jQueryを使ってタブメニューの切り替えを実装したときに、
ビューを開いた初回は非同期で切り替わるのに、
別のページに移動したり
「戻る」ボタンを押したあと再びタブメニュー画面に戻ると、、、、

動かない、、、!なぜだ、、!

なんて経験をして1日無駄にしたことがあります。
jQueryやビュー画面のコードは間違ってないはず!なぜ!って人向けの記事です。

解決方法①

link_toごとにturbolinksとやらを無効にすればOKです。簡単です。


<%= link_to "ホーム", root_path, data: {"turbolinks" => false} %>

data: {“turbolinks" => false}は遷移先ページのみturbolinksを切ることが出来ます。

turbolinksとは、ページ遷移をAjaxに置き換え、JavaScriptCSSのパース(解析・変換)を省略することで高速化するgemで、Rails4からはデフォルトで使用されています。↓

gem 'turbolinks', '~> 5'

解決方法②

jsファイルに"turbolinks:load"を記述すればOKです。簡単です。


document.addEventListener("turbolinks:load", function() {
  // ...
})

まとめ

turbolinksを無効化する方法として、gemファイルから直接削除する方法もあるようですが、
元々turbolinksはページの読み込みを高速化するgemです。

ボタンを押すたびに画面が初期化され、
一旦真っさらになった後、再度jsやらcssを読み直す。。。待ってられません。

その辺の処理をTurbolinks5が全部やってくれているんです。

なるべく
①個別のページ(link_toごと)に無効にするか、
②jsファイルにコードを加えるだけにしましょう。

参考
https://qiita.com/suzy1031/items/d3a8e96fe4d31111d22e