Advanced Guides > Compotion API > Template Refs の翻訳 (#93)

* translate composition-api-template-refs

* [FIX] 訳し方を変更

* [FIX] レビュー内容を反映して日本語訳を修正

Author: konu96

src/guide/composition-api-template-refs.md

@@ -1,10 +1,11 @@
-## Template Refs
+## テンプレート参照
 
-> This section uses [single-file component](single-file-component.html) syntax for code examples
+> この節ではコード例で [単一ファイルコンポーネント](single-file-component.html)の文法を使用しています。
 
-> This guide assumes that you have already read the [Composition API Introduction](composition-api-introduction.html) and [Reactivity Fundamentals](reactivity-fundamentals.html). Read that first if you are new to Composition API.
+> このガイドはすでに [コンポジション API 導入](composition-api-introduction.html) を読んでいることを前提に書かれています。もしまだ読んでいないのなら、先に読みましょう。
 
-When using the Composition API, the concept of [reactive refs](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) and [template refs](component-template-refs.html) are unified. In order to obtain a reference to an in-template element or component instance, we can declare a ref as usual and return it from [setup()](composition-api-setup.html):
+コンポジション API を使うとき、 [リアクティブ参照](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) と [テンプレート参照](component-template-refs.html) のコンセプトは同じになります。
+テンプレート内の要素やコンポーネントインスタンスの参照を取得するために、 ref 変数を定義して [setup()](composition-api-setup.html) で返します。
 
 ```html
 <template>
@@ -19,7 +20,7 @@ When using the Composition API, the concept of [reactive refs](reactivity-fundam
       const root = ref(null)
 
       onMounted(() => {
-        // the DOM element will be assigned to the ref after initial render
+        // DOM 要素は初期描画の後に ref に代入されます
         console.log(root.value) // <div>This is a root element</div>
       })
 
@@ -31,9 +32,9 @@ When using the Composition API, the concept of [reactive refs](reactivity-fundam
 </script>
 ```
 
-Here we are exposing `root` on the render context and binding it to the div as its ref via `ref="root"`. In the Virtual DOM patching algorithm, if a VNode's `ref` key corresponds to a ref on the render context, the VNode's corresponding element or component instance will be assigned to the value of that ref. This is performed during the Virtual DOM mount / patch process, so template refs will only get assigned values after the initial render.
+描画コンテキストに `root` 変数を渡していて、`ref="root"` 経由で div 要素と束縛します。 仮想 DOM のパッチアルゴリズムの中で、 もし VNode の `ref` キーは描画コンテキストの ref に対応すると、VNode の対応する要素またはコンポーネントインスタンスに ref の値が割り当てられます。これは仮想 DOM のマウント/パッチ処理中に実行されるので、テンプレート refs では初期描画に値だけを取得できます。
 
-Refs used as templates refs behave just like any other refs: they are reactive and can be passed into (or returned from) composition functions.
+テンプレート参照は他の参照と似た挙動をします。つまり、リアクティブかつコンポジション関数に渡せる(または返せる)ことができます。
 
 ### Usage with JSX
 
@@ -47,15 +48,15 @@ export default {
         ref: root
       })
 
-    // with JSX
+    // JSX 記法
     return () => <div ref={root} />
   }
 }
 ```
 
 ### Usage inside `v-for`
 
-Composition API template refs do not have special handling when used inside `v-for`. Instead, use function refs to perform custom handling:
+コンポジション API のテンプレート参照を `v-for` 内部で使う時には特別な処理はされないです。代わりに、参照を提供する関数を使って独自処理を実行してください。
 
 ```html
 <template>
@@ -72,7 +73,7 @@ Composition API template refs do not have special handling when used inside `v-f
       const list = reactive([1, 2, 3])
       const divs = ref([])
 
-      // make sure to reset the refs before each update
+      // 忘れずにアップデート前に ref をリセットしてください 
       onBeforeUpdate(() => {
         divs.value = []
       })