everyleaf · yasu551 · May 7, 2024 · Jun 17, 2024 · Jun 17, 2024 · Jun 17, 2024
diff --git a/turbo/handbook/drive.md b/turbo/handbook/drive.md
@@ -16,6 +16,8 @@ Turbo ドライブは、ページ・ナビゲーションを、ある*アクシ
 
 アクセスは、ページの描画のために、クリックから始まるすべてのナビゲーション・ライフサイクルを要求します。そのサイクルには、ブラウザ履歴の更新や、ネットワーク・リクエストの発行、キャッシュからのページのコピーの再構築、最終的なレスポンスの描画、スクロール位置の更新も含まれます。
 
+描画中、Turbo ドライブはリクエストしているドキュメントの`<body>`の内容をレスポンスのドキュメントの`<body>`で置き換えます。`<head>`の内容もマージし、必要に応じて`<html>`要素の`lang`属性を更新します。`<head>`要素を置き換える代わりにマージするポイントは、`<title>`または`<meta>`タグが変わった時にそれらは期待どおり更新され、アセットのリンクが変わらない時にそのリンクに対して再び処理しないところです。
+
 アクセスには二つの種類があります。_アプリケーション・アクセス_、_advance_ あるいは _replace_ のアクションを伴うものと、_リストア・アクセス_、_restore_ のアクションを伴うものです。
 
 ## アプリケーション・アクセス
@@ -78,16 +80,53 @@ Application visits can be canceled before they start, regardless of whether they
 
 リストア・アクセスは、`turbo:before-visit` を発火しないのでキャンセルすることができません。 Turbo ドライブは、リストア・アクセスを、*すでに存在する*アクセス履歴への応答の場合に発行します。よくあるのは、ブラウザバックやブラウザで前に進む場合です。
 
+## 描画のカスタム
-## 描画のカスタム
+## 描画処理をカスタマイズする
-## 描画のカスタム
+## 描画処理をカスタマイズする
+
+ドキュメント全体に対して `turbo:before-render` イベントリスナーを追加し、 `event.detail.render` プロパティをオーバーライドすることで、アプリケーションの描画プロセスをカスタマイズできます。
+
+例えば、[morphdom]で、リクエストを投げたドキュメントの `<body>` 要素を、レスポンスのドキュメントにある `<body>` 要素にマージできます。
+
+```javascript
+import morphdom from "morphdom"
+
+addEventListener("turbo:before-render", (event) => {
+  event.detail.render = (currentElement, newElement) => {
+    morphdom(currentElement, newElement)
+  }
+})
+```
+
+[morphdom]: https://github.com/patrick-steele-idem/morphdom
+
+<details>
+<summary>原文</summary>
+
+Applications can customize the rendering process by adding a document-wide `turbo:before-render` event listener and overriding the `event.detail.render` property.
+
+For example, you could merge the response document's `<body>` element into the requesting document's `<body>` element with [morphdom](https://github.com/patrick-steele-idem/morphdom):
+
+```javascript
+import morphdom from "morphdom"
+
+addEventListener("turbo:before-render", (event) => {
+  event.detail.render = (currentElement, newElement) => {
+    morphdom(currentElement, newElement)
+  }
+})
+```
+
+</details>
+
 ## 描画の一時停止
 
-アプリケーションは描画を一時停止して、実行前に追加で下準備をすることができます。
+アプリケーションは描画を一時停止して、続行する前に追加で下準備をすることができます。
 
 `turbo:before-render` イベントを待ち受けることで、描画が始まろうとする瞬間に気づくことができます。そこで、`event.preventDefault()` で描画を停止させましょう。下準備が終わったら、`event.detail.resume()` を呼ぶことで描画を再開します。
 
 アクセスにexitのアニメーションを追加する例です。
 
 ```javascript
-document.addEventListener('turbo:before-render', async (event) => {
+document.addEventListener("turbo:before-render", async (event) => {
   event.preventDefault()
 
   await animateOut()
@@ -105,11 +144,11 @@ document.addEventListener('turbo:before-render', async (event) => {
 リクエストに `Authorization` ヘッダを設定する例です。
 
 ```javascript
-document.addEventListener('turbo:before-fetch-request', async (event) => {
+document.addEventListener("turbo:before-fetch-request", async (event) => {
   event.preventDefault()
 
   const token = await getSessionToken(window.app)
-  event.detail.fetchOptions.headers['Authorization'] = `Bearer ${token}`
+  event.detail.fetchOptions.headers["Authorization"] = `Bearer ${token}`
 
   event.detail.resume()
 })
@@ -127,6 +166,31 @@ document.addEventListener('turbo:before-fetch-request', async (event) => {
 
 アクセシビリティの観点からも、 GET 以外のリクエストには実際のフォームとボタンを使うのが望ましいでしょう。
 
+## アクセス前に確認ダイアログを表示する
+
+リンクに `data-turbo-confirm` 属性を付けると、アクセス前に確認ダイアログが表示できます。
+
+```html
+<a href="/articles" data-turbo-confirm="このページから離れますか？">Back to articles</a>
+<a href="/articles/54" data-turbo-method="delete" data-turbo-confirm="本当に記事を削除しますか？">Delete the article</a>
+```
+
+確認時に呼ぶメソッドは `Turbo.setConfirmMethod` を使って、変更できます。確認時に呼ぶメソッドのデフォルトは、ブラウザに組み込まれてる `confirm` です。
+
+<details>
+<summary>原文</summary>
+
+Decorate links with `data-turbo-confirm`, and confirmation will be required for a visit to proceed.
+
+```html
+<a href="/articles" data-turbo-confirm="Do you want to leave this page?">Back to articles</a>
+<a href="/articles/54" data-turbo-method="delete" data-turbo-confirm="Are you sure you want to delete the article?">Delete the article</a>
+```
+
+Use `Turbo.setConfirmMethod` to change the method that gets called for confirmation. The default is the browser's built in `confirm`.
+
+</details>
+
 ## 特定のリンク/フォームでの Turbo ドライブの無効化
 
  Turbo ドライブは、対象となる要素かその親要素で `data-turbo="false"` を宣言することで、要素単位で無効化することができます。
@@ -167,6 +231,60 @@ import { Turbo } from "@hotwired/turbo-rails"
 Turbo.session.drive = false
 ```
 
+## ビュートランジション
+
+[ビュートランジション API]を[サポートしているブラウザ]では、Turboはページ間を移動するときにビュートランジションをトリガーします。
+
+Turbo は、現在と次のページの両方に以下の `<meta>` 要素があるときに、ビュートランジションをトリガーします。
+
+```html
+<meta name="view-transition" content="same-origin" />
+```
+
+Turbo は `<html>` 要素に `data-turbo-visit-direction` 属性を追加することで、トランジションの方向を指定できます。その属性の値として以下のものを使えます。
+
+- `forward`: ページを全て変える方向
+- `back`: ページを前のページに戻す方向
+- `none`: ページの一部を置き換える方向
+
+この属性を使えば、トランジション中で実行されるアニメーションをカスタマイズできます。
+
+```css
+html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar):only-child {
+  animation: slide-to-right 0.5s ease-out;
+}
+```
+
+[サポートしているブラウザ]: https://caniuse.com/?search=View%20Transition%20API
+[ビュートランジション API]: https://developer.mozilla.org/ja/docs/Web/API/View_Transitions_API
+
+<details>
+<summary>原文</summary>
+
+In [browsers that support](https://caniuse.com/?search=View%20Transition%20API) the [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/View_Transitions_API) Turbo can trigger view transitions when navigating between pages.
+
+Turbo triggers a view transition when both the current and the next page have this meta tag:
+
+```
+<meta name="view-transition" content="same-origin" />
+```
+
+Turbo also adds a `data-turbo-visit-direction` attribute to the `<html>` element to indicate the direction of the transition. The attribute can have one of the following values:
+
+- `forward` in advance visits.
+- `back` in restoration visits.
+- `none` in replace visits.
+
+You can use this attribute to customize the animations that are performed during a transition:
+
+```css
+html[data-turbo-visit-direction="forward"]::view-transition-old(sidebar):only-child {
+  animation: slide-to-right 0.5s ease-out;
+}
+```
+
+</details>
+
 ## 進行状況を表示する
 
  Turbo ドライブのナビゲーション中、ブラウザはその進行状況インジケータを表示しません。 Turbo ドライブは、リクエスト発行中のフィードバックを示すため、CSS ベースのプログレスバーを導入しています。
@@ -198,11 +316,9 @@ Turbo.session.drive = false
 
 ## アセット変更時のリロード
 
+前述した通り、Turbo ドライブは `<head>` 要素のコンテントをマージします。しかし、CSS または JavaScript が変更された場合、これらCSS、JavaScriptのマージは既存のものを評価した上で行われます。大抵、このマージは厄介なコンフリクトを引き起こします。そのような場合、Ajaxではない標準のリクエストで新しいドキュメントを完全な形で取得する必要があります。
 
- Turbo ドライブは、あるページから別のページへの遷移時に `<head>` 内のアセット要素のURLを追跡し、URLが変更されていればフル・リロードを発行します。これによってユーザーは、最新のアプリケーションのスクリプトやスタイルを入手できます。
-
-
-アセット要素を `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけます。識別子は番号でも、最終更新日時でもよいですし、アセットの内容のダイジェストならもっといいでしょう。次の例のようにします。
+これは、アセット要素に `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけるだけで実現できます。識別子は番号でも、最終更新日時でもよいですし、アセットの内容のダイジェストならもっといいでしょう。次の例のようにします。
-これは、アセット要素に `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけるだけで実現できます。識別子は番号でも、最終更新日時でもよいですし、アセットの内容のダイジェストならもっといいでしょう。次の例のようにします。
+これは、アセット要素に `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけるだけで実現できます。識別子は番号でも、最終更新日時でもよいですし、次の例のようにアセットの内容のダイジェストならもっといいでしょう。
-これは、アセット要素に `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけるだけで実現できます。識別子は番号でも、最終更新日時でもよいですし、アセットの内容のダイジェストならもっといいでしょう。次の例のようにします。
+これは、アセット要素に `data-turbo-track="reload"` をつけてアノテーションし、アセットのURLにバージョン識別番号をつけるだけで実現できます。識別子は番号でも、最終更新日時でもよいですし、次の例のようにアセットの内容のダイジェストならもっといいでしょう。
 
 ```html
 <head>
@@ -289,4 +405,173 @@ Turbo が POST リクエストに通常の200ステータスの応答を許さ
 ## フォーム送信後のストリーミング
 
 サーバーはフォームの送信に対して、レスポンス・ボディ内の一つ以上の `<turbo-stream>` 要素を伴う `Content-Type: text/vnd.turbo-stream.html` [Turboストリーム](/turbo/handbook/streams)メッセージで応答することもあります。この応答によって、ナビゲーションなしに、ページの複数箇所を更新することができます。
+
+## ホバーでリンク先のプリフェッチ
+
+Turbo は、ユーザーがリンクをクリックする前に発生した`mouseenter` イベントでリンク先を自動で読み込みます。これにより、リンク・ナビゲーションの待ち時間が短縮されます。通常、クリック・ナビゲーション単位で500から800ミリ秒の速度が向上します。
+
+リンク先のプリフェッチは、Turbo v8からデフォルトで有効になっています。ただ、以下のメタタグをページに追加すれば、無効化できます。
+
+```html
+<meta name="turbo-prefetch" content="false">
+```
+
+ユーザーが少しの間だけリンクをホバーしただけでリンク先をプリフェッチしないように、Turbo はリンク先をプリフェッチする前に100ミリ秒待ちます。
+
+HTML要素、あるいは、その祖先に `data-turbo-prefetch="false"`をつけることで、プリフェッチ機能を要素ごとに無効化できます。
+
+```html
+<html>
+  <head>
+    <meta name="turbo-prefetch" content="true">
+  </head>
+  <body>
+    <a href="/articles">Articles</a> <!-- このリンク先はプリフェッチされます -->
+    <a href="/about" data-turbo-prefetch="false">About</a> <!-- このリンク先はプリフェッチされません -->
+    <div data-turbo-prefetch="false"`>
+      <!-- このdiv内のリンクはプリフェッチされません -->
+    </div>
+  </body>
+</html>
+```
+
+`turbo:before-prefetch` イベントをインターセプトして `event.preventDefault()` を呼ぶことで、プログラムでプリフェッチ機能を無効化できます。
+
+```javascript
+document.addEventListener("turbo:before-prefetch", (event) => {
+  if (isSavingData() || hasSlowInternet()) {
+    event.preventDefault()
+  }
+})
+
+function isSavingData() {
+  return navigator.connection?.saveData
+}
+
+function hasSlowInternet() {
+  return navigator.connection?.effectiveType === "slow-2g" ||
+         navigator.connection?.effectiveType === "2g"
+}
+```
+
+
+<details>
+<summary>原文</summary>
+
+Turbo can also speed up perceived link navigation latency by automatically loading links on `mouseenter` events, and before the user clicks the link. This usually leads to a speed bump of 500-800ms per click navigation.
+
+Prefetching links is enabled by default since Turbo v8, but you can disable it by adding this meta tag to your page:
+
+```html
+<meta name="turbo-prefetch" content="false">
+```
+
+To avoid prefetching links that the user is briefly hovering, Turbo waits 100ms after the user hovers over the link before prefetching it. But you may want to disable the prefetching behavior on certain links leading to pages with expensive rendering.
+
+You can disable the behavior on a per-element basis by annotating the element or any of its ancestors with `data-turbo-prefetch="false"`.
+
+```html
+<html>
+  <head>
+    <meta name="turbo-prefetch" content="true">
+  </head>
+  <body>
+    <a href="/articles">Articles</a> <!-- This link is prefetched -->
+    <a href="/about" data-turbo-prefetch="false">About</a> <!-- Not prefetched -->
+    <div data-turbo-prefetch="false"`>
+      <!-- Links inside this div will not be prefetched -->
+    </div>
+  </body>
+</html>
+```
+
+You can also disable the behaviour programatically by intercepting the `turbo:before-prefetch` event and calling `event.preventDefault()`.
+
+```javascript
+document.addEventListener("turbo:before-prefetch", (event) => {
+  if (isSavingData() || hasSlowInternet()) {
+    event.preventDefault()
+  }
+})
+
+function isSavingData() {
+  return navigator.connection?.saveData
+}
+
+function hasSlowInternet() {
+  return navigator.connection?.effectiveType === "slow-2g" ||
+         navigator.connection?.effectiveType === "2g"
+}
+```
+</details>
+
+## リンク先をキャッシュにプリロード
+
+[data-turbo-preload] 属性を使えば、リンク先をTurbo ドライブのキャッシュにプリロードできます。
+
+これにより、ページに初めてアクセスする前でもページのプレビューが提供され、ページアクセスが高速に感じられます。これはアプリケーション上で最も重要なページのプリロードに使えます。過剰な使用は、不要なコンテントを読み込むことになるので、避けてください。
+
+すべての `<a>` 要素がプリロードされるわけではありません。以下のような `[data-turbo-preload]` 属性を持つリンクはプリロードされません。
+
+* 他のドメインにアクセスするリンク
+* ある `<turbo-frame>` 要素に対して適用される `[data-turbo-frame]` 属性を持つリンク
+* 先祖要素の `<turbo-frame>` に対して適用されるリンク
+* `[data-turbo="false"]` 属性を持つリンク
+* `[data-turbo-stream]` 属性を持つリンク
+* `[data-turbo-method]` 属性を持つリンク
+* 先祖要素が `[data-turbo="false"]` 属性を持つリンク
+* 先祖要素が `[data-turbo-prefetch="false"]` 属性を持つリンク
+
 <br><br>
+
+プリロードされた `<a>` 要素は [turbo:before-fetch-request] と [turbo:before-fetch-response] イベントをディスパッチすることに注意してください。`turbo:before-fetch-request` イベントがプリロードにより発生したのかそれとも他のメカニズムにより発生したのかの区別は、リクエストの `X-Sec-Purpose` ヘッダーに `"prefetch"`がセットされているかどうかで確認できます（`X-Sec-Purpose` ヘッダーの値は `event.detail.fetchOptions.headers["X-Sec-Purpose"]` プロパティから取得できます）。
+
+```js
+addEventListener("turbo:before-fetch-request", (event) => {
+  if (event.detail.fetchOptions.headers["X-Sec-Purpose"] === "prefetch") {
+    // 追加のプリロード設定を行う
+  } else {
+    // 何かを行う
+  }
+})
+```
+
+
+[data-turbo-preload]: /hotwire_ja/turbo/reference/attributes#data-attributes
+[turbo:before-fetch-request]: /hotwire_ja/turbo/reference/events#turbo%3Abefore-fetch-request
+[turbo:before-fetch-response]: /hotwire_ja/turbo/reference/events#turbo%3Abefore-fetch-response
+
+<details>
+<summary>原文</summary>
+
+Preload links into Turbo Drive's cache using the [data-turbo-preload][] boolean attribute.
+
+This will make page transitions feel lightning fast by providing a preview of a page even before the first visit. Use it to preload the most important pages in your application. Avoid over usage, as it will lead to loading content that is not needed.
+
+Not every `<a>` element can be preloaded. The `[data-turbo-preload]` attribute
+won't have any effect on links that:
+
+* navigate to another domain
+* have a `[data-turbo-frame]` attribute that drives a `<turbo-frame>` element
+* drive an ancestor `<turbo-frame>` element
+* have the `[data-turbo="false"]` attribute
+* have the `[data-turbo-stream]` attribute
+* have a `[data-turbo-method]` attribute
+* have an ancestor with the `[data-turbo="false"]` attribute
+* have an ancestor with the `[data-turbo-prefetch="false"]` attribute
+
+It also dovetails nicely with pages that leverage [Eager-Loading Frames](/reference/frames#eager-loaded-frame) or [Lazy-Loading Frames](/reference/frames#lazy-loaded-frame). As you can preload the structure of the page and show the user a meaningful loading state while the interesting content loads.
+<br><br>
+
+Note that preloaded `<a>` elements will dispatch [turbo:before-fetch-request](/reference/events) and [turbo:before-fetch-response](/reference/events) events. To distinguish a preloading `turbo:before-fetch-request` initiated event from an event initiated by another mechanism, check whether the request's `X-Sec-Purpose` header (read from the `event.detail.fetchOptions.headers["X-Sec-Purpose"]` property) is set to `"prefetch"`:
+
+```js
+addEventListener("turbo:before-fetch-request", (event) => {
+  if (event.detail.fetchOptions.headers["X-Sec-Purpose"] === "prefetch") {
+    // do additional preloading setup…
+  } else {
+    // do something else…
+  }
+})
+```
+</details>