[ Rails ] turbolinksの概要と一部使い方

RailsでECサイトを作成中に、一部ボタンが動作しないことがあり、turbolinksを一部無効化することで解決しました。
そもそもturbolinksとは何ぞや状態だったので、備忘録として残しておきます。

turbolinksとは

ページ遷移をAjaxに置き換えることで、JavaScriptやCSSのパースを省略することで高速化するgemのこと。
Railsにデフォルトで入っているやつ。

完全にturbolinksを無効化する方法

※ turbolinksを完全無効化すると、他の高速化するgemを入れたりする必要があるので、
私のような初心者は、特別なことがない限りおすすめしないです。

1. gemを無効化する

Gemfile

    #コメントアウトをする
    #gem 'turbolinks'

ターミナル

    $ bundle update

2. application.jsを編集

application.js

    // 変更前
    //= require turbolinks　

    // 変更後
    // require turbolinks　

3. application.html.slimを編集

application.html.slim

    / 変更前
    = stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track': 'reload'
    = javascript_include_tag 'application', 'data-turbolinks-track': 'reload'

    / 変更後
    = stylesheet_link_tag    'application', media: 'all'
    = javascript_include_tag 'application'

一部を無効化する方法

1. JavaScriptを編集する方法

・.jsファイルの場合

hoge.js

    $(document).on('turbolinks:load', function() {
     // turbolinksを無効化したい処理を入れる
    });

・.coffeeファイルの場合

hoge.coffee

    $(document).on 'turbolinks:load', -> 
      # turbolinksを無効化したい処理

2. リンクを編集する方法

・link_toに追加する場合

hoge.html.slim

    = link_to '', root_path, 'data-turbolinks': false

'data-turbolinks': false をlink_toに追加すれば無効化できます。

・divの場合

hoge.html.slim

    div data-turbolinks='false'
      = link_to '', root_path