diff --git a/src/guide/composition-api-setup.md b/src/guide/composition-api-setup.md index 77514158..d2ae0aa7 100644 --- a/src/guide/composition-api-setup.md +++ b/src/guide/composition-api-setup.md @@ -1,21 +1,21 @@ -# Setup +# セットアップ -> 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)と[リアクティブの基礎](reactivity-fundamentals.html)を既に読んでいることを想定しています。 コンポジション API に初めて触れる方は、まずそちらを読んでみてください。 -## Arguments +## 引数 -When using the `setup` function, it will take two arguments: +`setup` 関数を使う時、2 つの引数を取ります: 1. `props` 2. `context` -Let's dive deeper into how each argument can be used. +それぞれの引数がどのように使われるのか、深く掘り下げてみましょう。 -### Props +### プロパティ -The first argument in the `setup` function is the `props` argument. Just as you would expect in a standard component, `props` inside of a `setup` function are reactive and will be updated when new props are passed in. +`setup` 関数の 第一引数は `props` 引数です。 標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい props が渡されたら更新されます。 ```js // MyBook.vue @@ -31,10 +31,10 @@ export default { ``` :::warning -However, because `props` are reactive, you **cannot use ES6 destructuring** because it will remove props reactivity. +しかし、`props` はリアクティブなので、props のリアクティブを削除してしまうため、**ES6 の分割代入を使うことができません。** ::: -If you need to destructure your props, you can do this safely by utilizing the [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) inside of the `setup` function. +もし、props を分割代入する必要がある場合は、`setup` 関数内で [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) を使うことによって安全に分割代入を行うことができます。 ```js // MyBook.vue @@ -48,9 +48,9 @@ setup(props) { } ``` -### Context +### コンテキスト -The second argument passed to the `setup` function is the `context`. The `context` is a normal JavaScript object that exposes three component properties: +`setup` 関数に渡される第二引数は `context` です。`context` は 3 つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。: ```js // MyBook.vue @@ -69,7 +69,7 @@ export default { } ``` -The `context` object is a normal JavaScript object, i.e., it is not reactive, this means you can safely use ES6 destructuring on `context`. +`context` オブジェクトは一般的な JavaScript オブジェクトです。 すなわち、リアクティブではありません。これは `context` で ES6 分割代入を安全に使用できることを意味します。 ```js // MyBook.vue @@ -80,26 +80,26 @@ export default { } ``` -`attrs` and `slots` are stateful objects that are always updated when the component itself is updated. This means you should avoid destructuring them and always reference properties as `attrs.x` or `slots.x`. Also note that unlike `props`, `attrs` and `slots` are **not** reactive. If you intend to apply side effects based on `attrs` or `slots` changes, you should do so inside an `onUpdated` lifecycle hook. +`attrs` と `slots` はステートフルなオブジェクトです。コンポーネント自身が更新されたとき、常に更新されます。 つまり、分割代入の使用を避け、`attrs.x` や `slots.x` のようにプロパティを常に参照する必要があります。 また、`props`とは異なり、 `attrs` と `slots` はリアクティブ**ではない**ということに注意してください。 もし、`attrs` か `slots` の変更による副作用を適用したいのなら、`onUpdated` ライフサイクルフックの中で行うべきです。 -## Accessing Component Properties +## コンポーネントプロパティへのアクセス -When `setup` is executed, the component instance has not been created yet. As a result, you will only be able to access the following properties: +`setup` が実行されるとき、 コンポーネントインスタンスはまだ作成されていません。そのため、以下のプロパティにのみアクセスすることができます。: - `props` - `attrs` - `slots` - `emit` -In other words, you **will not have access** to the following component options: +言い換えると、以下のコンポーネントオプションには**アクセスできません**。: - `data` - `computed` - `methods` -## Usage with Templates +## テンプレートでの使用 -If `setup` returns an object, the properties on the object can be accessed in the component's template: +`setup` がオブジェクトを返す場合、コンポーネントのテンプレート内でオブジェクトのプロパティにアクセスすることができます。: ```vue-html @@ -125,11 +125,11 @@ If `setup` returns an object, the properties on the object can be accessed in th ``` -Note that [refs](../api/refs-api.html#ref) returned from `setup` are [automatically unwrapped](../api/refs-api.html#access-in-templates) when accessed in the template so you shouldn't use `.value` in templates. +`setup` から返された [refs](../api/refs-api.html#ref) は、テンプレート内でアクセスされたときに[自動的にアンラップ](../api/refs-api.html#access-in-templates)されるので、テンプレート内で `.value` を使用すべきではないことに注意してください。 -## Usage with Render Functions +## 描画関数での使用 -`setup` can also return a render function which can directly make use of the reactive state declared in the same scope: +`setup` は同じスコープで宣言されたリアクティブなステートを直接利用することができる描画関数を返すこともできます。: ```js // MyBook.vue @@ -140,12 +140,12 @@ export default { setup() { const readersNumber = ref(0) const book = reactive({ title: 'Vue 3 Guide' }) - // Please note that we need to explicitly expose ref value here + // ここでは明示的に ref の値を公開する必要があることに注意してください。 return () => h('div', [readersNumber.value, book.title]) } } ``` -## Usage of `this` +## `this` の使用 -**Inside `setup()`, `this` won't be a reference to the current active instance** Since `setup()` is called before other component options are resolved, `this` inside `setup()` will behave quite differently from `this` in other options. This might cause confusions when using `setup()` along other Options API. +**`setup()` 内では、`this` は現在のアクティブなインスタンスへの参照にはなりません。** `setup()` は他のコンポーネントオプションが解決される前に呼び出されるので、`setup()` 内の`this` は他のオプション内の `this`とは全く異なる振る舞いをします。 これは、`setup()` を他のオプション API と一緒に使った場合に混乱を引き起こす可能性があります。