Ruby
 Computer >> コンピューター >  >> プログラミング >> Ruby

Turbolinksでアプリのナビゲーションを高速化する方法を徹底解説

Turbolinksは、ページの切り替えやアセットの再読み込みを賢く制御することで、アプリの体感パフォーマンスを向上させる最適化技術です。条件付きGETリクエストとは異なり、Railsアプリ本体のRubyコードに一切変更を加える必要がありません。Turbolinks 5はJavaScriptライブラリとして、Railsを使っていない静的ページを含むあらゆる環境で動作し、未対応のブラウザでは自動的にフォールバックします。

Turbolinks 5とは

TurbolinksはRails 4以降、新しいアプリケーションにデフォルトでバンドルされてきました。そしてRails 5には、現在「Turbolinks Classic」と呼ばれる旧バージョンを完全に書き直したTurbolinks 5が同梱されています。

Railsと共に提供されていますが、新版のTurbolinksは純粋なJavaScriptライブラリです。ページに<script>タグを設置するか、アプリのJavaScriptバンドルに組み込むだけで、任意のHTMLページで利用できます。

組み込むと、Turbolinksは自動的に同一ドメインへのリンクをすべて検出し、クリックイベントリスナーを登録します。これらのリンクのクリックは横取りされ、通常どおりページを移動する代わりに、JavaScriptのXMLHttpRequestを使ってリンク先のページをバックグラウンドで取得します。その後、次の4つの処理が実行されます。

  1. 現在のページのコピーがTurbolinksのキャッシュに保存される
  2. XHRの結果から得られた<body>で、現在のページの<body>が置き換えられる
  3. XHRの結果から得られた<head>と、現在のページの<head>がマージされる
  4. History APIを使ってブラウザのURLが更新される

<head>タグをマージすることで、複数のページに共通するCSSやJavaScriptなどのアセットを、ブラウザが再読み込み・再レンダリングする必要がなくなります。多くのページで同じアセットを共有している場合、この仕組みはアプリの表示速度を大幅に改善します。

ビューを持つRails 5アプリであれば、リンクをクリックしてページ間を移動したり、戻るボタンを押したりするだけで、Turbolinksの動作を簡単に確認できます。ブラウザのネットワークタブを開くと、Turbolinks経由で読み込まれたページのリクエストが「xhr」として記録されているのが分かるでしょう。さらに、リクエストごとにアセットが再ダウンロードされていないことも確認できます。

キャッシュとページプレビュー

同じページへの2回目以降のアクセスを高速化するため、Turbolinksは最近訪れたページのキャッシュを保持しています。これにより、たとえば戻るボタンを押した際に、前のページを瞬時に表示できます。

また、表示の遅いページの体感速度を高めるために、キャッシュに対象ページが存在する場合はプレビューが表示されます。リンクをクリックすると、最新版の読み込み中にまずキャッシュ済みのバージョンが描画されるという仕組みです。

Turbolinks利用時の注意点

Turbolinksはブラウザの標準的な挙動の一部を独自に再実装しているため、有効にしていると、いくつかの点で従来と動作が異なります。

turbolinks:loadイベントと<script>タグの扱い

リンクをクリックしてもページ全体が再読み込みされないため、window.onloadやDOMContentLoadedを使ったJavaScriptの初期化処理は機能しなくなります。この問題を解決するため、Turbolinksは代替としてturbolinks:loadイベントを提供しています。

document.addEventListener("turbolinks:load", function() {
  // ...
})

ブラウザのローディング表示

ページ間の移動時にリクエストはバックグラウンドで実行されるため、ブラウザ本来のローディングインジケーターは表示されません。

この問題への対策として、Turbolinksは500ミリ秒後に画面上部へ青いプログレスバー(CSSでカスタマイズ可能)を表示し、ページが読み込み中であることをユーザーに伝えます。

$ rails new --skip-turbolinksは今でも必要?

Turbolinks Classicの時代、Turbolinksは新規Railsアプリを生成する際にスキップされがちな機能でした。しかしTurbolinks 5は大きく進化を遂げました。Railsに依存せず、未対応ブラウザでも問題なく動作する純粋なJavaScriptプラグインとなったため、上記の注意点さえ押さえておけば、ほとんどのアプリでそのまま活用できます。

その見返りとして、Turbolinksは快適な速度向上を実現し、ページビューごとの静的アセットの再読み込みを防ぐことで、ネットワークリクエストの削減にも貢献します。新しいRailsアプリを作るときは、ぜひTurbolinksを有効のままにしてその効果を確かめてみてください。既存のアプリでも導入を検討する価値は十分にあります。

以上でTurbolinksの概要紹介は終わりです。あなたのアプリでTurbolinksを活用していますか?ぜひ感想をお聞かせください。また、AppSignal Academyの本記事や過去記事の評価、今後読みたいテーマなどがあれば、@AppSignalまでお気軽にお知らせください。

  1. 初めてのWebスクレイパー構築 第2回：Mechanizeでリンク操作・フォーム送信・ファイルアップロードを自動化する

    このチュートリアルでは、Mechanizeを使ってリンクのクリック、フォームの入力・送信、ファイルのアップロードを行う方法を学びます。また、Mechanizeのページオブジェクトをスライス（抽出）する方法や、Google検索を自動化して結果を保存する方法も解説します。 扱うトピック 単一ページ vs ページネーション（複数ページ） Mechanize Agent（エージェント） Page（ページオブジェクト） Nokogiriのメソッド リンクの操作 クリック（遷移） フォームの操作 単一ページ vs ページネーション これまでNokogiriを使って単一ページのスクレイピングを行う基礎を

  2. ID Watchdog(アイディーウォッチドッグ)徹底解説|個人情報を守るID保護サービスのすべて

    ID Watchdogとは ID Watchdogは、13年以上にわたり市場で確かな実績を積み重ね、なりすまし(ID盗難)被害を徹底的に防いできた個人情報保護サービスです。2005年6月、クレイグ・ラムゼイ(Craig Ramsay)氏がクレジット業界の専門家たちとともにコロラド州デンバーで創業し、現在では米国のID盗難対策サービス分野におけるトップ5企業に名を連ねています。 創業当初の2年間、同社は法執行機関、銀行、クレジット会社、司法関係者、情報プライバシーの専門家らとのコンサルティングに注力。その後2007年には、個人向けサービス、保険パートナー向けサービス、従業員福利厚生、民間医療交換