Update translation turbo reference strams 183

turbo/reference/streams.md

@@ -2,12 +2,12 @@
 order: 3
 title: Turbo ストリーム
 description: Turbo ストリームのリファレンス
-commit: "e9e0628"
+commit: "4f4c385"
 ---
 
 # Turbo ストリーム
 
-## 7つのアクション
+## 8つのアクション
 
 ### Append 追加する
 target の dom_id によって指定されたコンテナに template タグ内のコンテンツを追加します。
@@ -25,13 +25,21 @@ target の dom_id によって指定されたコンテナに template タグ内
 <details>
 <summary>原文</summary>
 
-## The seven actions
+## The eight actions
 
 ### Append
 
 Appends the content within the template tag to the container designated by the target dom id.
 
-If the template’s first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of appended.
+```html
+<turbo-stream action="append" target="dom_id">
+  <template>
+    Content to append to container designated with the dom_id.
+  </template>
+</turbo-stream>
+```
+
+If the template's first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of appended.
 </details>
 
 ### Prepend 先頭に追加
@@ -55,7 +63,15 @@ target の dom_id によって指定されたコンテナに template タグ内
 
 Prepends the content within the template tag to the container designated by the target dom id.
 
-If the template’s first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of prepended.
+```html
+<turbo-stream action="prepend" target="dom_id">
+  <template>
+    Content to prepend to container designated with the dom_id.
+  </template>
+</turbo-stream>
+```
+
+If the template's first element has an id that is already used by a direct child inside the container targeted by dom_id, it is replaced instead of prepended.
 </details>
 
 ### Replace 置き換える
@@ -70,12 +86,40 @@ target の dom_id で指定された要素を置き換えます。
 </turbo-stream>
 ```
 
+`turbo-stream`要素に`[method="morph"]`属性を追加することで、ターゲットとなる dom_id で指定された要素をmorph経由で置き換えられます。
+
+```html
+<turbo-stream action="replace" method="morph" target="dom_id">
+  <template>
+    要素を置き換えるコンテンツ
+  </template>
+</turbo-stream>
+```
+
 <details>
 <summary>原文</summary>
 
-### Replace 
+### Replace
 
 Replaces the element designated by the target dom id.
+
+```html
+<turbo-stream action="replace" target="dom_id">
+  <template>
+    Content to replace the element designated with the dom_id.
+  </template>
+</turbo-stream>
+```
+
+The `[method="morph"]` attribute can be added to the `turbo-stream` element to replace the element designated by the target dom id via morph.
+
+```html
+<turbo-stream action="replace" method="morph" target="dom_id">
+  <template>
+    Content to replace the element.
+  </template>
+</turbo-stream>
+```
 </details>
 
 ### Update 更新する
@@ -90,12 +134,40 @@ target の dom_id で指定されたコンテナを template タグ内のコン
 </turbo-stream>
 ```
 
+`turbo-stream`要素に`[method="morph"]`属性を追加することで、ターゲットとなる dom_id で指定された要素の子要素のみを変形させられます。
+
+```html
+<turbo-stream action="update" method="morph" target="dom_id">
+  <template>
+    要素を置き換えるコンテンツ
+  </template>
+</turbo-stream>
+```
+
 <details>
 <summary>原文</summary>
 
 ### Update
 
 Updates the content within the template tag to the container designated by the target dom id.
+
+```html
+<turbo-stream action="update" target="dom_id">
+  <template>
+    Content to update to container designated with the dom_id.
+  </template>
+</turbo-stream>
+```
+
+The `[method="morph"]` attribute can be added to the `turbo-stream` element to morph only the children of the element designated by the target dom id.
+
+```html
+<turbo-stream action="update" method="morph" target="dom_id">
+  <template>
+    Content to replace the element.
+  </template>
+</turbo-stream>
+```
 </details>
 
 ### Remove 取り除く
@@ -113,6 +185,11 @@ target の dom_id で指定された要素を取り除く。
 ### Remove
 
 Removes the element designated by the target dom id.
+
+```html
+<turbo-stream action="remove" target="dom_id">
+</turbo-stream>
+```
 </details>
 
 ### Before 要素の前に挿入
@@ -133,6 +210,14 @@ target の dom_id で指定された要素の前に、 template タグ内のコ
 ### Before
 
 Inserts the content within the template tag before the element designated by the target dom id.
+
+```html
+<turbo-stream action="before" target="dom_id">
+  <template>
+    Content to place before the element designated with the dom_id.
+  </template>
+</turbo-stream>
+```
 </details>
 
 ### After 要素の前に挿入
@@ -153,6 +238,49 @@ target の dom_id で指定された要素の後に template タグ内のコン
 ### After
 
 Inserts the content within the template tag after the element designated by the target dom id.
+
+```html
+<turbo-stream action="after" target="dom_id">
+  <template>
+    Content to place after the element designated with the dom_id.
+  </template>
+</turbo-stream>
+```
+</details>
+
+### Refresh リフレッシュ
+
+新しいコンテンツをレンダリングするために [ページリフレッシュ](/turbo/handbook/page_refreshes/) を始めます。
+
+```html
+<!-- `[request-id]` が無い場合 -->
+<turbo-stream action="refresh"></turbo-stream>
+
+<!-- `[request-id]` で連続実行を防止 -->
+<turbo-stream action="refresh" request-id="abcd-1234"></turbo-stream>
+
+<!-- `[method]` および `[scroll]` によるリフレッシュ動作 -->
+<turbo-stream action="refresh" method="morph" scroll="preserve"></turbo-stream>
+```
+
+<details>
+<summary>原文</summary>
+
+### Refresh
+
+Initiates a [Page Refresh](https://turbo.hotwired.dev/handbook/page_refreshes) to render new content.
+
+```html
+<!-- without `[request-id]` -->
+<turbo-stream action="refresh"></turbo-stream>
+
+<!-- debounced with `[request-id]` -->
+<turbo-stream action="refresh" request-id="abcd-1234"></turbo-stream>
+
+<!-- refresh behavior with `[method]` and `[scroll]` -->
+<turbo-stream action="refresh" method="morph" scroll="preserve"></turbo-stream>
+```
+
 </details>
 
 ## 複数の要素に対してアクションを行う
@@ -176,6 +304,17 @@ Inserts the content within the template tag after the element designated by the
 ## Targeting Multiple Elements
 
 To target multiple elements with a single action, use the targets attribute with a CSS query selector instead of the target attribute.
+
+```html
+<turbo-stream action="remove" targets=".elementsWithClass">
+</turbo-stream>
+
+<turbo-stream action="after" targets=".elementsWithClass">
+  <template>
+    Content to place after the elements designated with the css query.
+  </template>
+</turbo-stream>
+```
 </details>
 
 ## Stream要素を処理する
@@ -194,3 +333,21 @@ Turbo can connect to any form of stream to receive and process stream actions. A
 A good way to wrap all this together is by using a custom element, like turbo-rails does with TurboCableStreamSourceElement.
 </details>
 
+## HTML内のストリーム要素
+
+Turbo ストリームは [カスタムHTML要素](https://developer.mozilla.org/ja/docs/Web/API/Web_components/Using_custom_elements)として実装されています。
+この要素は、要素がページの DOM に接続されたときにブラウザが呼び出す `connectedCallback` 関数の一部として解釈されます。
+
+つまり、DOM にレンダリングされたストリーム要素はすべて解釈されるということです。 解釈された後、Turbo は要素を DOM から削除します。具体的には、ページやフレームのコンテンツ HTML 内でストリームアクションをレンダリングすると、それらが実行されるということです。これを利用して、メインコンテンツの読み込みとは別に追加の副作用を実行できます。
+
+<details>
+<summary>原文</summary>
+
+## Stream Elements inside HTML
+
+Turbo streams are implemented as [a custom HTML element](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements).
+The element is interpreted as part of the `connectedCallback` function that the browser calls when the element is connected to the page dom.
+
+This means that any stream elements that are rendered into the dom will be interpreted. After being interpreted, Turbo will remove the element from the dom. More specifically, it means that rendering stream actions inside the page or frame content HTML will cause them to be executed. This can be used to execute additional sideffects beside the main content loading.
+
+</details>