diff --git a/src/api/application.md b/src/api/application.md index 288b1de90..6a5d3a844 100644 --- a/src/api/application.md +++ b/src/api/application.md @@ -12,7 +12,7 @@ - **詳細** - 第 1 引数はルートコンポーネントです。第 2 引数 (省略可能) は、ルートコンポーネントに渡される props です。 + 第 1 引数はルートコンポーネントです。第 2 引数 (省略可能) は、ルートコンポーネントに渡されるプロパティです。 - **例** diff --git a/src/api/built-in-directives.md b/src/api/built-in-directives.md index e8eaa0b91..225a345c6 100644 --- a/src/api/built-in-directives.md +++ b/src/api/built-in-directives.md @@ -366,18 +366,18 @@ ## v-slot {#v-slot} -props の受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。 +プロパティの受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します。 - **省略記法:** `#` -- **期待する値:** 関数の引数の位置で有効な JavaScript 式（分割代入のサポートを含む）。省略可能 - props がスロットに渡されることを期待している場合のみ必要です。 +- **期待する値:** 関数の引数の位置で有効な JavaScript 式（分割代入のサポートを含む）。省略可能 - プロパティがスロットに渡されることを期待している場合のみ必要です。 - **引数:** スロット名（省略可能で、デフォルトは `default`） - **以下に限定:** - ` - + - + Mouse position: {{ x }}, {{ y }} diff --git a/src/api/component-instance.md b/src/api/component-instance.md index b896c2cdc..783eb0a52 100644 --- a/src/api/component-instance.md +++ b/src/api/component-instance.md @@ -20,7 +20,7 @@ ## $props {#props} -コンポーネントの現在の解決された props を表すオブジェクト。 +コンポーネントの現在の解決済みプロパティを表すオブジェクト。 - **型** @@ -32,7 +32,7 @@ - **詳細** - [`props`](./options-state.html#props) オプションで宣言された props のみが含まれます。コンポーネントインスタンスは、その props オブジェクトのプロパティへのアクセスをプロキシします。 + [`props`](./options-state.html#props) オプションで宣言されたプロパティのみが含まれます。コンポーネントインスタンスは、その props オブジェクトのプロパティへのアクセスをプロキシします。 ## $el {#el} @@ -135,7 +135,7 @@ 各スロットは、そのスロットの名前に対応するキーの下にある vnode の配列を返す関数として `this.$slots` で公開されます。デフォルトのスロットは `this.$slots.default` として公開されます。 - スロットが[スコープ付きスロット](/guide/components/slots.html#scoped-slots)の場合、スロット関数に渡された引数はそのスロットの props として利用可能です。 + スロットが[スコープ付きスロット](/guide/components/slots.html#scoped-slots)の場合、スロット関数に渡された引数はそのスロットのプロパティとして利用可能です。 - **参照:** [レンダー関数 - スロットのレンダリング](/guide/extras/render-function.html#rendering-slots) diff --git a/src/api/composition-api-setup.md b/src/api/composition-api-setup.md index 0fd17e379..5ac89c964 100644 --- a/src/api/composition-api-setup.md +++ b/src/api/composition-api-setup.md @@ -44,7 +44,7 @@ export default { `setup()` は**同期的**にオブジェクトを返さなければなりません。`async setup()` が使用できるのは、そのコンポーネントが [Suspense](../guide/built-ins/suspense.html) コンポーネントの子孫であるときだけです。 -## Props へのアクセス {#accessing-props} +## プロパティへのアクセス {#accessing-props} `setup` 関数の第 1 引数は `props` 引数です。標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい `props` が渡されたら更新されます。 @@ -59,9 +59,9 @@ export default { } ``` -もし、`props` オブジェクトを分割代入する場合は、分割代入された変数はリアクティビティーを失うことに注意してください。 そのため、常に `props.xxx` の形で props にアクセスすることを推奨します。 +もし、`props` オブジェクトを分割代入する場合は、分割代入された変数はリアクティビティーを失うことに注意してください。 そのため、常に `props.xxx` の形でプロパティにアクセスすることを推奨します。 -もし、本当に props を分割代入すること、もしくはリアクティビティーを保持しながら外部の関数に渡すことが必要なら、 ユーティリティー APIs である [toRefs()](./reactivity-utilities.html#torefs) や [toRef()](/api/reactivity-utilities.html#toref) を使用することで、行うことができます: +もし、本当にプロパティを分割代入すること、もしくはリアクティビティーを保持しながら外部の関数に渡すことが必要なら、 ユーティリティー API である [toRefs()](./reactivity-utilities.html#torefs) や [toRef()](/api/reactivity-utilities.html#toref) を使用することで、行うことができます: ```js import { toRefs, toRef } from 'vue' diff --git a/src/api/options-composition.md b/src/api/options-composition.md index 94c60dca2..82a258153 100644 --- a/src/api/options-composition.md +++ b/src/api/options-composition.md @@ -84,7 +84,7 @@ - 利用可能なインジェクションで検索するキー（文字列またはシンボル）、または - 次のようなオブジェクト: - `from` プロパティは、利用可能なインジェクションを検索するためのキー（文字列またはシンボル）になっている。さらに - - `default` プロパティは、フォールバック値として使用されます。props のデフォルト値と同様に、複数のコンポーネントインスタンス間での値の共有を避けるために、オブジェクトタイプにもファクトリ関数が必要です。 + - `default` プロパティは、フォールバック値として使用されます。コンポーネントプロパティのデフォルト値と同様に、複数のコンポーネントインスタンス間での値の共有を避けるために、オブジェクトタイプにもファクトリ関数が必要です。 一致するプロパティもデフォルト値も提供されなかった場合、注入されたプロパティは `undefined` となります。 @@ -103,7 +103,7 @@ } ``` - 注入された値を props のデフォルトとして使用する: + 注入された値をプロパティのデフォルトとして使用する: ```js const Child = { @@ -154,7 +154,7 @@ } ``` - props のデフォルトと同様に、プリミティブでない値にはファクトリー関数を使用する必要があります: + プロパティのデフォルトと同様に、プリミティブでない値にはファクトリー関数を使用する必要があります: ```js const Child = { diff --git a/src/api/options-lifecycle.md b/src/api/options-lifecycle.md index 99fca67ce..b0f7e5ac4 100644 --- a/src/api/options-lifecycle.md +++ b/src/api/options-lifecycle.md @@ -18,7 +18,7 @@ - **詳細** - インスタンスが初期化されたときや、props を解決した後、`data()` や `computed` などの他のオプションを処理する前に直ちに呼び出されます。 + インスタンスが初期化されたときや、プロパティを解決した後、`data()` や `computed` などの他のオプションを処理する前に直ちに呼び出されます。 Composition API の `setup()` フックは、`beforeCreate()` を含めた Options API のどんなフックよりも先に呼び出されることに注意してください。 diff --git a/src/api/options-state.md b/src/api/options-state.md index b142ef48e..9f001f39b 100644 --- a/src/api/options-state.md +++ b/src/api/options-state.md @@ -49,7 +49,7 @@ ## props {#props} -コンポーネントの props を宣言します。 +コンポーネントプロパティを宣言します。 - **型** @@ -78,18 +78,18 @@ - **詳細** - Vue では、コンポーネントの props はすべて明示的に宣言する必要があります。コンポーネントの props は、2 つの形式で宣言できます: + Vue では、コンポーネントプロパティはすべて明示的に宣言する必要があります。コンポーネントプロパティは、2 つの形式で宣言できます: - 文字列の配列を使用したシンプルな形式 - - 各プロパティのキーが props の名前で、値が props の型（コンストラクタ関数）または詳細オプションになっているオブジェクトを使用した完全な形式 + - キーがプロパティ名、値がプロパティの型（コンストラクタ関数）または詳細オプションになっているオブジェクトを使用した完全な形式 - オブジェクトベースの構文では、各 props はさらに以下のオプションを定義できます: + オブジェクトベースの構文では、各プロパティはさらに以下のオプションを定義できます: - **`type`**: 以下のネイティブコンストラクターのいずれかを指定します: `String`, `Number`, `Boolean`, `Array`, `Object`, `Date`, `Function`, `Symbol`, 任意のカスタムコンストラクタ関数、またはそれらの配列。開発モードでは、Vue はプロパティの値が宣言された型と一致するかどうかをチェックし、一致しない場合は警告を投げます。詳しくは [プロパティのバリデーション](/guide/components/props.html#prop-validation) を参照してください。 また、`Boolean` 型のプロパティは、開発とプロダクションの両方で、値のキャスト動作に影響を与えることに注意してください。詳しくは[真偽値の型変換](/guide/components/props.html#boolean-casting)を参照してください。 - - **`default`**: が親から渡されなかったり、値が `undefined` の場合のデフォルト値を指定します。オブジェクトや配列のデフォルト値は、ファクトリー関数を用いて返さなければなりません。ファクトリー関数は引数として加工前の props オブジェクトも受け取ります。 + - **`default`**: が親から渡されなかったり、値が `undefined` の場合のデフォルト値を指定します。オブジェクトや配列のデフォルト値は、ファクトリー関数を用いて返さなければなりません。ファクトリー関数は引数として加工前のプロパティオブジェクトも受け取ります。 - **`required`**: プロパティが必須かどうかを定義します。プロダクション以外の環境では、この値が truthy になっていてプロパティが渡されない場合、コンソールの警告が投げられます。 @@ -127,7 +127,7 @@ - **参照:** - [ガイド - プロパティ](/guide/components/props.html) - - [ガイド - コンポーネントの props の型付け](/guide/typescript/options-api.html#typing-component-props) + - [ガイド - コンポーネントプロパティの型付け](/guide/typescript/options-api.html#typing-component-props) ## computed {#computed} diff --git a/src/api/reactivity-utilities.md b/src/api/reactivity-utilities.md index cea98bee2..43bd6fd86 100644 --- a/src/api/reactivity-utilities.md +++ b/src/api/reactivity-utilities.md @@ -96,7 +96,7 @@ ``` - コンポーネントの props に `toRefs` を使用する場合、props の変更に関するいつも通りの制限が適用されます。ref に新しい値を代入しようとするのは、props を直接変更しようとすることと同等であり、許可されていません。そのようなシナリオでは `get` と `set` を持つ [`computed`](./reactivity-core.html#computed) を使うことを検討するとよいでしょう。詳しくは、[コンポーネントで `v-model` を使う](/guide/components/v-model.html)ためのガイドを参照してください。 + コンポーネントプロパティに `toRefs` を使用する場合、プロパティの変更に関するいつも通りの制限が適用されます。ref に新しい値を代入しようとするのは、プロパティを直接変更しようとすることと同等であり、許可されていません。そのようなシナリオでは `get` と `set` を持つ [`computed`](./reactivity-core.html#computed) を使うことを検討するとよいでしょう。詳しくは、[コンポーネントで `v-model` を使う](/guide/components/v-model.html)ためのガイドを参照してください。 `toRef()` はソースプロパティが現在存在しない場合でも、利用可能な ref を返します。これにより [`toRefs`](#torefs) では取得できないオプショナルなプロパティを扱えるようになります。 diff --git a/src/api/render-function.md b/src/api/render-function.md index 0f45e363a..5b9c61816 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 引数は渡される props で、第 3 引数は子要素です。 + 第 1 引数には、文字列（ネイティブ要素の場合）または Vue コンポーネント定義を指定します。第 2 引数は渡されるプロパティで、第 3 引数は子要素です。 コンポーネントの vnode を作成するとき、子要素はスロット関数として渡さなければなりません。コンポーネントがデフォルトのスロットのみを想定している場合、単一のスロット関数を渡すことができます。そうでない場合は、スロットはスロット関数のオブジェクトとして渡さなければなりません。 - 便宜上、子要素が slot オブジェクトでない場合は props 引数を省略できます。 + 便宜上、子要素が slot オブジェクトでない場合はプロパティ引数を省略できます。 - **例** @@ -45,7 +45,7 @@ h('div') h('div', { id: 'foo' }) - // props では属性とプロパティの両方が使用可能 + // 第 2 引数は属性とプロパティの両方が使用可能 // 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,7 +84,7 @@ h(Foo, () => 'default slot') // 名前付きスロットを渡す - // スロットのオブジェクトが props として扱われないよう + // スロットのオブジェクトがプロパティとして扱われないよう // `null` が必要 h(MyComponent, null, { default: () => 'default slot', @@ -97,7 +97,7 @@ ## mergeProps() {#mergeprops} -複数の props オブジェクトをマージします。特定のプロパティには特別な処理があります。 +複数のプロパティオブジェクトをマージします。特定のプロパティには特別な処理があります。 - **型** @@ -107,7 +107,7 @@ - **詳細** - `mergeProps()` は複数の props オブジェクトのマージをサポートし、以下のプロパティに対して特別な処理を行います: + `mergeProps()` は複数のプロパティオブジェクトのマージをサポートし、以下のプロパティに対して特別な処理を行います: - `class` - `style` diff --git a/src/api/sfc-script-setup.md b/src/api/sfc-script-setup.md index 7996109c4..9f77a344c 100644 --- a/src/api/sfc-script-setup.md +++ b/src/api/sfc-script-setup.md @@ -297,9 +297,9 @@ const emit = defineEmits<{ 現在、複雑な型や他のファイルからの型のインポートはサポートされていません。将来的には型のインポートをサポートする可能性があります。 -### 型宣言を使用時のデフォルトの props 値 {#default-props-values-when-using-type-declaration} +### 型宣言を使用時のデフォルトのプロパティ値 {#default-props-values-when-using-type-declaration} -型のみの `defineProps` 宣言の欠点は、props のデフォルト値を提供する方法がないことです。この問題を解決するために、`withDefaults` コンパイラーマクロも用意されています: +型のみの `defineProps` 宣言の欠点は、プロパティのデフォルト値を提供する方法がないことです。この問題を解決するために、`withDefaults` コンパイラーマクロも用意されています: ```ts export interface Props { @@ -313,7 +313,7 @@ const props = withDefaults(defineProps(), { }) ``` -これは、同等な実行時の props の `default` オプションにコンパイルされます。さらに、`withDefaults` ヘルパーは、デフォルト値の型チェックを行います。また、返される `props` の型が、デフォルト値が宣言されているプロパティに対して、省略可能フラグが削除されていることを保証します。 +これは、同等な実行時のプロパティの `default` オプションにコンパイルされます。さらに、`withDefaults` ヘルパーは、デフォルト値の型チェックを行います。また、返される `props` の型が、デフォルト値が宣言されているプロパティに対して、省略可能フラグが削除されていることを保証します。 ## 制限 {#restrictions} diff --git a/src/guide/components/props.md b/src/guide/components/props.md index e22bd0791..b7fea6e72 100644 --- a/src/guide/components/props.md +++ b/src/guide/components/props.md @@ -232,7 +232,7 @@ export default { ### オブジェクトを利用した複数のプロパティのバインディング {#binding-multiple-properties-using-an-object} -オブジェクトに含まれるすべてのプロパティを props として渡したい場合には、[引数なしの `v-bind`](/guide/essentials/template-syntax.html#dynamically-binding-multiple-attributes) を使用します (`:プロパティ名` の代わりに `v-bind`)。例えば、以下のような `post` オブジェクトがあるとします: +オブジェクトに含まれるすべてのプロパティをコンポーネントプロパティとして渡したい場合には、[引数なしの `v-bind`](/guide/essentials/template-syntax.html#dynamically-binding-multiple-attributes) を使用します (`:プロパティ名` の代わりに `v-bind`)。例えば、以下のような `post` オブジェクトがあるとします:
diff --git a/src/guide/components/provide-inject.md b/src/guide/components/provide-inject.md index 2997fdc24..cc9d515cf 100644 --- a/src/guide/components/provide-inject.md +++ b/src/guide/components/provide-inject.md @@ -195,7 +195,7 @@ export default { デフォルトでは、`inject` は注入されるキーが親チェーンのどこかで提供されることを想定しています。キーが提供されていない場合、実行時に警告が表示されます。 -インジェクトされたプロパティをオプションのプロバイダーで動作させたい場合は、props と同様にデフォルト値を宣言する必要があります: +インジェクトされたプロパティをオプションのプロバイダーで動作させたい場合は、コンポーネントプロパティと同様にデフォルト値を宣言する必要があります:
diff --git a/src/style-guide/rules-essential.md b/src/style-guide/rules-essential.md index 63b10cc80..3eb22618d 100644 --- a/src/style-guide/rules-essential.md +++ b/src/style-guide/rules-essential.md @@ -40,7 +40,7 @@ 詳細な[プロパティ定義](/guide/components/props.html#prop-validation)には、2 つの利点があります。 - それらはコンポーネントの API を文書化し、コンポーネントがどのように使用されることを意図しているかを容易に理解できるようにします。 -- 開発では、コンポーネントが不適切な形式の props を提供された場合に Vue が警告を発し、潜在的なエラー源を捕らえるのに役立ちます。 +- 開発では、コンポーネントが不適切な形式のプロパティを提供された場合に Vue が警告を発し、潜在的なエラー源を捕らえるのに役立ちます。 :::
diff --git a/src/style-guide/rules-use-with-caution.md b/src/style-guide/rules-use-with-caution.md index 5298b7d2a..2bff15d74 100644 --- a/src/style-guide/rules-use-with-caution.md +++ b/src/style-guide/rules-use-with-caution.md @@ -50,9 +50,9 @@ button { ## 暗黙の親子間通信 {#implicit-parent-child-communication} -**親子間のコンポーネントの通信には `this.$parent` や props を変更するかわりに props と event を使うようにしてください。** +**親子間のコンポーネントの通信には、プロパティを変更したり `this.$parent` を使うのではなく、プロパティとイベントを使うようにしてください。** -理想的な Vue アプリケーションは props が下で events が上です。この規約に従うことでコンポーネントはより理解しやしくなります。しかし、prop の変更や `this.$parent` を使うことですでに深く結合している 2 つのコンポーネントを単純化できるようなエッジケースが存在します。 +理想的な Vue アプリケーションは props down, events up です。この規約に従うことでコンポーネントはより理解しやしくなります。しかし、プロパティの変更や `this.$parent` を使うことですでに深く結合している 2 つのコンポーネントを単純化できるようなエッジケースが存在します。 問題はこれらのパターンが便利になる _シンプル_ なケースも多く存在することです。注意: 短期的な利便性（少ないコードを書くこと）のために単純な取引（状態の流れを理解できること）するよう誘惑されないでください。 diff --git a/src/tutorial/src/step-12/description.md b/src/tutorial/src/step-12/description.md index 35d183241..a2903bd57 100644 --- a/src/tutorial/src/step-12/description.md +++ b/src/tutorial/src/step-12/description.md @@ -1,6 +1,6 @@ -# Props {#props} +# プロパティ {#props} -子コンポーネントは、親コンポーネントから **props** を介して入力を受け取ることができます。 まず、受け入れる props を宣言する必要があります: +子コンポーネントは、親コンポーネントから **プロパティ** を介して入力を受け取ることができます。 まず、受け入れるプロパティを宣言する必要があります:
@@ -32,7 +32,7 @@ export default { } ``` -一度宣言すると、`msg` プロパティは `this` に出力され、子コンポーネントのテンプレートで使用できるようになります。受け取った props は `setup()` に第一引数として渡されます。 +一度宣言すると、`msg` プロパティは `this` に出力され、子コンポーネントのテンプレートで使用できるようになります。受け取ったプロパティは `setup()` に第一引数として渡されます。
diff --git a/src/tutorial/src/step-13/description.md b/src/tutorial/src/step-13/description.md index e1b2dab2b..767594a9b 100644 --- a/src/tutorial/src/step-13/description.md +++ b/src/tutorial/src/step-13/description.md @@ -1,6 +1,6 @@ -# エミット {#emits} +# イベントの発行 {#emits} -props を受け取るだけでなく、子コンポーネントは親コンポーネントにイベントを発行することもできます: +プロパティを受け取るだけでなく、子コンポーネントは親コンポーネントにイベントを発行することもできます:
diff --git a/src/tutorial/src/step-14/description.md b/src/tutorial/src/step-14/description.md index 8ffb29773..6f2bd5ac6 100644 --- a/src/tutorial/src/step-14/description.md +++ b/src/tutorial/src/step-14/description.md @@ -1,6 +1,6 @@ # スロット {#slots} -props を経由したデータの受け渡しだけでなく、親コンポーネントはテンプレートフラグメントを **スロット** を経由して子コンポーネントへ渡すこともできます: +プロパティを経由したデータの受け渡しだけでなく、親コンポーネントはテンプレートフラグメントを **スロット** を経由して子コンポーネントへ渡すこともできます: