【Rails / 備忘録】Turbolinksとはざっくりと何ですか？注意すべき点は？

前提条件

この記事は、Rails６までの内容で以下のようにデフォルトでTurbolinksがGemfileに含まれていることを想定しています。

Gemfile（Rails6）

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

Rails7では、Turbolinksに代わりデフォルトでturbo-railsというgemが用意されており、以下の記事内容は当てはまらないと思われますのでご注意ください。

Gemfile（Rails7）

# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
gem "turbo-rails"

はじめに

最近、Railsでチャットアプリを開発しているのですが、開発中にエラーが出て原因を調べていたら、どうやらTurbolinksというものがエラーに関わっていることが分かりましたので、Turbolinksについてまとめていきたいと思います

１. Turbolinksとは

Ruby on Railsフレームワークの一部として開発されたJavaScriptライブラリであり、利用しやすいようにGemとしてデフォルトで組み込まれています。そして、Turbolinksのおかげで画面遷移の高速化を実現することができます。

具体的に見ていきましょう
通常、ユーザーが新しいページに遷移するとき、ブラウザはページ全体を再読み込みします。
つまり、HTML、CSS、JavaScriptなどのすべてのアセットをサーバーから再度ダウンロードするためページ遷移のたびに多くの時間とリソースを消費してしまいます。

そこでTurbolinksの登場です！

1. Turbolinksは、新しいページへのリンクをクリックすると、ブラウザにフルページの再読み込みを行わせずに、新しいページのHTMLをAjaxリクエストで取得します。
2. リクエストを受けたサーバーは、HTMLをレスポンスとして返します。
3. レスポンスとして返ってきたHTML要素にある、bodyタグの中身で現在のページのbodyタグの中身を置き換えます。headタグ内に含まれるJavaScriptやCSSが既に読み込まれているスクリプトやスタイルシートは再度読み込まれません。

こうすることで、ページ全体を再読み込みするのではなく、変更が必要な部分だけを更新するので画面遷移が高速になり、パフォーマンスを向上することができます。

2. Turbolinksを使用する際の注意点

一見、「Turbolinksめっちゃいいやつじゃん」と思うのですが、使用する際には注意が必要です。
Turbolinksはページ全体の再読み込みを行わないため、ページロード時に実行されるはずのJavaScriptが実行されない場合があります。そのため、JavaScriptを適切に動作させるためには、Turbolinks専用のイベントに合わせてコードを調整し、既存のJavaScriptを正常に動作させます。

イベント書き方例

document.addEventListener("turbolinks:load", function() {
  // ここにページが読み込まれたときに実行するコードを書く
});

3. Turbolinksのライフサイクルイベント

Turbolinks専用のイベントの一例について以下に示します。

イベント	内容
turbolinks:load	Turbolinksが新しいページを読み込み終わったときに発火します。これは最も頻繁に使用されるイベントで、新しいページが完全に読み込まれたときにコードを実行するために使用します。
turbolinks:click	ユーザーがTurbolinksによって管理されるリンクをクリックしたときに発火します。
turbolinks:before-cache	Turbolinksが現在のページをキャッシュに保存する前に発火します。
turbolinks:before-visit	Turbolinksがページを訪問する直前に発火します。
turbolinks:request-start	Turbolinksが新しいページのHTMLをフェッチし始めたときに発火します。
turbolinks:before-render	Turbolinksが新しい要素をDOMに挿入する前に発火します。

4. おわりに

Turbolinksについてざっくりと理解できたので、次回はRails7よりTurbolinksの機能をTurbo Driveというもので実現しているらしいのでそちらについて調べたいと思います

5. 参考文献