Skip to content
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
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 引数 (省略可能) は、ルートコンポーネントに渡されるプロパティです
第 1 引数はルートコンポーネントです。第 2 引数 (省略可能) は、ルートコンポーネントに渡される props です

- **例**

Expand Down
20 changes: 10 additions & 10 deletions src/api/built-in-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ pageClass: api
import { h, Transition } from 'vue'

h(Transition, {
/* プロパティ */
/* props */
})
```

Expand All @@ -23,7 +23,7 @@ h(Transition, {

**単一の**要素またはコンポーネントにアニメーションのトランジションを提供します。

- **プロパティ**
- **props**

```ts
interface TransitionProps {
Expand Down Expand Up @@ -63,7 +63,7 @@ h(Transition, {
appear?: boolean

/**
* トランジションクラスをカスタマイズするためのプロパティ
* トランジションクラスをカスタマイズするための props
* テンプレートでは kebab-case を使用(例: enter-from-class="xxx")
*/
enterFromClass?: string
Expand Down Expand Up @@ -132,9 +132,9 @@ h(Transition, {

リスト内の**複数**の要素またはコンポーネントにトランジション効果を提供する。

- **プロパティ**
- **props**

`<TransitionGroup>` は `<Transition>` と同じプロパティ(`mode` 以外)と追加の 2 つのプロパティを受け取ります:
`<TransitionGroup>` は `<Transition>` と同じ props(`mode` 以外)と追加の 2 つの props を受け取ります:

```ts
interface TransitionGroupProps extends Omit<TransitionProps, 'mode'> {
Expand All @@ -156,11 +156,11 @@ h(Transition, {

- **詳細**

デフォルトでは、`<TransitionGroup>` はラッパー DOM 要素をレンダリングしませんが、 `tag` プロパティによって定義できます
デフォルトでは、`<TransitionGroup>` はラッパー DOM 要素をレンダリングしませんが、 `tag` props によって定義できます

アニメーションが正しく動作するためには、`<transition-group>` 内のすべての子に[**一意なキーを指定**](/guide/essentials/list#maintaining-state-with-key)する必要があることに注意してください。

`<TransitionGroup>` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス(`name` 属性から自動生成されるか、`move-class` プロパティで設定)が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。
`<TransitionGroup>` は CSS の transform による移動トランジションに対応しています。更新後に画面上の子の位置が変化した場合、移動用の CSS クラス(`name` 属性から自動生成されるか、`move-class` props で設定)が適用されます。移動用のクラスが適用されたときに、CSS の `transform` プロパティが「トランジション可能」であれば、その要素は [FLIP テクニック](https://aerotwist.com/blog/flip-your-animations/)を使って移動先までスムーズにアニメーションします。

- **例**

Expand All @@ -178,7 +178,7 @@ h(Transition, {

動的に切り替えられる、内側のコンポーネントをキャッシュします。

- **プロパティ**
- **props**

```ts
interface KeepAliveProps {
Expand Down Expand Up @@ -271,7 +271,7 @@ h(Transition, {

スロットの内容を DOM の別の場所にレンダリングします。

- **プロパティ**
- **props**

```ts
interface TeleportProps {
Expand Down Expand Up @@ -313,7 +313,7 @@ h(Transition, {

コンポーネントツリー内のネストした非同期な依存関係を管理するために使用します。

- **プロパティ**
- **props**

```ts
interface SuspenseProps {
Expand Down
20 changes: 10 additions & 10 deletions src/api/built-in-directives.md
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@

## v-bind {#v-bind}

1 つ以上の属性やコンポーネントのプロパティを式に動的にバインドします
1 つ以上の属性やコンポーネントの props を式に動的にバインドします

- **省略記法:** `:` or `.`(`.prop` 修飾子使用時)

Expand All @@ -275,7 +275,7 @@

要素にバインディングを設定するとき、Vue はデフォルトで、`in` 演算子チェックを使用して、プロパティとして定義されたキーが要素にあるかどうかを確認します。プロパティが定義されている場合、Vue はその値を属性ではなく DOM プロパティとして設定します。これはほとんどの場合において有効ですが、`.prop` や `.attr` という修飾子を明示的に使用することでこの動作をオーバーライドできます。これは、特に[カスタム要素を扱う](/guide/extras/web-components#passing-dom-properties)ときに必要になることがあります。

コンポーネントのプロパティをバインドするために使用する場合、そのプロパティは子コンポーネントで適切に宣言されている必要があります
コンポーネントの props をバインドするために使用する場合、その props は子コンポーネントで適切に宣言されている必要があります

引数なしで使用する場合、属性の名前と値のペアを含むオブジェクトをバインドするために使用できます。

Expand Down Expand Up @@ -309,10 +309,10 @@
<!-- 属性のオブジェクトをバインド -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>

<!-- プロパティのバインド。"prop" は子コンポーネントで宣言する必要があります。 -->
<!-- props のバインド。"prop" は子コンポーネントで宣言する必要があります。 -->
<MyComponent :prop="someThing" />

<!-- 親のプロパティを子コンポーネントと共有するために渡す -->
<!-- 親の props を子コンポーネントと共有するために渡す -->
<MyComponent v-bind="$props" />

<!-- XLink -->
Expand All @@ -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}

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

## v-slot {#v-slot}

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

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

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

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

- **以下に限定:**

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

- **例**

Expand All @@ -397,7 +397,7 @@
</template>
</BaseLayout>

<!-- プロパティを受け取る名前付きスロット -->
<!-- props を受け取る名前付きスロット -->
<InfiniteScroll>
<template v-slot:item="slotProps">
<div class="item">
Expand All @@ -406,7 +406,7 @@
</template>
</InfiniteScroll>

<!-- プロパティを受け取るデフォルトスロット、分割代入あり -->
<!-- props を受け取るデフォルトスロット、分割代入あり -->
<Mouse v-slot="{ x, y }">
Mouse position: {{ x }}, {{ y }}
</Mouse>
Expand Down
12 changes: 6 additions & 6 deletions src/api/built-in-special-elements.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

動的コンポーネントや動的な要素をレンダリングするための「メタ・コンポーネント」です。

- **プロパティ**
- **props**

```ts
interface DynamicComponentProps {
Expand All @@ -18,7 +18,7 @@

- **詳細**

実際にレンダリングするコンポーネントは `is` プロパティによって決定されます
実際にレンダリングするコンポーネントは `is` props によって決定されます

- `is` が文字列の場合、HTML タグ名か、コンポーネントの登録名となります。

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

例えば `<script setup>` などで、コンポーネント名ではなく、コンポーネント自体を `is` に渡す場合は、登録は必要ありません。

もし `v-model` が `<component>` タグで使用された場合、テンプレートコンパイラーは他のコンポーネントと同じように、`modelValue` プロパティと `update:modelValue` イベントリスナーに展開されます。しかし、これは `<input>` や `<select>` のようなネイティブ HTML 要素とは互換性がありません。そのため、動的に生成されるネイティブ要素に対して `v-model` を使用しても動作しません:
もし `v-model` が `<component>` タグで使用された場合、テンプレートコンパイラーは他のコンポーネントと同じように、`modelValue` props と `update:modelValue` イベントリスナーに展開されます。しかし、これは `<input>` や `<select>` のようなネイティブ HTML 要素とは互換性がありません。そのため、動的に生成されるネイティブ要素に対して `v-model` を使用しても動作しません:

```vue
<script setup>
Expand All @@ -114,12 +114,12 @@

テンプレート内でスロットコンテンツのアウトレットを表します。

- **プロパティ**
- **props**

```ts
interface SlotProps {
/**
* <slot> に渡されたすべてのプロパティは、スコープ付き
* <slot> に渡されたすべての props は、スコープ付き
* スロットの引数として渡されます
*/
[key: string]: any
Expand All @@ -132,7 +132,7 @@

- **詳細**

`<slot>` 要素では `name` 属性を使用してスロット名を指定できます。`name` が指定されない場合は、デフォルトのスロットがレンダリングされます。slot 要素に渡された追加の属性は、親で定義されたスコープ付きスロットにスロットプロパティとして渡されます
`<slot>` 要素では `name` 属性を使用してスロット名を指定できます。`name` が指定されない場合は、デフォルトのスロットがレンダリングされます。slot 要素に渡された追加の属性は、親で定義されたスコープ付きスロットにスロット props として渡されます

この要素そのものは、一致したスロットの内容に置き換えられます。

Expand Down
8 changes: 4 additions & 4 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#props) オプションで宣言されたプロパティのみが含まれます。コンポーネントインスタンスは、その props オブジェクトのプロパティへのアクセスをプロキシします。
[`props`](./options-state#props) オプションで宣言された props のみが含まれます。コンポーネントインスタンスは、その props オブジェクトのプロパティへのアクセスをプロキシします。

## $el {#el}

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

各スロットは、そのスロットの名前に対応するキーの下にある vnode の配列を返す関数として `this.$slots` で公開されます。デフォルトのスロットは `this.$slots.default` として公開されます。

スロットが[スコープ付きスロット](/guide/components/slots#scoped-slots)の場合、スロット関数に渡された引数はそのスロットのプロパティとして利用可能です
スロットが[スコープ付きスロット](/guide/components/slots#scoped-slots)の場合、スロット関数に渡された引数はそのスロット props として利用可能です

- **参照** [レンダー関数 - スロットのレンダリング](/guide/extras/render-function#rendering-slots)

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

- **詳細**

[フォールスルー属性](/guide/components/attrs)は、親コンポーネントから渡される属性やイベントハンドラーで、prop や子コンポーネントから発行されたイベントとして宣言されていないものです。
[フォールスルー属性](/guide/components/attrs)は、親コンポーネントから渡される属性やイベントハンドラーで、props や子コンポーネントから発行されたイベントとして宣言されていないものです。

デフォルトでは、ルート要素が 1 つしかない場合は `$attrs` に含まれるすべての要素がコンポーネントのルート要素に自動的に継承されます。コンポーネントに複数のルートノードがある場合、この動作は無効になります。また、[`inheritAttrs`](./options-misc#inheritattrs) オプションを使って明示的に無効化できます。

Expand Down
8 changes: 4 additions & 4 deletions src/api/composition-api-setup.md
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,9 @@ export default {

`setup()` は**同期的**にオブジェクトを返さなければなりません。`async setup()` が使用できるのは、そのコンポーネントが [Suspense](../guide/built-ins/suspense) コンポーネントの子孫であるときだけです。

## プロパティへのアクセス {#accessing-props}
## props へのアクセス {#accessing-props}

`setup` 関数の第 1 引数は `props` 引数です。標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい `props` が渡されたら更新されます。
`setup` 関数の第 1 引数は `props` 引数です。標準コンポーネントで期待するように、`setup` 関数内の `props` はリアクティブで、新しい props が渡されたら更新されます。

```js
export default {
Expand All @@ -59,9 +59,9 @@ export default {
}
```

もし、`props` オブジェクトを分割代入する場合は、分割代入された変数はリアクティビティーを失うことに注意してください。 そのため、常に `props.xxx` の形でプロパティにアクセスすることを推奨します
もし、`props` オブジェクトを分割代入する場合は、分割代入された変数はリアクティビティーを失うことに注意してください。 そのため、常に `props.xxx` の形で props にアクセスすることを推奨します

もし、本当にプロパティを分割代入すること、もしくはリアクティビティーを保持しながら外部の関数に渡すことが必要なら、 ユーティリティー API である [toRefs()](./reactivity-utilities#torefs) や [toRef()](/api/reactivity-utilities#toref) を使用することで、行うことができます:
もし、本当に props を分割代入したり、もしくはリアクティビティーを保持しながら外部の関数に渡すことが必要なら、 ユーティリティー API である [toRefs()](./reactivity-utilities#torefs) や [toRef()](/api/reactivity-utilities#toref) を使用することで、行うことができます:

```js
import { toRefs, toRef } from 'vue'
Expand Down
8 changes: 4 additions & 4 deletions src/api/general.md
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ Vue の現在のバージョンを公開します。

`defineComponent()` には、Composition API と[レンダー関数か JSX](/guide/extras/render-function.html) で使うための代替シグネチャーもあります。

オプションオブジェクトを渡す代わりに、関数を受け取ります。この関数は、Composition API の [`setup()`](/api/composition-api-setup.html#composition-api-setup) 関数と同じ働きをします: つまりプロパティと setup コンテキストを受け取ります。戻り値はレンダー関数であるべきで、`h()` と JSX の両方がサポートされています:
オプションオブジェクトを渡す代わりに、関数を受け取ります。この関数は、Composition API の [`setup()`](/api/composition-api-setup.html#composition-api-setup) 関数と同じ働きをします: つまり props と setup コンテキストを受け取ります。戻り値はレンダー関数であるべきで、`h()` と JSX の両方がサポートされています:

```js
import { ref, h } from 'vue'
Expand All @@ -148,7 +148,7 @@ Vue の現在のバージョンを公開します。
return h('div', count.value)
}
},
// 追加のオプション(例: プロパティやエミットの宣言など
// 追加のオプション(例: props や emits の宣言など
{
props: {
/* ... */
Expand All @@ -170,14 +170,14 @@ Vue の現在のバージョンを公開します。
return <div>{count.value}</div>
}
},
// 現在のところ、手動による実行時プロパティの宣言はまだ必要です
// 現在のところ、手動によるランタイム props 宣言はまだ必要です
{
props: ['msg', 'list']
}
)
```

将来的には、実行時プロパティを自動的に推論して注入する Babel プラグインを提供し(SFC の `defineProps` のように)、実行時プロパティの宣言を省略できるようにする予定です
将来的には、ランタイム props を自動的に推論して注入する Babel プラグインを提供し(SFC の `defineProps` のように)、ランタイム props 宣言を省略できるようにする予定です

### webpack のツリーシェイキングに関する注意 {#note-on-webpack-treeshaking}

Expand Down
4 changes: 2 additions & 2 deletions src/api/options-composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 @@

- **詳細**

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

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

Expand Down
Loading