From e8c4124a8c166eb2ab5cb1bbb6bfb3669c9eff01 Mon Sep 17 00:00:00 2001 From: Jun Shindo <46585162+jay-es@users.noreply.github.com> Date: Mon, 19 Jun 2023 22:24:27 +0900 Subject: [PATCH 1/4] api, glossary --- src/api/application.md | 2 +- src/api/built-in-components.md | 20 ++++++++++---------- src/api/built-in-directives.md | 20 ++++++++++---------- src/api/built-in-special-elements.md | 12 ++++++------ src/api/component-instance.md | 8 ++++---- src/api/composition-api-setup.md | 8 ++++---- src/api/general.md | 8 ++++---- src/api/options-composition.md | 4 ++-- src/api/options-lifecycle.md | 2 +- src/api/options-misc.md | 4 ++-- src/api/options-state.md | 22 +++++++++++----------- src/api/reactivity-utilities.md | 2 +- src/api/render-function.md | 24 ++++++++++++------------ src/api/sfc-script-setup.md | 14 +++++++------- src/api/utility-types.md | 14 +++++++------- src/glossary/index.md | 12 ++++++------ 16 files changed, 88 insertions(+), 88 deletions(-) diff --git a/src/api/application.md b/src/api/application.md index d297d2012..07d432ea7 100644 --- a/src/api/application.md +++ b/src/api/application.md @@ -12,7 +12,7 @@ - **詳細** - 第 1 引数はルートコンポーネントです。第 2 引数 (省略可能) は、ルートコンポーネントに渡されるプロパティです。 + 第 1 引数はルートコンポーネントです。第 2 引数 (省略可能) は、ルートコンポーネントに渡される props です。 - **例** diff --git a/src/api/built-in-components.md b/src/api/built-in-components.md index eec2bbb8f..4da4330af 100644 --- a/src/api/built-in-components.md +++ b/src/api/built-in-components.md @@ -13,7 +13,7 @@ pageClass: api import { h, Transition } from 'vue' h(Transition, { - /* プロパティ */ + /* props */ }) ``` @@ -23,7 +23,7 @@ h(Transition, { **単一の**要素またはコンポーネントにアニメーションのトランジションを提供します。 -- **プロパティ** +- **props** ```ts interface TransitionProps { @@ -63,7 +63,7 @@ h(Transition, { appear?: boolean /** - * トランジションクラスをカスタマイズするためのプロパティ。 + * トランジションクラスをカスタマイズするための props。 * テンプレートでは kebab-case を使用（例: enter-from-class="xxx"） */ enterFromClass?: string @@ -132,9 +132,9 @@ h(Transition, { リスト内の**複数**の要素またはコンポーネントにトランジション効果を提供する。 -- **プロパティ** +- **props** - `` は `` と同じプロパティ（`mode` 以外）と追加の 2 つのプロパティを受け取ります: + `` は `` と同じ props（`mode` 以外）と追加の 2 つの props を受け取ります: ```ts interface TransitionGroupProps extends Omit { @@ -156,11 +156,11 @@ h(Transition, { - **詳細** - デフォルトでは、`` はラッパー DOM 要素をレンダリングしませんが、 `tag` プロパティによって定義できます。 + デフォルトでは、`` はラッパー DOM 要素をレンダリングしませんが、 `tag` props によって定義できます。 アニメーションが正しく動作するためには、`` 内のすべての子に[**一意なキーを指定**](/guide/essentials/list#maintaining-state-with-key)する必要があることに注意してください。 - `` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス（`name` 属性から自動生成されるか、`move-class` プロパティで設定）が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。 + `` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス（`name` 属性から自動生成されるか、`move-class` props で設定）が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。 - **例** @@ -178,7 +178,7 @@ h(Transition, { 動的に切り替えられる、内側のコンポーネントをキャッシュします。 -- **プロパティ** +- **props** ```ts interface KeepAliveProps { @@ -271,7 +271,7 @@ h(Transition, { スロットの内容を DOM の別の場所にレンダリングします。 -- **プロパティ** +- **props** ```ts interface TeleportProps { @@ -313,7 +313,7 @@ h(Transition, { コンポーネントツリー内のネストした非同期な依存関係を管理するために使用します。 -- **プロパティ** +- **props** ```ts interface SuspenseProps { diff --git a/src/api/built-in-directives.md b/src/api/built-in-directives.md index 17902a466..fff083486 100644 --- a/src/api/built-in-directives.md +++ b/src/api/built-in-directives.md @@ -255,7 +255,7 @@ ## v-bind {#v-bind} -1 つ以上の属性やコンポーネントのプロパティを式に動的にバインドします。 +1 つ以上の属性やコンポーネントの props を式に動的にバインドします。 - **省略記法:** `:` or `.`（`.prop` 修飾子使用時） @@ -275,7 +275,7 @@ 要素にバインディングを設定するとき、Vue はデフォルトで、`in` 演算子チェックを使用して、プロパティとして定義されたキーが要素にあるかどうかを確認します。プロパティが定義されている場合、Vue はその値を属性ではなく DOM プロパティとして設定します。これはほとんどの場合において有効ですが、`.prop` や `.attr` という修飾子を明示的に使用することでこの動作をオーバーライドできます。これは、特に[カスタム要素を扱う](/guide/extras/web-components#passing-dom-properties)ときに必要になることがあります。 - コンポーネントのプロパティをバインドするために使用する場合、そのプロパティは子コンポーネントで適切に宣言されている必要があります。 + コンポーネントの props をバインドするために使用する場合、その props は子コンポーネントで適切に宣言されている必要があります。 引数なしで使用する場合、属性の名前と値のペアを含むオブジェクトをバインドするために使用できます。 @@ -309,10 +309,10 @@
- + - + @@ -338,7 +338,7 @@ - **参照** - [クラスとスタイルのバインディング](/guide/essentials/class-and-style) - - [コンポーネント - プロパティ渡しの詳細](/guide/components/props#prop-passing-details) + - [コンポーネント - props 渡しの詳細](/guide/components/props#prop-passing-details) ## v-model {#v-model} @@ -366,18 +366,18 @@ ## v-slot {#v-slot} -プロパティの受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。 +props の受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。 - **省略記法:** `#` -- **期待する値:** 関数の引数の位置で有効な JavaScript 式（分割代入のサポートを含む）。省略可能 - プロパティがスロットに渡されることを期待している場合のみ必要です。 +- **期待する値:** 関数の引数の位置で有効な JavaScript 式（分割代入のサポートを含む）。省略可能 - props がスロットに渡されることを期待している場合のみ必要です。 - **引数:** スロット名（省略可能で、デフォルトは `default`） - **以下に限定:** - ` - + - + Mouse position: {{ x }}, {{ y }} diff --git a/src/api/built-in-special-elements.md b/src/api/built-in-special-elements.md index f2c2cd592..94b049f69 100644 --- a/src/api/built-in-special-elements.md +++ b/src/api/built-in-special-elements.md @@ -8,7 +8,7 @@ 動的コンポーネントや動的な要素をレンダリングするための「メタ・コンポーネント」です。 -- **プロパティ** +- **props** ```ts interface DynamicComponentProps { @@ -18,7 +18,7 @@ - **詳細** - 実際にレンダリングするコンポーネントは `is` プロパティによって決定されます。 + 実際にレンダリングするコンポーネントは `is` props によって決定されます。 - `is` が文字列の場合、HTML タグ名か、コンポーネントの登録名となります。 @@ -90,7 +90,7 @@ 例えば ` ``` - コンポーネントプロパティに `toRefs` を使用する場合、プロパティの変更に関するいつも通りの制限が適用されます。ref に新しい値を代入しようとするのは、プロパティを直接変更しようとすることと同等であり、許可されていません。そのようなシナリオでは `get` と `set` を持つ [`computed`](./reactivity-core#computed) を使うことを検討するとよいでしょう。詳しくは、[コンポーネントで `v-model` を使う](/guide/components/v-model)ためのガイドを参照してください。 + コンポーネント props に `toRefs` を使用する場合、props の変更に関するいつも通りの制限が適用されます。ref に新しい値を代入しようとするのは、props を直接変更しようとすることと同等であり、許可されていません。そのようなシナリオでは `get` と `set` を持つ [`computed`](./reactivity-core#computed) を使うことを検討するとよいでしょう。詳しくは、[コンポーネントで `v-model` を使う](/guide/components/v-model)ためのガイドを参照してください。 オブジェクトプロパティのシグネチャーを使用する場合、`toRef()` はソースプロパティが現在存在しない場合でも、利用可能な ref を返します。これにより [`toRefs`](#torefs) では取得できない、省略可能なプロパティを扱えるようになります。 diff --git a/src/api/render-function.md b/src/api/render-function.md index 0440f2888..5a01756dc 100644 --- a/src/api/render-function.md +++ b/src/api/render-function.md @@ -14,7 +14,7 @@ children?: Children | Slot | Slots ): VNode - // プロパティを省略する場合 + // props を省略する場合 function h(type: string | Component, children?: Children | Slot): VNode type Children = string | number | boolean | VNode | null | Children[] @@ -28,11 +28,11 @@ - **詳細** - 第 1 引数には、文字列（ネイティブ要素の場合）または Vue コンポーネント定義を指定します。第 2 引数は渡されるプロパティで、第 3 引数は子要素です。 + 第 1 引数には、文字列（ネイティブ要素の場合）または Vue コンポーネント定義を指定します。第 2 引数は渡される props で、第 3 引数は子要素です。 コンポーネントの vnode を作成するとき、子要素はスロット関数として渡さなければなりません。コンポーネントがデフォルトのスロットのみを想定している場合、単一のスロット関数を渡すことができます。そうでない場合は、スロットはスロット関数のオブジェクトとして渡さなければなりません。 - 便宜上、子要素が slot オブジェクトでない場合はプロパティ引数を省略できます。 + 便宜上、子要素がスロットオブジェクトでない場合は props 引数を省略できます。 - **例** @@ -45,7 +45,7 @@ h('div') h('div', { id: 'foo' }) - // 第 2 引数は属性とプロパティの両方が使用可能 + // props は属性とプロパティの両方が使用可能 // Vue は自動的に適切な方法で割り当てます h('div', { class: 'bar', innerHTML: 'hello' }) @@ -59,7 +59,7 @@ // children は文字列でも構いません h('div', { id: 'foo' }, 'hello') - // プロパティがない場合は省略できます + // props がない場合は省略できます h('div', 'hello') h('div', [h('span', 'hello')]) @@ -72,7 +72,7 @@ ```js import Foo from './Foo.vue' - // プロパティを渡す + // props を渡す h(Foo, { // some-prop="hello" と同等 someProp: 'hello', @@ -84,8 +84,8 @@ h(Foo, () => 'default slot') // 名前付きスロットを渡す - // スロットのオブジェクトがプロパティとして扱われないよう - // `null` が必要 + // スロットオブジェクトが props として扱われないよう + // `null` が必要なことに注意 h(MyComponent, null, { default: () => 'default slot', foo: () => h('div', 'foo'), @@ -97,7 +97,7 @@ ## mergeProps() {#mergeprops} -複数のプロパティオブジェクトをマージします。特定のプロパティには特別な処理があります。 +複数の props オブジェクトをマージします。特定の props には特別な処理があります。 - **型** @@ -107,7 +107,7 @@ - **詳細** - `mergeProps()` は複数のプロパティオブジェクトのマージをサポートし、以下のプロパティに対して特別な処理を行います: + `mergeProps()` は複数の props オブジェクトのマージをサポートし、以下の props に対して特別な処理を行います: - `class` - `style` @@ -151,9 +151,9 @@ vnode のクローンを作成します。 - **詳細** - クローンした vnode を返します。オリジナルの vnode とマージするための追加のプロパティを含みます。 + クローンした vnode を返します。オリジナルの vnode とマージするための追加の props を含みます。 - vnode は一度作成したらイミュータブルであると考えるべきで、既存の vnode のプロパティを変更するべきではありません。その代わり、別のプロパティ/追加のプロパティでそれをクローンしてください。 + vnode は一度作成したらイミュータブルであると考えるべきで、既存の vnode の props を変更するべきではありません。その代わり、別の props /追加の props を使ってクローンしてください。 vnode は特別な内部プロパティを持っているので、クローンするのはオブジェクトのスプレッドのように単純ではありません。`cloneVNode()` はその内部ロジックの大部分を処理します。 diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md index 9ca19f9bd..41bf9e903 100644 --- a/src/api/sfc-script-setup.md +++ b/src/api/sfc-script-setup.md @@ -3,7 +3,7 @@ ` ``` -` ``` -詳細: [コンポーネントプロパティの型付け](/guide/typescript/composition-api#typing-component-props) +詳細: [コンポーネント props の型付け](/guide/typescript/composition-api#typing-component-props) -## プロパティ渡しの詳細 {#prop-passing-details} +## props 渡しの詳細 {#prop-passing-details} -### プロパティ名での大文字・小文字の使い分け {#prop-name-casing} +### props 名の大文字・小文字の使い分け {#prop-name-casing} -長いプロパティ名は、camelCase（キャメルケース）で宣言します。そうすると、プロパティのキーとして使うときに引用符を使わなくて済みます。camelCase は JavaScript の有効な識別子であるため、以下のようにテンプレート内の式で直接参照できます: +長い名での大文字・小文字の使い分け名は、camelCase（キャメルケース）で宣言します。そうすると、プロパティのキーとして使うときに引用符を使わなくて済みます。camelCase は JavaScript の有効な識別子であるため、以下のようにテンプレート内の式で直接参照できます:
@@ -148,23 +148,23 @@ export default { {{ greetingMessage }} ``` -技術的には、子コンポーネントにプロパティを渡すときにも camelCase を用いることができます（ただし [DOM テンプレート](/guide/essentials/component-basics#dom-template-parsing-caveats)内を除く）。しかし、常に kebab-case（ケバブケース）を用いて HTML の属性に揃える、以下のような表記が慣例となっています: +技術的には、子コンポーネントに props を渡すときにも camelCase を用いることができます（ただし [DOM テンプレート](/guide/essentials/component-basics#dom-template-parsing-caveats)内を除く）。しかし、常に kebab-case（ケバブケース）を用いて HTML の属性に揃える、以下のような表記が慣例となっています: ```vue-html ``` -[コンポーネントのタグには、可能な限り PascalCase を用いる](/guide/components/registration#component-name-casing)ことが推奨されます。これは Vue コンポーネントとネイティブ要素の区別が付き、テンプレートの可読性が高まるためです。しかし、プロパティを渡すときに camelCase を用いることには、それほど実用的なメリットがありません。そのため、Vue では各言語の規約に従うことが推奨されます。 +[コンポーネントのタグには、可能な限り PascalCase を用いる](/guide/components/registration#component-name-casing)ことが推奨されます。これは Vue コンポーネントとネイティブ要素の区別が付き、テンプレートの可読性が高まるためです。しかし、props を渡すときに camelCase を用いることには、それほど実用的なメリットがありません。そのため、Vue では各言語の規約に従うことが推奨されます。 -### 静的なプロパティと動的なプロパティ {#static-vs-dynamic-props} +### 静的な props と動的な props {#static-vs-dynamic-props} -ここまでで、静的な値として渡すプロパティを見てきました。例: +ここまでで、静的な値として渡す props を見てきました。例: ```vue-html ``` -`v-bind` またはそのショートカットである `:` を使って、プロパティを動的に割り当てる例も見てきました。例: +`v-bind` またはそのショートカットである `:` を使って、props を動的に割り当てる例も見てきました。例: ```vue-html @@ -176,7 +176,7 @@ export default { ### いろいろな種類の値を渡す {#passing-different-value-types} -上の 2 つは、たまたま文字列の値を渡す例ですが、プロパティには _どんな_ 種類の値も渡すことができます。 +上の 2 つは、たまたま文字列の値を渡す例ですが、props には**どんな**種類の値も渡すことができます。 #### 数値 {#number} @@ -192,7 +192,7 @@ export default { #### 真偽値 {#boolean} ```vue-html - + @@ -232,7 +232,7 @@ export default { ### オブジェクトを利用した複数のプロパティのバインディング {#binding-multiple-properties-using-an-object} -オブジェクトに含まれるすべてのプロパティをコンポーネントプロパティとして渡したい場合には、[引数なしの `v-bind`](/guide/essentials/template-syntax#dynamically-binding-multiple-attributes) を使用します (`:プロパティ名` の代わりに `v-bind`)。例えば、以下のような `post` オブジェクトがあるとします: +オブジェクトに含まれるすべてのプロパティを props として渡したい場合には、[引数なしの `v-bind`](/guide/essentials/template-syntax#dynamically-binding-multiple-attributes) を使用します (`:prop-name` の代わりに `v-bind`)。例えば、以下のような `post` オブジェクトがあるとします:
@@ -275,16 +275,16 @@ const post = { ## 一方向のデータフロー {#one-way-data-flow} -すべてのプロパティでは、子のプロパティと親のプロパティとの間に**一方向バインディング**が形成されます。親のプロパティが更新されたときには子にも流れますが、その逆はありません。これにより、親の状態が誤って子コンポーネントによって変更されてアプリのデータフローが把握しにくくなる、といった事態が防がれます。 +すべての props では、子のプロパティと親のプロパティとの間に**一方向バインディング**が形成されます。親のプロパティが更新されたときには子にも流れますが、その逆はありません。これにより、親の状態が誤って子コンポーネントによって変更されてアプリのデータフローが把握しにくくなる、といった事態が防がれます。 -さらに、親コンポーネントが更新されるたびに、子コンポーネント内のすべてのプロパティは最新の値に更新されます。そのため、子コンポーネント内でプロパティの変更を試みては**いけません**。もし試みると、Vue がコンソールで警告を発します: +さらに、親コンポーネントが更新されるたびに、子コンポーネント内のすべての props は最新の値に更新されます。そのため、子コンポーネント内で props の変更を試みては**いけません**。もし試みると、Vue がコンソールで警告を発します:
```js const props = defineProps(['foo']) -// ❌ 警告、プロパティは読み取り専用です！ +// ❌ 警告、props は読み取り専用です！ props.foo = 'bar' ``` @@ -295,7 +295,7 @@ props.foo = 'bar' export default { props: ['foo'], created() { - // ❌ 警告、プロパティは読み取り専用です！ + // ❌ 警告、 \props は読み取り専用です！ this.foo = 'bar' } } @@ -303,9 +303,9 @@ export default {
-通常、プロパティを変更したい状況には以下の 2 つがあります: +通常、props を変更したい状況には以下の 2 つがあります: -1. **プロパティは初期値を渡すために用いて、それ以降、子コンポーネントではローカルのデータプロパティとして利用したい。** この場合、以下のようにローカルのデータプロパティを定義して、その初期値にプロパティを使用するのが最も適切です: +1. **props は初期値を渡すために用いて、それ以降、子コンポーネントではローカルのデータプロパティとして利用したい。** この場合、以下のようにローカルのデータプロパティを定義して、その初期値に props を使用するのが最も適切です:
@@ -313,7 +313,7 @@ export default { const props = defineProps(['initialCounter']) // props.initialCounter は counter の初期値を指定するためだけに - // 使われ、今後発生するプロパティの更新からは切り離されます。 + // 使われ、今後発生する props の更新からは切り離されます。 const counter = ref(props.initialCounter) ``` @@ -326,7 +326,7 @@ export default { data() { return { // this.initialCounter は counter の初期値を指定するためだけに - // 使われ、今後発生するプロパティの更新からは切り離されます。 + // 使われ、今後発生する props の更新からは切り離されます。 counter: this.initialCounter } } @@ -335,14 +335,14 @@ export default {
-2. **プロパティを、変換が必要な生の値として渡したい。** この場合、以下のような算出プロパティを定義して、その中でプロパティの値を利用するのが最も適切です: +2. **props を、変換する必要がある元の値として渡したい。** この場合、以下のような算出プロパティを定義して、その中で props の値を利用するのが最も適切です:
```js const props = defineProps(['size']) - // プロパティが変更されると自動的に更新される算出プロパティ + // props が変更されると自動的に更新される算出プロパティ const normalizedSize = computed(() => props.size.trim().toLowerCase()) ``` @@ -353,7 +353,7 @@ export default { export default { props: ['size'], computed: { - // プロパティが変更されると自動的に更新される算出プロパティ + // props が変更されると自動的に更新される算出プロパティ normalizedSize() { return this.size.trim().toLowerCase() } @@ -365,15 +365,15 @@ export default { ### オブジェクト/配列のプロップを変更する {#mutating-object-array-props} -オブジェクトや配列をプロパティとして渡した場合、子コンポーネントがプロパティのバインディングを変更することはできませんが、オブジェクトや配列のネストされたプロパティを変更することは**可能です**。これは、JavaScript ではオブジェクトや配列が参照渡しであり、Vue がそのような変更を防ぐのにかかるコストが現実的でないためです。 +オブジェクトや配列を props として渡した場合、子コンポーネントが props のバインディングを変更することはできませんが、オブジェクトや配列のネストされたプロパティを変更することは**可能です**。これは、JavaScript ではオブジェクトや配列が参照渡しであり、Vue がそのような変更を防ぐのにかかるコストが現実的でないためです。 このような変更の主な欠点は、親コンポーネントにとって明瞭でない方法で子コンポーネントが親の状態に影響を与えることを許してしまい、後からデータの流れを見極めるのが難しくなる可能性があることです。親と子を密に結合させる設計でない限り、ベストプラクティスとしてはそのような変更を避けるべきです。ほとんどの場合、子コンポーネントは[イベントを発行](/guide/components/events)して、変更を親コンポーネントに実行してもらう必要があります。 -## プロパティのバリデーション {#prop-validation} +## props のバリデーション {#prop-validation} -先ほど見た型のように、コンポーネントではプロパティに対する要件を指定できます。要件が合わないと、Vue がブラウザーの JavaScript コンソールで警告を発します。他の人に使ってもらうことを想定したコンポーネントを開発する場合、これはとても便利です。 +先ほど見た型のように、コンポーネントでは props に対する要件を指定できます。要件が合わないと、Vue がブラウザーの JavaScript コンソールで警告を発します。他の人に使ってもらうことを想定したコンポーネントを開発する場合、これはとても便利です。 -プロパティのバリデーションを指定するには、文字列の配列の代わりに `defineProps()` マクロ`props` オプションを用いて、バリデーションの要件を持たせたオブジェクトを指定します。例: + props のバリデーションを指定するには、文字列の配列の代わりに `defineProps()` マクロ`props` オプションを用いて、バリデーションの要件を持たせたオブジェクトを指定します。例:
@@ -399,7 +399,7 @@ defineProps({ type: Object, // オブジェクトと配列のデフォルトは、ファクトリー関数を使って // 返す必要があります。ファクトリー関数は、コンポーネントが - // 受け取った生の各プロパティを引数として受け取ります。 + // 受け取った未加工の props を引数として受け取ります。 default(rawProps) { return { message: 'hello' } } @@ -453,7 +453,7 @@ export default { type: Object, // オブジェクトと配列のデフォルトは、ファクトリー関数を使って // 返す必要があります。ファクトリー関数は、コンポーネントが - // 受け取った生の各プロパティを引数として受け取ります。 + // 受け取った未加工の props を引数として受け取ります。 default(rawProps) { return { message: 'hello' } } @@ -482,25 +482,25 @@ export default { その他の詳細: -- `required: true` が指定されていないすべてのプロパティは、デフォルトでオプションです。 +- `required: true` が指定されていないすべての props は、デフォルトでオプションです。 -- `Boolean` 以外のオプションのプロパティは、値が指定されないと `undefined` 値になります。 +- `Boolean` 以外のオプションの props は、値が指定されないと `undefined` 値になります。 -- `Boolean` のプロパティは、値が指定されないと `false` に変換されます。これは `default` を設定すると変更できます。例えば `default: undefined` とすると、非真偽値のプロパティとして振る舞います。 +- `Boolean` の props は、値が指定されないと `false` に変換されます。これは `default` を設定すると変更できます。例えば `default: undefined` とすると、非真偽値の props として振る舞います。 -- `default` の値を指定すると、プロパティの値が `undefined` に解決される時、それが使用されます。プロパティが指定されなかった場合と、明示的に `undefined` 値が渡された場合も、これに含まれます。 +- `default` の値を指定すると、解決された props の値が `undefined` の場合に使用されます。props が指定されなかった場合と、明示的に `undefined` 値が渡された場合も、これに含まれます。 -プロパティのバリデーションに失敗すると、Vue がコンソールに警告を出します（開発ビルドを使用する場合）。 +props のバリデーションに失敗すると、Vue がコンソールに警告を出します（開発ビルドを使用する場合）。
-[型のみのプロパティ宣言](/api/sfc-script-setup#type-only-props-emit-declarations) を使用する場合、Vue は型アノテーションに基づいて、同等の実行時プロパティ宣言へのコンパイルをベストエフォートで試みます。例えば、`defineProps<{ msg: string }>` は `{ msg: { type: String, required: true }}` にコンパイルされます。 +[型のみの props 宣言](/api/sfc-script-setup#type-only-props-emit-declarations) を使用する場合、Vue は型アノテーションに基づいて、同等のランタイム props 宣言へのコンパイルをベストエフォートで試みます。例えば、`defineProps<{ msg: string }>` は `{ msg: { type: String, required: true }}` にコンパイルされます。
::: tip 注意 -プロパティのバリデーションは、コンポーネントのインスタンスが生成される**前**に実行されます。そのため、`default` や `validator` 関数の中ではインスタンスのプロパティ（例えば `data`、`computed` など）が使用できないことに注意してください。 +props のバリデーションは、コンポーネントのインスタンスが生成される**前**に実行されます。そのため、`default` や `validator` 関数の中ではインスタンスのプロパティ（例えば `data`、`computed` など）が使用できないことに注意してください。 :::
@@ -529,7 +529,7 @@ class Person { } ``` -これをプロパティの型として用いるとします: +これを props の型として用いるとします:
@@ -552,11 +552,11 @@ export default {
-Vue は `instanceof Person` を使って、`author` プロパティの値が本当に `Person` クラスのインスタンスであるかどうかを検証しています。 +Vue は `instanceof Person` を使って、`author` props の値が本当に `Person` クラスのインスタンスであるかどうかを検証しています。 ## 真偽値の型変換 {#boolean-casting} -`Boolean` 型のプロパティは、ネイティブの真偽値の属性が振る舞う様子を模倣するために、特殊な型変換の規則を持っています。次のような宣言を含む `` があるとします: +`Boolean` 型の props は、ネイティブの真偽値の属性が振る舞う様子を模倣するために、特殊な型変換の規則を持っています。次のような宣言を含む `` があるとします:
@@ -589,7 +589,7 @@ export default { ``` -プロパティが複数の型を許容するように宣言されている場合、`Boolean` のキャストルールも適用されます。ただし、`String` と `Boolean` の両方が許可されている場合は、Boolean のキャストルールは String の前に Boolean が現れる場合のみ適用されるという特別な状況があります: +props が複数の型を許容するように宣言されている場合、`Boolean` のキャストルールも適用されます。ただし、`String` と `Boolean` の両方が許可されている場合は、Boolean のキャストルールは String の前に Boolean が現れる場合のみ適用されるという特別な状況があります:
diff --git a/src/guide/components/provide-inject.md b/src/guide/components/provide-inject.md index dd1aad084..8776397f7 100644 --- a/src/guide/components/provide-inject.md +++ b/src/guide/components/provide-inject.md @@ -2,17 +2,17 @@ > このページは、すでに[コンポーネントの基礎](/guide/essentials/component-basics)を読んでいることを前提にしています。初めてコンポーネントに触れる方は、まずそちらをお読みください。 -## プロパティのバケツリレー（Prop Drilling） {#prop-drilling} +## props のバケツリレー（Prop Drilling） {#prop-drilling} -通常、親コンポーネントから子コンポーネントにデータを渡す必要がある場合、[プロパティ](/guide/components/props)を使用します。ですが、大きなコンポーネントツリーがあり、深くネストされたコンポーネントが遠い祖先のコンポーネントから何かしらを必要とするケースを想像してみてください。プロパティだけを使う場合、親コンポーネントのチェーン全体に同じプロパティを渡さなければなりません: +通常、親コンポーネントから子コンポーネントにデータを渡す必要がある場合、[props](/guide/components/props)を使用します。ですが、大きなコンポーネントツリーがあり、深くネストされたコンポーネントが遠い祖先のコンポーネントから何かしらを必要とするケースを想像してみてください。props だけを使う場合、親コンポーネントのチェーン全体に同じ props を渡さなければなりません: -![プロパティバケツリレーダイアグラム](./images/prop-drilling.png) +![props バケツリレーダイアグラム](./images/prop-drilling.png) -`