本記事は、🔽「Turbo Rails Tutorial」の学習を進めていく際の個人メモです！
🔽 前章の記事はこちら
3章 Turbo Drive
3章は「Turbo Drive とは何か」を理解するため、ちょっとした実験をしながら説明してくれる章となっています。
Turbo Drive とは？
Rails7ではデフォルトで Turbo Drive が有効になっています。
gem "turbo-rails"
import "@hotwired/turbo-rails"
import "./controllers"
1章の時点で、すでに SPA チックになっていると気づきましたが、Rails7でrails newするだけで Turbo Drive になっているからなのですね！
Turbo Drive は、すべてのリンクのクリックとフォーム送信を Ajax リクエストに変換します。
Turbo Drive が行うこと
-
"click"イベントや、フォームの"submit"イベントをインターセプト1する - デフォルトの動作を上書きし、Ajax リクエストに変換する
- リクエストの内容に応じて、HTMLページの
<body>のみを置き換える
ほとんどの場合<head>は変更されないため、高速になります。
（CSS や JavaScript ファイルのダウンロード要求は、Webサイトに最初にアクセスしたときに1度だけ実行されます。）
status: :unprocessable_entity
第１章では、空のフォーム送信時に何もエラーメッセージが表示されないことを確認しました。本来であれば空のフォーム送信時に422ステータスコードを返さなければならないのですが、Turbo では、4xx または 5xx ステータス コードを受け取った場合、例外的にリダイレクトをどう処理すればよいか分からないようです。
🔽 詳しくはこちらも参照
Turbo Drive を無効化してみる
Turbo Drive をまだサポートしていない gem を扱うときなど、Turbo Drive を無効にする必要がある場合があります。無効にするには、data-turbo="false"属性を追加する必要があります。
🔽 リンクで Turbo Drive を無効にする例
<%= link_to "見積もりを作成",
new_quote_path,
class: "btn btn--primary",
data: { turbo: false } %>
Turbo Drive をオンオフして何が変わったかを、開発者ツールで確認できます。
Chromeであれば、検証の「ネットワーク」で、新たに要求されるリクエストの数が変わっているのを確認できます。
本チュートリアルでいうと「見積もりを作成」ボタンを押したとき以下の違いが出ます。
Turbo Drive オフ
-
Quotes#newHTMLリクエスト - favicon のロード
- CSSファイルのロード
- JavaScriptのロード
Turbo Drive オン
-
Quotes#newAjaxリクエスト - favicon のロード
アプリケーション全体で Turbo Drive を無効にする
以下のようにすることで、アプリケーション全体で Turbo Drive を無効にすることもできるようです。
import { Turbo } from "@hotwired/turbo-rails"
Turbo.session.drive = false
data-turbo-track="reload"とは？
先ほど、Turbo Drive のオン/オフで CSS と JavaScript のロードがあるかないかの違いが出ることが分かりました。しかし、CSS や JavaScript に変更があった場合、古い表示のままになってしまいます。
それを防いでくれるのが、data-turbo-track="reload"です。
data-turbo-track="reload"を持つDOM要素は、新しいリクエストごとに違いがないか比較して、違いがある場合はページ全体を再読み込みします。
デフォルトですでに設定されています。
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "application", "data-turbo-track": "reload", defer: true %>
data-turbo-track="reload"の動作を確認するために、「見積もりを作成」ボタンを押したときの挙動を、CSSに変更を加えた場合とそのままの場合で比べました。CSSに変更がある場合はリロードするし、変更がなければ高速化してくれて、賢いですね！
Turbo Drive のプログレスバー
Turbo Drive を利用していると、リンククリックやフォームの送信に対するブラウザ既定のプログレスバーは動作せず、代わりにCSSベースのプログレスバー(turbo-progress-barクラスのdiv要素）を表示するようになっています。
🔽 参考
チュートリアルでは、turbo-progress-barクラスに対してスタイルを追加し、オリジナルのプログレスバーに変身させました。（デフォルトではブルーでした）
ちなみに、プログレスバーの表示確認をするには、アクションを遅延させます。
class ApplicationController < ActionController::Base
before_action -> { sleep 3 }
end
これにて3章は終わり。Turbo Drive の少し深い部分の仕組みがわかって面白かったです。
🔽 次は4章をやっていきます。
-
横取り、妨害のような意味だそうです。インターセプト - Wikipedia ↩