目次
はじめに
現在、ポートフォリオを作成中であり、
その中でJavaScriptを用いたカレンダー機能を実装していたのですが、
link_toからカレンダーページに遷移した際に、
１度リロードしないとJavaScriptが適用されない問題が生じたので、
この辺の原因を明確にして、記録を残そうということでこの記事を執筆しています。
本記事は、プログラミング初心者によるものであることをご了承ください。
JSの表示を邪魔するのは・・・
ずばり、Turbolinksです。
コイツのせいで、頑張って書いたJSが遷移先で表示されないのです。
このように考えると何だか憎たらしいヤツに思えてきちゃいますが、
色々調べていると、実は良いヤツらしい。
良いヤツなんだけど、たまに余計なお節介をして、
うっかり我々の大事な大事なJSを隠してしまうようです。
Turbolinks、意外と憎めないやつかもしれない。
ってことでもっと知りたくなってきましたね(無理矢理)。
てなわけでもう少し詳しく見ていきます。
Turbolinksって何者？
Turbolinksとは、リンククリックに対して、ページ遷移を自動的にAjax化してくれるライブラリです。
①aタグをクリックすると、遷移先のページをAjaxで取得する
②その取得したページが要求するCSSやJSが、現在のページのものと同じである場合、titleやbodyのみ(画面の一部だけ)を置き換える
というのがTurbolinksの主な仕組みです。
Turbolinks導入のメリット
Turbolinks導入の最大のメリットは、画面表示を高速化してくれることです。
通常であれば、リンクをクリックすると、指定されたページに遷移するため、その分時間がかかりますが、Turbolinksを導入している場合、ページの遷移は行われず、Ajaxにより画面の一部だけを更新する仕組みになっているので、結果的に読み込みに時間がかからず、ページの表示が高速化するというわけです。
サイトを見ている側からすると、少しでも待たされる時間をなくしたいわけですから、
TurbolinksはUXを向上させる救世主って感じですね。
何だ、やっぱり良いヤツじゃん
最初から導入されているってことは、それなりに便利で使えるからなんですよね。
とは言いながらも、どんなに良いヤツでも、時と場合によっては煩わしく感じてしまうものです。
Turbolinks導入のデメリット
Turbolinks導入のデメリットは、JSやCSSの適切な表示を妨げてしまう場合があることです。
メリットのところで、Turbolinksは画面の一部だけを更新させると説明しましたが、
この仕組みこそが、JavaScriptが上手く反映しない問題を生じさせていると言えます。
上記で、Turbolinksを用いると、ページの遷移は行われず、Ajaxにより画面の一部だけを更新する事になると述べました。
ブラウザのページ遷移が行われていないので、JavaScriptのイベントが発火せず、結果的にJavaScriptが上手く反映しないというわけです。
これが噂のTurbolinksの余計なお節介ってやつか。なるほど。
解決策
Turbolinksを導入しつつ、必要なところではそれを無効化し、
何とかJavaScriptの動作を上手く反映させたい。
そういう人向けに、どうやら2つの解決策があるみたいです。
① Turbolinksが提供するイベントを追加
JSファイルに、Turbolinks専用のイベントturbolinks:loadを追加することでJSを正常に動作させます。
document.addEventListner('turbolinks:load', function() {
console.log('Loaded');
});
② 特定のリンクでTurbolinksを無効化
aタグ(link_to)にdata: {"turbolinks" => false}を加えることによって、
Turbolinksを無効化し、遷移先に飛ぶようにすることでJSを正常に動作させます。
=link_to "テスト", tests_path, data: {"turbolinks" => false}
最後に
ポートフォリオ作成をきっかけにたまたまTurbolinksを調べることになったわけですが、
調べれば調べる程、まだまだ奥が深そうな感じがしました。
今回は、基本の部分で留めておこうと思いますが、また機会があれば調べてみたいところです。
尚、本記事の内容で間違っている点や不足している点などがありましたら、ご教示いただけると幸いです。