Rails5でjavascript(jQuery/coffeescript)が動かない

Ruby on Rails jQuery

軽く調べただけでも新旧いろんな症例（？）がある。 この記事で紹介するのはturbolinksを有効にしている場合に注意すべきケース。

環境

事象

  • javascriptが動かない
    具体的には、selectボックスの変更イベントを検知してajaxが動くようなcoffeescriptのコードを書いたが、動かない
  • ページ自体をリロードすると動く
    ⇒別のページから遷移したときは動かないけど、リロードすると動く場合、Turbolinksが悪さをしている可能性が濃厚。
    Turbolinksを無効化した上で確かめればすぐに切り分けられる。

原因と対処

Turbolinksを有効化している場合、$(document).readyは動作しない。
まずは対処方法から。

before（ダメな書き方）

# app/assets/javascripts/xxxxx.coffee
$(document).ready -> 
  $('#hoge_menu').change ->
#（以下略）

# 以下の書き方も同じ

$ ->
  $('#hoge_menu').change ->
#（以下略）

after（OKな書き方）

# app/assets/javascripts/xxxxx.coffee
$(document).on 'turbolinks:load', ->
  $('#hoge_menu').change ->
#（以下略）

Turbolinksが有効だとなぜ$(document).readyが動かないか

公式ドキュメントに説明がある。
Working with JavaScript in Rails — Ruby on Rails Guides

Turbolinks overrides the normal page loading process, the event that this relies upon will not be fired.

その他の注意点

jquery-turbolinksは使わない

Rails4向けの古いブログ記事などでは、解決策としてjquery-turbolinksというgemを入れるやり方が紹介されていたりする。
しかし、githubのREADMEを見ると冒頭にデカデカと「Deprecated 」と書いてあり、続いて以下の記述があるので使うのはやめましょう。

This gem does not work with Turbolinks 5+, and is not compatible with many jQuery plugins. We do not recommend using it.

そもそも余分なgemを入れなくても解決できるのだから、入れる必要もないのだが。

github.com