From 3c57b04e7d997415ea19caa1c875a45ae5307a8c Mon Sep 17 00:00:00 2001 From: Jun Shindo <46585162+jay-es@users.noreply.github.com> Date: Thu, 23 Jan 2025 21:27:11 +0900 Subject: [PATCH] =?UTF-8?q?=E3=83=A1=E3=83=8B=E3=83=A5=E3=83=BC=E3=81=AE?= =?UTF-8?q?=E3=80=8C=E3=83=97=E3=83=AD=E3=83=91=E3=83=86=E3=82=A3=E3=80=8D?= =?UTF-8?q?=E3=82=92=20props=20=E3=81=AB=E5=A4=89=E6=9B=B4=20(#2491)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vitepress/config.ts | 2 +- src/api/options-composition.md | 2 +- src/api/options-state.md | 4 ++-- src/glossary/index.md | 2 +- src/guide/built-ins/suspense.md | 2 +- src/guide/built-ins/transition-group.md | 2 +- src/guide/components/props.md | 2 +- src/guide/essentials/component-basics.md | 4 ++-- src/guide/essentials/computed.md | 6 +++--- src/guide/essentials/list.md | 2 +- src/guide/essentials/watchers.md | 2 +- src/guide/extras/web-components.md | 8 ++++---- src/tutorial/src/step-8/description.md | 10 +++++----- 13 files changed, 24 insertions(+), 24 deletions(-) diff --git a/.vitepress/config.ts b/.vitepress/config.ts index 34a3b76e0..c017edc4f 100644 --- a/.vitepress/config.ts +++ b/.vitepress/config.ts @@ -200,7 +200,7 @@ export const sidebar: ThemeConfig['sidebar'] = { text: '登録', link: '/guide/components/registration' }, - { text: 'プロパティ', link: '/guide/components/props' }, + { text: 'props', link: '/guide/components/props' }, { text: 'イベント', link: '/guide/components/events' }, { text: 'コンポーネントの v-model', link: '/guide/components/v-model' }, { diff --git a/src/api/options-composition.md b/src/api/options-composition.md index d710821f0..f6d61bef7 100644 --- a/src/api/options-composition.md +++ b/src/api/options-composition.md @@ -84,7 +84,7 @@ - 利用可能なインジェクションで検索するキー（文字列またはシンボル）、または - 次のようなオブジェクト: - `from` プロパティは、利用可能なインジェクションを検索するためのキー（文字列またはシンボル）になっている。さらに - - `default` プロパティは、フォールバック値として使用されます。コンポーネントプロパティのデフォルト値と同様に、複数のコンポーネントインスタンス間での値の共有を避けるために、オブジェクトタイプにもファクトリ関数が必要です。 + - `default` プロパティは、フォールバック値として使用されます。コンポーネント props のデフォルト値と同様に、複数のコンポーネントインスタンス間での値の共有を避けるために、オブジェクトタイプにもファクトリ関数が必要です。 一致するプロパティもデフォルト値も提供されなかった場合、注入されたプロパティは `undefined` となります。 diff --git a/src/api/options-state.md b/src/api/options-state.md index 32fa38fe9..79ba51d8d 100644 --- a/src/api/options-state.md +++ b/src/api/options-state.md @@ -81,7 +81,7 @@ Vue では、コンポーネント props はすべて明示的に宣言する必要があります。コンポーネント props は、2 つの形式で宣言できます: - 文字列の配列を使用したシンプルな形式 - - キーが props 名、値が props の型（コンストラクタ関数）または詳細オプションになっているオブジェクトを使用した完全な形式 + - オブジェクトを使用した完全な形式。各プロパティのキーが props 名で、値は props の型（コンストラクタ関数）または詳細オプションになっているもの オブジェクトベースの構文では、各 props はさらに以下のオプションを定義できます: @@ -393,7 +393,7 @@ 発行されるイベントは、次の 2 つの形式で宣言できます: - 文字列の配列を使用したシンプルな形式 - - 各プロパティのキーがイベントの名前で、値が `null` またはバリデータ関数のいずれかであるオブジェクトを使用した完全な形式。 + - オブジェクトを使用した完全な形式。各プロパティのキーがイベント名で、値は `null` またはバリデータ関数になっているもの バリデーション関数は、コンポーネントの `$emit` 呼び出しに渡された追加の引数を受け取ります。 たとえば、`this.$emit('foo', 1)` が呼び出された場合、対応する `foo` のバリデータは引数 `1` を受け取ります。バリデータ関数は、イベントの引数が妥当かどうかを示す真偽値を返す必要があります。 diff --git a/src/glossary/index.md b/src/glossary/index.md index e0b9ea72c..91b550a4a 100644 --- a/src/glossary/index.md +++ b/src/glossary/index.md @@ -234,7 +234,7 @@ Vue では、**props** という用語の一般的な使い方が 3 つありま すべての場合において、props は他の場所から渡されるプロパティです。 -props の語源は **properties** ですが、Vue の文脈では props という用語はより具体的な意味を持っています。properties の略語として使用することは避けてください。 +props の語源は **properties**（プロパティ）ですが、Vue の文脈では props という用語はより具体的な意味を持っています。プロパティの略語として使用することは避けてください。 詳しくはこちらをご覧ください: - [ガイド - props](/guide/components/props.html) diff --git a/src/guide/built-ins/suspense.md b/src/guide/built-ins/suspense.md index 13e7f5e3c..4e7399919 100644 --- a/src/guide/built-ins/suspense.md +++ b/src/guide/built-ins/suspense.md @@ -161,7 +161,7 @@ Vue Router には、動的インポートを使用した [lazily loading compone ``` -もし `suspensible` プロパティを設定しなかった場合、内側の `` は親の `` から同期コンポーネントとして扱われます。つまり、独自のフォールバックスロットを持つことになり、両方の `Dynamic` コンポーネントが同時に変更された場合、子の `` が自身の依存関係ツリーをロードしている間に、空のノードや複数のパッチサイクルが発生する可能性があり、これは望ましくありません。`suspensible` が設定されていると、非同期な依存処理はすべて親の `` に委ねられ（発行されるイベントも含まれます）、内側の `` は依存関係の解決とパッチのための別の境界としてのみ機能します。 +もし `suspensible` props を設定しなかった場合、内側の `` は親の `` から同期コンポーネントとして扱われます。つまり、独自のフォールバックスロットを持つことになり、両方の `Dynamic` コンポーネントが同時に変更された場合、子の `` が自身の依存関係ツリーをロードしている間に、空のノードや複数のパッチサイクルが発生する可能性があり、これは望ましくありません。`suspensible` が設定されていると、非同期な依存処理はすべて親の `` に委ねられ（発行されるイベントも含まれます）、内側の `` は依存関係の解決とパッチのための別の境界としてのみ機能します。 --- diff --git a/src/guide/built-ins/transition-group.md b/src/guide/built-ins/transition-group.md index 04f18a3d9..0750ace4b 100644 --- a/src/guide/built-ins/transition-group.md +++ b/src/guide/built-ins/transition-group.md @@ -82,7 +82,7 @@ import ListStagger from './transition-demos/ListStagger.vue' ### カスタムトランジションクラス {#custom-transitiongroup-classes} -[`` のカスタムトランジションクラス](/guide/built-ins/transition.html#custom-transition-classes)と同様に、`` に `moveClass` プロパティを渡すことで、移動する要素のカスタムトランジションクラスを指定することもできます。 +[`` のカスタムトランジションクラス](/guide/built-ins/transition.html#custom-transition-classes)と同様に、`` に `moveClass` props を渡すことで、移動する要素のカスタムトランジションクラスを指定することもできます。 ## 時差をもたせたリストのトランジション {#staggering-list-transitions} diff --git a/src/guide/components/props.md b/src/guide/components/props.md index 37aa9acd1..94de41138 100644 --- a/src/guide/components/props.md +++ b/src/guide/components/props.md @@ -121,7 +121,7 @@ defineProps<{ ## リアクティブな props の分割代入 \*\* {#reactive-props-destructure} -Vue のリアクティビティシステムは、プロパティアクセスに基づいて状態の使用を追跡します。例えば、算出プロパティやウォッチャーで `props.foo` にアクセスすると、`foo` プロパティが依存関係として追跡されます。 +Vue のリアクティビティシステムは、プロパティアクセスに基づいて状態の使用を追跡します。例えば、算出プロパティやウォッチャーで `props.foo` にアクセスすると、`foo` props は依存関係として追跡されます。 そこで、以下のようなコードを考えます: diff --git a/src/guide/essentials/component-basics.md b/src/guide/essentials/component-basics.md index 536053d08..3d902624d 100644 --- a/src/guide/essentials/component-basics.md +++ b/src/guide/essentials/component-basics.md @@ -300,13 +300,13 @@ const posts = ref([ 動的な props の値を渡すための [`v-bind` 構文](/api/built-in-directives#v-bind)（`:title="post.title"`）の使い方に注目してください。これは、レンダリングするコンテンツを事前に正確に把握していない場合に特に役立ちます。 -props については以上となりますが、このページを読み終え内容に慣れてきたら、後ほど[props](/guide/components/props)の完全ガイドを読みにくることをおすすめします。 +props については以上となりますが、このページを読み終え内容に慣れてきたら、後ほど [props](/guide/components/props) の完全ガイドを読みにくることをおすすめします。 ## イベントの購読 {#listening-to-events} `` コンポーネントを開発していく中で、いくつかの機能については、親コンポーネントへの通信が必要になるかもしれません。例えば、ブログ記事のテキストを拡大し、ページの残りの部分はデフォルトのサイズのままにしておくアクセシビリティー機能を含めることにするかもしれません。 -親コンポーネントの中では、`postFontSize` という data propertyref を追加することで、この機能をサポートできます: +親コンポーネントの中では、`postFontSize` という data プロパティref を追加することで、この機能をサポートできます:
diff --git a/src/guide/essentials/computed.md b/src/guide/essentials/computed.md index 8d8b9999c..48c40f694 100644 --- a/src/guide/essentials/computed.md +++ b/src/guide/essentials/computed.md @@ -93,7 +93,7 @@ export default { ここでは、`publishedBooksMessage` という算出プロパティを宣言しています。 -アプリケーションの `data` プロパティ内の `books` 配列の値を変更してみると、それに応じて `publishedBooksMessage` の結果がどのように変化しているかがわかります。 +アプリケーションの `data` 内の `books` 配列の値を変更してみると、それに応じて `publishedBooksMessage` の結果がどのように変化しているかがわかります。 通常のプロパティと同じように、テンプレート内の算出プロパティにデータバインドすることもできます。Vue は `this.publishedBooksMessage` が `this.author.books` に依存していることを知っているので、`this.author.books` が変わると `this.publishedBooksMessage` に依存する全てのバインディングを更新します。 @@ -116,7 +116,7 @@ const author = reactive({ ] }) -// 算出プロパティの参照 +// 算出 ref const publishedBooksMessage = computed(() => { return author.books.length > 0 ? 'Yes' : 'No' }) @@ -263,9 +263,9 @@ const fullName = computed({ - 3.4 以上でのみサポートされています - 必要であれば、ゲッターの第 1 引数にアクセスすることで、算出プロパティが前回返した値を取得できます: +
```js diff --git a/src/guide/essentials/list.md b/src/guide/essentials/list.md index 4b73f0278..7feec83a1 100644 --- a/src/guide/essentials/list.md +++ b/src/guide/essentials/list.md @@ -432,7 +432,7 @@ methods: { ``` -算出プロパティの中で `reverse()` と `sort()` を使用するときは注意してください！これら 2 つのメソッドには、算出プロパティのゲッターの中では避けるべき、元の配列を変更するという作用があります。以下のように、これらのメソッドを呼び出す前には元の配列のコピーを作成します: +算出プロパティの中で `reverse()` と `sort()` を使用するときは注意してください！これら 2 つのメソッドは元の配列を変更するため、算出プロパティのゲッターの中では避けるべきです。以下のように、これらのメソッドを呼び出す前には元の配列のコピーを作成します: ```diff - return numbers.reverse() diff --git a/src/guide/essentials/watchers.md b/src/guide/essentials/watchers.md index 9e4423b34..b4908420c 100644 --- a/src/guide/essentials/watchers.md +++ b/src/guide/essentials/watchers.md @@ -362,7 +362,7 @@ watchEffect(async () => { - `watch` は明示的に示されたソースしか監視しません。コールバック内でアクセスされたものは追跡しません。加えて、コールバックはソースが実際に変更したときにのみ実行されます。`watch` は依存関係の追跡を副作用から分離します。それにより、コールバックをいつ実行するかをより正確にコントロールすることができます。 -- それに対して、`watchEffect` は依存先の追跡と副作用を 1 つのフェーズにまとめたものになります。同期処理を実行している間にアクセスしたすべてのリアクティブのプロパティを自動的に追跡します。これにより、より便利で一般的にコードが短くなりますが、そのリアクティブの依存先はあまり明示的にならなくなってしまいます。 +- それに対して、`watchEffect` は依存先の追跡と副作用を 1 つのフェーズにまとめたものになります。同期処理を実行している間にアクセスしたすべてのリアクティブなプロパティを自動的に追跡します。これにより、より便利で一般的にコードが短くなりますが、そのリアクティブの依存先はあまり明示的にならなくなってしまいます。
diff --git a/src/guide/extras/web-components.md b/src/guide/extras/web-components.md index a964df62b..824adb0b1 100644 --- a/src/guide/extras/web-components.md +++ b/src/guide/extras/web-components.md @@ -362,11 +362,11 @@ type DefineCustomElement< SelectedAttributes extends keyof ElementType = keyof ElementType > = new () => ElementType & { // テンプレート型のチェックに公開されるプロパティを定義するには、$props を使用します。 - // Vue は、特に `$props` 型からプロパティ定義を読み取ります。要素のプロパティを - // グローバルな HTML プロパティと Vue の特別なプロパティと組み合わせることに + // Vue は、特に `$props` 型から props 定義を読み取ります。要素の props を + // グローバルな HTML props と Vue の特別な props と組み合わせることに // 注意してください。 /** @deprecated カスタム要素参照では、$props プロパティを使用しないでください。 - これはテンプレートプロパティ型専用です。 */ + これはテンプレート props 型専用です。 */ $props: HTMLAttributes & Partial> & PublicProps @@ -375,7 +375,7 @@ type DefineCustomElement< // Vue は、イベントタイプを`$emit`タイプから読み取ります。 // `$emit` は、`Events` にマッピングする特定のフォーマットを必要とします。 /** @deprecated カスタム要素参照では $emit プロパティを使用しないでください。 - これはテンプレートプロパティ型専用です。 */ + これはテンプレート props 型専用です。 */ $emit: VueEmit } diff --git a/src/tutorial/src/step-8/description.md b/src/tutorial/src/step-8/description.md index b6a60a491..0b22b98e2 100644 --- a/src/tutorial/src/step-8/description.md +++ b/src/tutorial/src/step-8/description.md @@ -1,6 +1,6 @@ -# 算出プロパティー {#computed-property} +# 算出プロパティ {#computed-property} -前回のステップで作成した TODO リストの上に追加していきましょう。ここでは各 TODO にトグル機能を追加していきます。これは各 TODO オブジェクトに `done` プロパティーを追加して、チェックボックスにそれをバインドするために `v-model` を使います: +前回のステップで作成した TODO リストの上に追加していきましょう。ここでは各 TODO にトグル機能を追加していきます。これは各 TODO オブジェクトに `done` プロパティを追加して、チェックボックスにそれをバインドするために `v-model` を使います: ```vue-html{2}
  • @@ -13,7 +13,7 @@
    -算出プロパティーの紹介です。他のプロパティーからリアクティブに算出されたプロパティーを `computed` オプションを使用して宣言することができます: +算出プロパティの紹介です。他のプロパティからリアクティブに算出されたプロパティを `computed` オプションを使用して宣言することができます:
    @@ -99,6 +99,6 @@ createApp({ +
  • ``` -算出プロパティーは、その計算の中で使用される他のリアクティブステートを依存関係として追跡します。計算結果はキャッシュされて、依存関係が変更されると自動的に更新されます。 +算出プロパティは、その計算の中で使用される他のリアクティブステートを依存関係として追跡します。計算結果はキャッシュされて、依存関係が変更されると自動的に更新されます。 -では、 `filteredTodos` の算出プロパティーを追加して、その算出ロジックを実装してみましょう！　正しく実装されていれば、完了したアイテムを非表示にするときに、TODO のチェックをオフにすると、すぐにそのアイテムも非表示になるはずです。 +では、 `filteredTodos` の算出プロパティを追加して、その算出ロジックを実装してみましょう！　正しく実装されていれば、完了したアイテムを非表示にするときに、TODO のチェックをオフにすると、すぐにそのアイテムも非表示になるはずです。