Guide > Composition API > Setup の翻訳を追従 (#283)

* Note that props can be accessed in template directly

vuejs/docs@c05b8e6#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05

* fix: fixed link to unwrapping; close

vuejs/docs@b3a53a2#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05

* Resolve props template usage composition api

vuejs/docs@c84c5f3#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05

* docs: clarify the usage of toRefs and toRef for optional props

vuejs/docs@a502ebe#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05

* docs: shallow unwrap on setup

vuejs/docs@3e5e52e#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05

* fix: missing anchor link

* fix: follow spelling inconsistencies ruls #94

* fix: translate 'render function'

Author: naokie

src/api/application-config.md

@@ -38,7 +38,7 @@ app.config.errorHandler = (err, vm, info) => {
 }
 ```
 
-コンポーネントの描画関数とウォッチャーに捕捉されなかったエラーのハンドラを割り当てます。ハンドラには、アプリケーションのインスタンスとエラーが渡されて呼び出されます。
+コンポーネントの Render 関数とウォッチャに捕捉されなかったエラーのハンドラを割り当てます。ハンドラには、アプリケーションのインスタンスとエラーが渡されて呼び出されます。
 
 > エラートラッキングサービスの [Sentry](https://sentry.io/for/vue/) ならびに [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) は公式に連携のためのオプションを用意しています。
 

src/guide/composition-api-setup.md

@@ -1,12 +1,12 @@
 # セットアップ
 
-> このセクションではコード例に[単一ファイルコンポーネント](single-file-component.html)のシンタックスを使います。
+> このセクションではコード例に[単一ファイルコンポーネント](single-file-component.html)の構文を使います。
 
-> このガイドは[コンポジション API の導入](composition-api-introduction.html)と[リアクティブの基礎](reactivity-fundamentals.html)を既に読んでいることを想定しています。 コンポジション API に初めて触れる方は、まずそちらを読んでみてください。
+> このガイドは[Composition API の導入](composition-api-introduction.html)と[リアクティブの基礎](reactivity-fundamentals.html)を既に読んでいることを想定しています。 Composition API に初めて触れる方は、まずそちらを読んでみてください。
 
 ## 引数
 
-`setup` 関数を使う時、2 つの引数を取ります:
+`setup` 関数を使う時、2つの引数を取ります:
 
 1. `props`
 2. `context`
@@ -15,7 +15,7 @@
 
 ### プロパティ
 
-`setup` 関数の 第一引数は `props` 引数です。 標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい props が渡されたら更新されます。
+`setup` 関数の第1引数は `props` 引数です。 標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい props が渡されたら更新されます。
 
 ```js
 // MyBook.vue
@@ -34,7 +34,7 @@ export default {
 しかし、`props` はリアクティブなので、**ES6 の分割代入を使うことができません。** props のリアクティブを削除してしまうからです。
 :::
 
-もし、props を分割代入する必要がある場合は、`setup` 関数内で [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) を使うことによって安全に分割代入を行うことができます。
+もし、props を分割代入する必要がある場合は、`setup` 関数内で [toRefs](reactivity-fundamentals.html#リアクティブな状態の分割代入) を使うことによって分割代入を行うことができます:
 
 ```js
 // MyBook.vue
@@ -48,9 +48,23 @@ setup(props) {
 }
 ```
 
+`title` オプションのプロパティである場合、 `props` から抜けている可能性があります。その場合、 `toRefs` では `title` の ref はつくられません。代わりに `toRef` を使う必要があります:
+
+```js
+// MyBook.vue
+
+import { toRef } from 'vue'
+
+setup(props) {
+  const title = toRef(props, 'title')
+
+  console.log(title.value)
+}
+```
+
 ### コンテキスト
 
-`setup` 関数に渡される第二引数は `context` です。`context` は 3 つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。:
+`setup` 関数に渡される第2引数は `context` です。`context` は3つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。:
 
 ```js
 // MyBook.vue
@@ -69,7 +83,7 @@ export default {
 }
 ```
 
-`context` オブジェクトは一般的な JavaScript オブジェクトです。 すなわち、リアクティブではありません。これは `context` で ES6 分割代入を安全に使用できることを意味します。
+`context` オブジェクトは一般的な JavaScript オブジェクトです。すなわち、リアクティブではありません。これは `context` で ES6 分割代入を安全に使用できることを意味します。
 
 ```js
 // MyBook.vue
@@ -84,34 +98,37 @@ export default {
 
 ## コンポーネントプロパティへのアクセス
 
-`setup` が実行されるとき、 コンポーネントインスタンスはまだ作成されていません。そのため、以下のプロパティにのみアクセスすることができます。:
+`setup` が実行されるとき、 コンポーネントインスタンスはまだ作成されていません。そのため、以下のプロパティにのみアクセスすることができます:
 
 - `props`
 - `attrs`
 - `slots`
 - `emit`
 
-言い換えると、以下のコンポーネントオプションには**アクセスできません**。:
+言い換えると、以下のコンポーネントオプションには**アクセスできません**:
 
 - `data`
 - `computed`
 - `methods`
 
 ## テンプレートでの使用
 
-`setup` がオブジェクトを返す場合、コンポーネントのテンプレート内でオブジェクトのプロパティにアクセスすることができます。:
+`setup` がオブジェクトを返す場合、コンポーネントのテンプレート内でオブジェクトのプロパティにアクセスすることができ、 `setup` に渡された `props` のプロパティも同じようにアクセスできます:
 
 ```vue-html
 <!-- MyBook.vue -->
 <template>
-  <div>{{ readersNumber }} {{ book.title }}</div>
+  <div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
 </template>
 
 <script>
   import { ref, reactive } from 'vue'
 
   export default {
-    setup() {
+    props: {
+      collectionName: String
+    },
+    setup(props) {
       const readersNumber = ref(0)
       const book = reactive({ title: 'Vue 3 Guide' })
 
@@ -125,11 +142,11 @@ export default {
 </script>
 ```
 
-`setup` から返された [refs](../api/refs-api.html#ref) は、テンプレート内でアクセスされたときに[自動的にアンラップ](../api/refs-api.html#access-in-templates)されるので、テンプレート内で `.value` を使用すべきではないことに注意してください。
+`setup` から返された [refs](../api/refs-api.html#ref) は、テンプレート内でアクセスされたときに[自動的に浅いアンラップ](/guide/reactivity-fundamentals.html#ref-のアンラップ)されるので、テンプレート内で `.value` を使用すべきではないことに注意してください。
 
-## 描画関数での使用
+## レンダリング関数での使用
 
-`setup` は同じスコープで宣言されたリアクティブなステートを直接利用することができる描画関数を返すこともできます。:
+`setup` は同じスコープで宣言されたリアクティブなステートを直接利用することができるレンダリング関数を返すこともできます:
 
 ```js
 // MyBook.vue

src/guide/custom-directive.md

@@ -52,7 +52,7 @@ directives: {
 - `beforeUpdate`: 束縛された要素を含むコンポーネントの VNode が更新される前に呼ばれます。
 
 :::tip Note
-VNodes は[後で](render-function.html#the-virtual-dom-tree)詳細に扱います。描画関数を説明する時です。
+VNodes は[後で](render-function.html#the-virtual-dom-tree)詳細に扱います。Render 関数を説明する時です。
 :::
 
 - `updated`: 束縛された要素を含むコンポーネントの VNode **とその子コンポーネントの VNode** が更新された後に呼ばれます。
@@ -212,7 +212,7 @@ return withDirectives(h('div'), [[vDemo, test]])
 
 ここで `vDemo` はユーザによって記述されたディレクティブオブジェクトで、それは `mounted` や `updated` のフック関数を含みます。
 
-`withDirectives` は複製した VNode を返します。複製された VNode は VNode のライフサイクルフック (詳細は[描画関数](render-function.html)を参照) としてラップ、注入されたユーザのフック関数を持ちます:
+`withDirectives` は複製した VNode を返します。複製された VNode は VNode のライフサイクルフック (詳細は[Render 関数](render-function.html)を参照) としてラップ、注入されたユーザのフック関数を持ちます:
 
 ```js
 {

src/guide/migration/transition.md

@@ -52,8 +52,8 @@ v2.1.8 では `v-enter-to` トランジションクラスを導入して、 ente
 
 `<transition>` コンポーネントの関連するプロップ名も変更されます。
 
-- `leave-class` は `leave-from-class` に名前が変更されます。（描画関数や JSX では `leaveFromClass` と書くことができます）
-- `enter-class` は `enter-from-class` に名前が変更されます。（描画関数や JSX では `leaveFromClass` と書くことができます）
+- `leave-class` は `leave-from-class` に名前が変更されます。（Render 関数や JSX では `leaveFromClass` と書くことができます）
+- `enter-class` は `enter-from-class` に名前が変更されます。（Render 関数や JSX では `leaveFromClass` と書くことができます）
 
 ## 移行の戦略