PF作成において、これまでJS関連でエラーが起きたらとりあえず消してきた
「turbolinks」と何とか仲良くなりたいと思い、実装した内容を備忘録として記述します。
概要
そもそも、turbolinksとは何なのか？
こちらの記事が参考になりますが、本当に簡潔に言ってしまえば、
ページ推移を高速にする機能、と言えます。rails4以降は標準装備されているようです。
一方で、使うことによるデメリットも多く、私が勉強した教材の中でもとりあえず作動しないようにしておくという冷待遇を受けていた悲しい機能です。それでも、PF作成において画像が重いページ等もあり、全体的な動作は早い方がよくね？って思ったのでこの度何とか消さずに実装できないか抗ってみました。実際1秒ぐらい違います。
※大前提として、勉強まだ10週間の初学者が作っているPF内でのことなので、動的な機能がてんこ盛りの複雑なアプリではもっと色々設定しなきゃならないと思われます。
実装
まず、rails6においてturbolinksは
require("turbolinks").start()
と記載されています。消したい場合はこれをコメントアウトするわけです。
turbolinksが作動することで起こるデメリット
①JSのイベントハンドラーに修正を加えないと動作しなくなってしまう。
通常使われるload、DOMContentloaded、window.onLoad、等の記述では動作しない。
②戻るボタンでページを戻ろうとすると不具合が生じる。
解決方法
①イベントハンドラーをturbolinks仕様に変更する。
・turbolinks:load ページの読み込み時
・turbolinks:click turbolinksが有効なaタグのクリック
等になります。また、自身の実装では特にライブラリを使用している部分において一部うまく起動しない場合もありました。やむなく、そのページだけturbolinksを作動させない設定をしました。指定したいページのリンク下にdata: {"turbolinks" => false}を記載します。
<%= link_to '表示名', パス, data: {"turbolinks" => false}%>'
<a data-turbolinks="false" href=""></a>
②ブラウザバックやプレビュー用のキャッシュを止める
turbolinksで戻るボタンでページ推移すると、描画したものがページ遷移直前にキャッシュされる仕様で二重キャッシュになり動作を妨げます。
<meta name="turbolinks-cache-control" content="no-cache">
これでOKです。より詳細に設定するのであれば、turbolinks:before-cacheなどのイベントハンドラーを使いこなし、設定することができるようですが、私の作成しているような静的アプリでは上記で問題ありませんでした。
まだまだ奥が深いturbolinksですが、今後もなるべく冷遇しないように仲良くやっていきたいと思います。