refactor: usage 'options api'

Author: naokie

src/api/composition-api.md

@@ -11,7 +11,7 @@
   - `{Data} props`
   - `{SetupContext} context`
 
-  オプション API を使うときの `this.$props` と同様に、`props` オブジェクトには明示的に宣言されたプロパティのみが含まれます。また、すべての宣言されたプロパティのキーは、親コンポーネントから渡されたかどうかに関わらず `props` オブジェクトに存在します。宣言されていない省略可能なプロパティは `undefined` という値になります。
+  Options API を使うときの `this.$props` と同様に、`props` オブジェクトには明示的に宣言されたプロパティのみが含まれます。また、すべての宣言されたプロパティのキーは、親コンポーネントから渡されたかどうかに関わらず `props` オブジェクトに存在します。宣言されていない省略可能なプロパティは `undefined` という値になります。
 
   省略可能なプロパティがないことを確認する必要があるなら、デフォルト値として Symbol を指定できます:
 
@@ -149,7 +149,7 @@ const MyComponent = {
 
 コンポーネントのインスタンスコンテキストは、ライフサイクルフックの同期的な実行中にも設定されます。その結果、ライフサイクルフック内で同期的に作成されたウォッチャと算出プロパティも、コンポーネントがアンマウントされるとき自動的に破棄されます。
 
-- **オプション API のライフサイクルオプションと Composition API のマッピング**
+- **Options API のライフサイクルオプションと Composition API のマッピング**
 
   - ~~`beforeCreate`~~ -> `setup()` を使用
   - ~~`created`~~ -> `setup()` を使用

src/api/options-api.md

@@ -1,10 +1,10 @@
-# オプション API
+# Options API
 
-オプション API には、次のようなセクションがあります:
+Options API には、次のようなセクションがあります:
 
 - [Data](/api/options-data.html)
 - [DOM](/api/options-dom.html)
-- [Lifecycle Hooks](/api/options-lifecycle-hooks.html)
-- [Assets](/api/options-assets.html)
+- [ライフサイクルフック](/api/options-lifecycle-hooks.html)
+- [アセット](/api/options-assets.html)
 - [Composition](/api/options-composition.html)
-- [Miscellaneous](/api/options-misc.html)
+- [その他](/api/options-misc.html)

src/guide/composition-api-introduction.md

@@ -57,7 +57,7 @@ export default {
 
 コンポーネントのオプション (`data`, `computed`, `methods`, `watch`) でまとめたロジックはたいていの場合は正しく動作します。しかし、コンポーネントがより大きくなれば、**論理的な関心事**のリストもまた大きくなります。これは、特に最初からコンポーネントを書いていない人々にとって、コンポーネントを読みづらく、理解しづらいものにするかもしれません。
 
-![Vue オプション API: オプションの種類によってグループ分けされたコード](/images/options-api.png)
+![Vue Options API: オプションの種類によってグループ分けされたコード](/images/options-api.png)
 
 **論理的な関心事** が色でグループ化されている大きなコンポーネントを示す例。
 
@@ -242,7 +242,7 @@ export default {
 
 ### ライフサイクルフックを `setup` の中に登録する
 
-オプション API に比べて Composition API の機能を完全にするには、ライフサイクルフックを `setup` の中に登録する必要があります。これは Vue から提供されるいくつかの新しい関数のおかげで可能になりました。 Composition API におけるライフサイクルフックはオプション API と同様の名称ですが、`on` というプレフィックスが付いています。例: `mounted` は `onMounted` のようになっています。
+Options API に比べて Composition API の機能を完全にするには、ライフサイクルフックを `setup` の中に登録する必要があります。これは Vue から提供されるいくつかの新しい関数のおかげで可能になりました。 Composition API におけるライフサイクルフックは Options API と同様の名称ですが、`on` というプレフィックスが付いています。例: `mounted` は `onMounted` のようになっています。
 
 それらの関数はコンポーネントによってフックが呼び出されるときに実行されるコールバックを受け付けます。
 
@@ -292,7 +292,7 @@ watch(counter, (newValue, oldValue) => {
 
 `counter.value = 5` のように `counter` が更新されたときは、ウォッチはコールバック (第 2 引数) をトリガーして実行します。この場合は、コンソールに `'The new counter value is: 5'` を出力します。
 
-**以下はオプション API と同様です:**
+**以下は Options API と同様です:**
 
 ```js
 export default {

src/guide/composition-api-lifecycle-hooks.md

@@ -10,8 +10,7 @@
 
 [setup()](composition-api-setup.html) 内で、ライフサイクルフックを呼び出す方法は、次の表の通りです:
 
-
-| オプション API      | `setup` 内のフック   |
+| Options API      | `setup` 内のフック   |
 | ----------------- | ------------------- |
 | `beforeCreate`    | 不要\*               |
 | `created`         | 不要\*               |

src/guide/composition-api-setup.md

@@ -194,4 +194,4 @@ export default {
 
 ## `this` の使用
 
-**`setup()` 内では、`this` は現在のアクティブなインスタンスへの参照にはなりません。** `setup()` は他のコンポーネントオプションが解決される前に呼び出されるので、`setup()` 内の `this` は他のオプション内の `this` とは全く異なる振る舞いをします。 これは、`setup()` を他のオプション API と一緒に使った場合に混乱を引き起こす可能性があります。
+**`setup()` 内では、`this` は現在のアクティブなインスタンスへの参照にはなりません。** `setup()` は他のコンポーネントオプションが解決される前に呼び出されるので、`setup()` 内の `this` は他のオプション内の `this` とは全く異なる振る舞いをします。 これは、`setup()` を他の Options API と一緒に使った場合に混乱を引き起こす可能性があります。

src/guide/migration/array-refs.md

@@ -14,7 +14,7 @@ Vue 3 では、この記述では `$refs` に配列が作成されなくなり
 <div v-for="item in list" :ref="setItemRef"></div>
 ```
 
-オプション API を使う場合
+Options API を使う場合
 
 ```js
 export default {

src/guide/typescript-support.md

@@ -114,7 +114,7 @@ export default defineComponent({
 </script>
 ```
 
-## オプション API とともに使用する
+## Options API とともに使用する
 
 TypeScript は明示的に型を定義することなく、ほとんどの型を推論できるようにあるべきです。例えば、数値である `count` プロパティを持つコンポーネントがある場合、文字列に特有のメソッドを呼び出すとエラーになります: