【Rails】ページをリロードしないとJavaScriptが実行されない時の対処法

困ったこと

$(function () {
  const height = $("header").height();
  $("body").css("margin-top", height + 50);
});

application.jsにて、簡易な処理をjQueryで記述していた。直接そのページのURLを叩いてアクセスするともちろんその処理が実行される。

しかし下記の場合になぜか実行されないという事態に陥った。

  • 同アプリ内からaタグをクリックし遷移した時
  • redirect_toでリダイレクトしてきた時

解決法

$(function () {
  $(document).on("turbolinks:load", function(){
    const height = $("header").height();
    $("body").css("margin-top", height + 50);
  });
});

turbolinks:loadというイベント発生時に実行するように修正したら解決。

原因

原因はコードにもある通り「Turbolinks」だった。

Turbolinksはリンクをクリックした時にページ全体を読み込むのではなく、headタグの一部とbodyタグ内の要素だけを書き換え、読み込みの高速化をしてくれるライブラリ。（Rails独自のものではない）

それが有効化されていたことにより、書き換え対象に含まれないjsの処理が実行されなかった。（ちなみにRails4からデフォルトのGemになったらしい）

参考：Rails で JavaScript を利用する - Railsガイド

Turbolinksを無効にする方法

Turbolinksの恩恵を受けられず読み込み速度は落ちるが、無効にする方法もある。

1. Turbolinksをアンインストール

# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
gem 'turbolinks', '~> 5'

Gemfileの該当箇所を消す、もしくはコメントアウトする。

Terminal window
bundle install

を叩く。

2. application.jsの記述を修正

//= require turbolinks

application.jsにおける上の行を削除する。

3. application.html.erbを修正

<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>

あとはheadタグ内のこの記述を削除してあげれば、Turbolinksの無効化が完了。