Turbolinks
はじめに
Turbolinksのせいで上手く動かない、反応しないなどで悩まされた経験があります。
今回はTurbolinksとは何者なのか、本当に必要なのかと気になったので調べてみました～
Turbolinksとは？
Turbolinksは画面遷移を高速化してくれるJavaScriptのライブラリとして提供されていて、Railsではデフォルトで入っています。
Gemで管理されているとのことだったので確認したところ、このように記述されていました。
gem 'turbolinks', '~> 5'
どのように高速化しているのか？
Turbolinksはリンクによって画面遷移を行う時に、遷移先のheadタグ内の差分を取り込み、遷移先のbodyタグと遷移元のbodyタグを置き換えます。
私が解釈した感じだと、画面遷移するときにページの情報を丸々入れ替えるのではなく、変更点があるところだけ入れ替えているようです。
Turbolinksによる問題
ここまでではTurbolinksはいいこと尽くしという印象ですが問題点があるそうです。
今回はjsファイルを作成し、jQueryによってアラート表示させます。
$(document).readyは「ページの読み込みが完了したらアラート表示される」という動作が全ページで行われるはずですが、初めにルートへアクセスした時のみアラートが表示されませんでした。
$(document).ready(function () {
alert('Hello World')
});
原因は何なのか？
Turbolinksの特徴として遷移先のページを一から新たに読み込んでいるわけではないという物がありました。
そのため、今回の原因は遷移先のページを一から新たに読み込んでいないので、アラート表示される条件を満たしていないので最初の読み込み時だけしか表示されないみたい様です。
よくあるリロードすれば期待している処理が行われるのもこれに当たります。
対処方法
jsファイルとrailsでの対処方法をそれぞれ説明します。
記述を変える場合だと下記のように変更します。
$(document).on('turbolinks:load', function () {
alert('Hello World')
});
turbolinks:loadと記述することで、Turbolinksで遷移、そうではないとき（直接URLでアクセスするなど）と両方で処理を発火させるための記述になります。
Railsではリンクに対してdata-no-turbolink属性をつけることで無効化できます。
<%= link_to "一覧画面へ", root_path, data: {"turbolinks" => false} %>
これで期待通りの動作をするようにできると思います。
参考にさせていただいた記事
まとめ
javascriptファイルがどのタイミングで読み込まれているのか判断が難しいと感じました。
エラーが起こって読み込まれる順番がおかしいと認識することはなんとなくできるので、それを事前に動作を記述しているときに気づけたらいいなと思いました～
Discussion