Skip to content

「オプション API」の訳 #589

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Nov 27, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/api/composition-api.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
- `{Data} props`
- `{SetupContext} context`

オプション API を使うときの `this.$props` と同様に、`props` オブジェクトには明示的に宣言されたプロパティのみが含まれます。また、すべての宣言されたプロパティのキーは、親コンポーネントから渡されたかどうかに関わらず `props` オブジェクトに存在します。宣言されていない省略可能なプロパティは `undefined` という値になります。
Options API を使うときの `this.$props` と同様に、`props` オブジェクトには明示的に宣言されたプロパティのみが含まれます。また、すべての宣言されたプロパティのキーは、親コンポーネントから渡されたかどうかに関わらず `props` オブジェクトに存在します。宣言されていない省略可能なプロパティは `undefined` という値になります。

省略可能なプロパティがないことを確認する必要があるなら、デフォルト値として Symbol を指定できます:

Expand Down Expand Up @@ -149,7 +149,7 @@ const MyComponent = {

コンポーネントのインスタンスコンテキストは、ライフサイクルフックの同期的な実行中にも設定されます。その結果、ライフサイクルフック内で同期的に作成されたウォッチャと算出プロパティも、コンポーネントがアンマウントされるとき自動的に破棄されます。

- **オプション API のライフサイクルオプションと Composition API のマッピング**
- **Options API のライフサイクルオプションと Composition API のマッピング**

- ~~`beforeCreate`~~ -> `setup()` を使用
- ~~`created`~~ -> `setup()` を使用
Expand Down
10 changes: 5 additions & 5 deletions src/api/options-api.md
Original file line number Diff line number Diff line change
@@ -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)
6 changes: 3 additions & 3 deletions src/guide/composition-api-introduction.md
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ export default {

コンポーネントのオプション (`data`, `computed`, `methods`, `watch`) でまとめたロジックはたいていの場合は正しく動作します。しかし、コンポーネントがより大きくなれば、**論理的な関心事**のリストもまた大きくなります。これは、特に最初からコンポーネントを書いていない人々にとって、コンポーネントを読みづらく、理解しづらいものにするかもしれません。

![Vue オプション API: オプションの種類によってグループ分けされたコード](/images/options-api.png)
![Vue Options API: オプションの種類によってグループ分けされたコード](/images/options-api.png)

**論理的な関心事** が色でグループ化されている大きなコンポーネントを示す例。

Expand Down Expand Up @@ -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` のようになっています。

それらの関数はコンポーネントによってフックが呼び出されるときに実行されるコールバックを受け付けます。

Expand Down Expand Up @@ -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 {
Expand Down
3 changes: 1 addition & 2 deletions src/guide/composition-api-lifecycle-hooks.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,7 @@

[setup()](composition-api-setup.html) 内で、ライフサイクルフックを呼び出す方法は、次の表の通りです:


| オプション API | `setup` 内のフック |
| Options API | `setup` 内のフック |
| ----------------- | ------------------- |
| `beforeCreate` | 不要\* |
| `created` | 不要\* |
Expand Down
2 changes: 1 addition & 1 deletion src/guide/composition-api-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -194,4 +194,4 @@ export default {

## `this` の使用

**`setup()` 内では、`this` は現在のアクティブなインスタンスへの参照にはなりません。** `setup()` は他のコンポーネントオプションが解決される前に呼び出されるので、`setup()` 内の `this` は他のオプション内の `this` とは全く異なる振る舞いをします。 これは、`setup()` を他のオプション API と一緒に使った場合に混乱を引き起こす可能性があります。
**`setup()` 内では、`this` は現在のアクティブなインスタンスへの参照にはなりません。** `setup()` は他のコンポーネントオプションが解決される前に呼び出されるので、`setup()` 内の `this` は他のオプション内の `this` とは全く異なる振る舞いをします。 これは、`setup()` を他の Options API と一緒に使った場合に混乱を引き起こす可能性があります。
2 changes: 1 addition & 1 deletion src/guide/migration/array-refs.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ Vue 3 では、この記述では `$refs` に配列が作成されなくなり
<div v-for="item in list" :ref="setItemRef"></div>
```

オプション API を使う場合
Options API を使う場合

```js
export default {
Expand Down
2 changes: 1 addition & 1 deletion src/guide/typescript-support.md
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@ export default defineComponent({
</script>
```

## オプション API とともに使用する
## Options API とともに使用する

TypeScript は明示的に型を定義することなく、ほとんどの型を推論できるようにあるべきです。例えば、数値である `count` プロパティを持つコンポーネントがある場合、文字列に特有のメソッドを呼び出すとエラーになります:

Expand Down