Zenn
🚄

【Rails / JavaScript】ターボリンクとは

2023/07/26に公開
JavaScript
Rails
#
turbolinks
tech

ターボリンク（Turbolinks）とは

ターボリンク（Turbolinks）は、Railsで使われるJavaScriptライブラリで、ページ遷移を高速化するための仕組み。
通常、Webページを切り替えるときには、新しいページのHTMLをサーバーから取得して、ブラウザに表示する必要があるが、ターボリンクはこの処理を最小限に抑えることで、ページの切り替えを高速化できる。

動作原理

  1. ページ遷移が発生すると、ターボリンクはページの差分のみを取得する。（通常はbody要素の内容）。
  2. 現在のページのbody要素を新しいページのbody要素に差し替える。つまり、ページ全体を再読み込みせずに、一部分だけを差し替えることでページ遷移を行う。

メリット

  1. ページ遷移の高速化
    通常のページ遷移では、新しいページを取得するためにサーバーとの通信が必要だが、ターボリンクではページの一部だけを差し替えることができるので、新しいページを取得する必要がない。そのため、ユーザーが次のページに移動する際にも、すでに読み込まれているページの一部を再利用することができるため、ページ遷移が速い。

  2. リソースの再読み込みを抑える
    共通の要素（例：ヘッダーやフッターなど）をキャッシュして再利用する。そのため次のページに移動する際に、共通の要素を再読み込みする必要がなくなる。ページ遷移ごとにヘッダーやフッターを再度サーバーから取得するのではなく、すでにブラウザにキャッシュされているものを再利用することで、リソースの再読み込みを抑えることができる。

  3. JavaScriptとCSSの初期化を省略
    通常のページ遷移では、新しいページがロードされるたびにJavaScriptやCSSの初期化が行われる。ターボリンクを使用すると、新しいページを取得せずにページの一部だけを更新するため、JavaScriptやCSSの初期化を省略できる。これにより、ページ遷移時の処理が高速化される。

使用方法

Railsではデフォルトで組み込まれているので、特に設定は不要。ただしJavaScriptを使う場合には以下の通り注意が必要。

（JavaScriptの例）：

js
document.addEventListener('turbolinks:load', function() {
  // turbolinks:load イベントでのJavaScriptの再実行
  // ここにページロード時に実行したいJavaScriptコードを記述する
  // 例：カテゴリのドロップダウンメニューの制御やスライドショーの設定など
});

turbolinks:loadイベントを使う：
DOMContentLoadedイベントではなく、turbolinks:loadイベントを使う必要がある。これは、ページのロードが完了した後に呼び出されるイベントで、ターボリンクのページ遷移によっても発火する。

DOMContentLoaded vs turbolinks:load

以下の通り、表にまとめる。

イベント名 発火タイミング 使用場面
DOMContentLoaded 通常のHTMLページ読み込みが完了した時 ターボリンクを使用しない場合、または特定のページ遷移でのみ必要な処理
turbolinks:load ターボリンクを使用してページ遷移が完了した時 ページ遷移後にイベントの再発火が必要な時

ターボリンクの無効化

ターボリンクは無効化することができるので、無効化する場合を以下にまとめる。

  1. 特定のリンク先が外部ページの場合
    アプリケーション内のリンクではなく、別のウェブサイトへのリンクを提供する場合には、ターボリンクを無効化する。外部ページへの遷移では、通常のページ遷移が必要になるため、ターボリンクが不要。
<%= link_to "External Link", "https://example.com", data: { "turbolinks" => false } %>
  1. JavaScriptやCSSの初期化が必要な場合
    特定のページやリンク先に対してJavaScriptやCSSの初期化が必要な場合、ターボリンクを無効にした方が良いことがある。ターボリンクでは一部のページだけが更新されるため、必要な初期化処理が再実行しない場合があるため。
<%= link_to "Special Page", special_path, data: { "turbolinks" => false } %>

Discussion