【Rails / JavaScript】ターボリンクとは
ターボリンク(Turbolinks)とは
ターボリンク(Turbolinks)は、Railsで使われるJavaScriptライブラリで、ページ遷移を高速化するための仕組み。
通常、Webページを切り替えるときには、新しいページのHTMLをサーバーから取得して、ブラウザに表示する必要があるが、ターボリンクはこの処理を最小限に抑えることで、ページの切り替えを高速化できる。
動作原理
- ページ遷移が発生すると、ターボリンクはページの差分のみを取得する。(通常はbody要素の内容)。
- 現在のページのbody要素を新しいページのbody要素に差し替える。つまり、ページ全体を再読み込みせずに、一部分だけを差し替えることでページ遷移を行う。
メリット
-
ページ遷移の高速化
通常のページ遷移では、新しいページを取得するためにサーバーとの通信が必要だが、ターボリンクではページの一部だけを差し替えることができるので、新しいページを取得する必要がない。そのため、ユーザーが次のページに移動する際にも、すでに読み込まれているページの一部を再利用することができるため、ページ遷移が速い。 -
リソースの再読み込みを抑える
共通の要素(例:ヘッダーやフッターなど)をキャッシュして再利用する。そのため次のページに移動する際に、共通の要素を再読み込みする必要がなくなる。ページ遷移ごとにヘッダーやフッターを再度サーバーから取得するのではなく、すでにブラウザにキャッシュされているものを再利用することで、リソースの再読み込みを抑えることができる。 -
JavaScriptとCSSの初期化を省略
通常のページ遷移では、新しいページがロードされるたびにJavaScriptやCSSの初期化が行われる。ターボリンクを使用すると、新しいページを取得せずにページの一部だけを更新するため、JavaScriptやCSSの初期化を省略できる。これにより、ページ遷移時の処理が高速化される。
使用方法
Railsではデフォルトで組み込まれているので、特に設定は不要。ただしJavaScriptを使う場合には以下の通り注意が必要。
(JavaScriptの例):
document.addEventListener('turbolinks:load', function() {
// turbolinks:load イベントでのJavaScriptの再実行
// ここにページロード時に実行したいJavaScriptコードを記述する
// 例:カテゴリのドロップダウンメニューの制御やスライドショーの設定など
});
turbolinks:load
イベントを使う:
DOMContentLoaded
イベントではなく、turbolinks:load
イベントを使う必要がある。これは、ページのロードが完了した後に呼び出されるイベントで、ターボリンクのページ遷移によっても発火する。
DOMContentLoaded vs turbolinks:load
以下の通り、表にまとめる。
イベント名 | 発火タイミング | 使用場面 |
---|---|---|
DOMContentLoaded | 通常のHTMLページ読み込みが完了した時 | ターボリンクを使用しない場合、または特定のページ遷移でのみ必要な処理 |
turbolinks:load | ターボリンクを使用してページ遷移が完了した時 | ページ遷移後にイベントの再発火が必要な時 |
ターボリンクの無効化
ターボリンクは無効化することができるので、無効化する場合を以下にまとめる。
-
特定のリンク先が外部ページの場合
アプリケーション内のリンクではなく、別のウェブサイトへのリンクを提供する場合には、ターボリンクを無効化する。外部ページへの遷移では、通常のページ遷移が必要になるため、ターボリンクが不要。
<%= link_to "External Link", "https://example.com", data: { "turbolinks" => false } %>
-
JavaScriptやCSSの初期化が必要な場合
特定のページやリンク先に対してJavaScriptやCSSの初期化が必要な場合、ターボリンクを無効にした方が良いことがある。ターボリンクでは一部のページだけが更新されるため、必要な初期化処理が再実行しない場合があるため。
<%= link_to "Special Page", special_path, data: { "turbolinks" => false } %>
Discussion