Skip to content

Commit

Permalink
props 表記(その3) (#1215)
Browse files Browse the repository at this point in the history
  • Loading branch information
jay-es authored Feb 28, 2023
1 parent addd1e8 commit 9bfae49
Show file tree
Hide file tree
Showing 17 changed files with 46 additions and 46 deletions.
2 changes: 1 addition & 1 deletion src/api/application.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@

- **詳細**

1 引数はルートコンポーネントです。第 2 引数 (省略可能) は、ルートコンポーネントに渡される props です
1 引数はルートコンポーネントです。第 2 引数 (省略可能) は、ルートコンポーネントに渡されるプロパティです

- ****

Expand Down
10 changes: 5 additions & 5 deletions src/api/built-in-directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -366,18 +366,18 @@

## v-slot {#v-slot}

props の受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します
プロパティの受け取りを期待する名前付きスロットまたはスコープ付きスロットを表します

- **省略記法:** `#`

- **期待する値:** 関数の引数の位置で有効な JavaScript 式(分割代入のサポートを含む)。省略可能 - props がスロットに渡されることを期待している場合のみ必要です
- **期待する値:** 関数の引数の位置で有効な JavaScript 式(分割代入のサポートを含む)。省略可能 - プロパティがスロットに渡されることを期待している場合のみ必要です

- **引数:** スロット名(省略可能で、デフォルトは `default`

- **以下に限定:**

- `<template>`
- [コンポーネント](/guide/components/slots.html#scoped-slots)props ありの単独のデフォルトスロット用
- [コンポーネント](/guide/components/slots.html#scoped-slots)プロパティのある単独のデフォルトスロット用

- **例:**

Expand All @@ -397,7 +397,7 @@ props の受け取りを期待する名前付きスロットまたはスコー
</template>
</BaseLayout>
<!-- props を受け取る名前付きスロット -->
<!-- プロパティを受け取る名前付きスロット -->
<InfiniteScroll>
<template v-slot:item="slotProps">
<div class="item">
Expand All @@ -406,7 +406,7 @@ props の受け取りを期待する名前付きスロットまたはスコー
</template>
</InfiniteScroll>
<!-- props を受け取るデフォルトスロット、分割代入あり -->
<!-- プロパティを受け取るデフォルトスロット、分割代入あり -->
<Mouse v-slot="{ x, y }">
Mouse position: {{ x }}, {{ y }}
</Mouse>
Expand Down
6 changes: 3 additions & 3 deletions src/api/component-instance.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@

## $props {#props}

コンポーネントの現在の解決された props を表すオブジェクト
コンポーネントの現在の解決済みプロパティを表すオブジェクト

- ****

Expand All @@ -32,7 +32,7 @@

- **詳細**

[`props`](./options-state.html#props) オプションで宣言された props のみが含まれます。コンポーネントインスタンスは、その props オブジェクトのプロパティへのアクセスをプロキシします。
[`props`](./options-state.html#props) オプションで宣言されたプロパティのみが含まれます。コンポーネントインスタンスは、その props オブジェクトのプロパティへのアクセスをプロキシします。

## $el {#el}

Expand Down Expand Up @@ -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)

Expand Down
6 changes: 3 additions & 3 deletions src/api/composition-api-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` が渡されたら更新されます。

Expand All @@ -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'
Expand Down
6 changes: 3 additions & 3 deletions src/api/options-composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
- 利用可能なインジェクションで検索するキー(文字列またはシンボル)、または
- 次のようなオブジェクト:
- `from` プロパティは、利用可能なインジェクションを検索するためのキー(文字列またはシンボル)になっている。さらに
- `default` プロパティは、フォールバック値として使用されます。props のデフォルト値と同様に、複数のコンポーネントインスタンス間での値の共有を避けるために、オブジェクトタイプにもファクトリ関数が必要です。
- `default` プロパティは、フォールバック値として使用されます。コンポーネントプロパティのデフォルト値と同様に、複数のコンポーネントインスタンス間での値の共有を避けるために、オブジェクトタイプにもファクトリ関数が必要です。

一致するプロパティもデフォルト値も提供されなかった場合、注入されたプロパティは `undefined` となります。

Expand All @@ -103,7 +103,7 @@
}
```

注入された値を props のデフォルトとして使用する:
注入された値をプロパティのデフォルトとして使用する:

```js
const Child = {
Expand Down Expand Up @@ -154,7 +154,7 @@
}
```

props のデフォルトと同様に、プリミティブでない値にはファクトリー関数を使用する必要があります:
プロパティのデフォルトと同様に、プリミティブでない値にはファクトリー関数を使用する必要があります:

```js
const Child = {
Expand Down
2 changes: 1 addition & 1 deletion src/api/options-lifecycle.md
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@

- **詳細**

インスタンスが初期化されたときや、props を解決した後`data()``computed` などの他のオプションを処理する前に直ちに呼び出されます。
インスタンスが初期化されたときや、プロパティを解決した後`data()``computed` などの他のオプションを処理する前に直ちに呼び出されます。

Composition API`setup()` フックは、`beforeCreate()` を含めた Options API のどんなフックよりも先に呼び出されることに注意してください。

Expand Down
12 changes: 6 additions & 6 deletions src/api/options-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@

## props {#props}

コンポーネントの props を宣言します
コンポーネントプロパティを宣言します

- ****

Expand Down Expand Up @@ -78,18 +78,18 @@

- **詳細**

Vue では、コンポーネントの props はすべて明示的に宣言する必要があります。コンポーネントの props2 つの形式で宣言できます:
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 になっていてプロパティが渡されない場合、コンソールの警告が投げられます。

Expand Down Expand Up @@ -127,7 +127,7 @@

- **参照:**
- [ガイド - プロパティ](/guide/components/props.html)
- [ガイド - コンポーネントの props の型付け](/guide/typescript/options-api.html#typing-component-props) <sup class="vt-badge ts" />
- [ガイド - コンポーネントプロパティの型付け](/guide/typescript/options-api.html#typing-component-props) <sup class="vt-badge ts" />

## computed {#computed}

Expand Down
2 changes: 1 addition & 1 deletion src/api/reactivity-utilities.md
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@
</script>
```

コンポーネントの 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) では取得できないオプショナルなプロパティを扱えるようになります。

Expand Down
18 changes: 9 additions & 9 deletions src/api/render-function.md
Original file line number Diff line number Diff line change
Expand Up @@ -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[]
Expand All @@ -28,11 +28,11 @@
- **詳細**
第 1 引数には、文字列(ネイティブ要素の場合)または Vue コンポーネント定義を指定します。第 2 引数は渡される props で、第 3 引数は子要素です。
第 1 引数には、文字列(ネイティブ要素の場合)または Vue コンポーネント定義を指定します。第 2 引数は渡されるプロパティで、第 3 引数は子要素です。
コンポーネントの vnode を作成するとき、子要素はスロット関数として渡さなければなりません。コンポーネントがデフォルトのスロットのみを想定している場合、単一のスロット関数を渡すことができます。そうでない場合は、スロットはスロット関数のオブジェクトとして渡さなければなりません。
便宜上、子要素が slot オブジェクトでない場合は props 引数を省略できます
便宜上、子要素が slot オブジェクトでない場合はプロパティ引数を省略できます
- **例**
Expand All @@ -45,7 +45,7 @@
h('div')
h('div', { id: 'foo' })

// props では属性とプロパティの両方が使用可能
// 第 2 引数は属性とプロパティの両方が使用可能
// Vue は自動的に適切な方法で割り当てます
h('div', { class: 'bar', innerHTML: 'hello' })

Expand All @@ -59,7 +59,7 @@
// children は文字列でも構いません
h('div', { id: 'foo' }, 'hello')

// props がない場合は省略できます
// プロパティがない場合は省略できます
h('div', 'hello')
h('div', [h('span', 'hello')])

Expand All @@ -72,7 +72,7 @@
```js
import Foo from './Foo.vue'
// props を渡す
// プロパティを渡す
h(Foo, {
// some-prop="hello" と同等
someProp: 'hello',
Expand All @@ -84,7 +84,7 @@
h(Foo, () => 'default slot')
// 名前付きスロットを渡す
// スロットのオブジェクトが props として扱われないよう
// スロットのオブジェクトがプロパティとして扱われないよう
// `null` が必要
h(MyComponent, null, {
default: () => 'default slot',
Expand All @@ -97,7 +97,7 @@

## mergeProps() {#mergeprops}

複数の props オブジェクトをマージします。特定のプロパティには特別な処理があります。
複数のプロパティオブジェクトをマージします。特定のプロパティには特別な処理があります。

- ****

Expand All @@ -107,7 +107,7 @@

- **詳細**

`mergeProps()` は複数の props オブジェクトのマージをサポートし、以下のプロパティに対して特別な処理を行います:
`mergeProps()` は複数のプロパティオブジェクトのマージをサポートし、以下のプロパティに対して特別な処理を行います:

- `class`
- `style`
Expand Down
6 changes: 3 additions & 3 deletions src/api/sfc-script-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -313,7 +313,7 @@ const props = withDefaults(defineProps<Props>(), {
})
```

これは、同等な実行時の props の `default` オプションにコンパイルされます。さらに、`withDefaults` ヘルパーは、デフォルト値の型チェックを行います。また、返される `props` の型が、デフォルト値が宣言されているプロパティに対して、省略可能フラグが削除されていることを保証します。
これは、同等な実行時のプロパティの `default` オプションにコンパイルされます。さらに、`withDefaults` ヘルパーは、デフォルト値の型チェックを行います。また、返される `props` の型が、デフォルト値が宣言されているプロパティに対して、省略可能フラグが削除されていることを保証します。

## 制限 {#restrictions}

Expand Down
2 changes: 1 addition & 1 deletion src/guide/components/props.md
Original file line number Diff line number Diff line change
Expand Up @@ -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` オブジェクトがあるとします:

<div class="options-api">

Expand Down
2 changes: 1 addition & 1 deletion src/guide/components/provide-inject.md
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export default {

デフォルトでは、`inject` は注入されるキーが親チェーンのどこかで提供されることを想定しています。キーが提供されていない場合、実行時に警告が表示されます。

インジェクトされたプロパティをオプションのプロバイダーで動作させたい場合は、props と同様にデフォルト値を宣言する必要があります:
インジェクトされたプロパティをオプションのプロバイダーで動作させたい場合は、コンポーネントプロパティと同様にデフォルト値を宣言する必要があります:

<div class="composition-api">

Expand Down
Loading

1 comment on commit 9bfae49

@vercel
Copy link

@vercel vercel bot commented on 9bfae49 Feb 28, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docs-ja – ./

docs-ja-rose.vercel.app
docs-ja-git-main-vuejs.vercel.app
docs-ja-vuejs.vercel.app
ja.vuejs.org

Please sign in to comment.