applicatioin.jsにJavaScriptのコードを書くときの注意点

2019年10月22日 12:55
    jQueryを使ってページにちょっとした動きをつけたいと思い、初めはindex.html.erbのようなビューに直接JavaScriptのコードを書いていました。
    しかし、JavaScriptのコードが各ビューに散らばっているのはドライなコードとは言えません。特にまったく同じ処理を各ビューに書くのはメンテナンス性が著しく落ちるので絶対に避けたいところです。
    そこですべてのJavaScriptコードをapp/javascripts/application.jsに集めて動かしてみたところ、JavaScriptのコードが動く場合と動かない場合があるという事象に陥りました。
    リンクからページ遷移したら動かなくて、一度ページをリロードすると動くようになります。

    解決方法

    先に解決方法から書きます。既存のJavaScriptのコードを以下のように変更しました。
    $(document).on("ready turbolinks:load", function() {
      // 既存のコード
    });

    Turbolinks

    Rails 4.0から標準導入されたページの表示を高速化するGemらしいです。
    このTurbolinksが読み込まれる前に既存のコードが読み込まれると動かなくなってしまうということでした。
    ページ遷移する際、Turbolinksを無効にする方法や、Railsアプリ自体からTurbolinksを削除してしまうという手順もありましたが、できれば残したかったのでこのような解決方法に落ち着きました。

    関連記事

    関連記事はありません。