Skip to content

Commit

Permalink
メニューの「プロパティ」を props に変更 (#2491)
Browse files Browse the repository at this point in the history
  • Loading branch information
jay-es authored Jan 23, 2025
1 parent 9817f6e commit 3c57b04
Show file tree
Hide file tree
Showing 13 changed files with 24 additions and 24 deletions.
2 changes: 1 addition & 1 deletion .vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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' },
{
Expand Down
2 changes: 1 addition & 1 deletion src/api/options-composition.md
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@
- 利用可能なインジェクションで検索するキー(文字列またはシンボル)、または
- 次のようなオブジェクト:
- `from` プロパティは、利用可能なインジェクションを検索するためのキー(文字列またはシンボル)になっている。さらに
- `default` プロパティは、フォールバック値として使用されます。コンポーネントプロパティのデフォルト値と同様に、複数のコンポーネントインスタンス間での値の共有を避けるために、オブジェクトタイプにもファクトリ関数が必要です。
- `default` プロパティは、フォールバック値として使用されます。コンポーネント props のデフォルト値と同様に、複数のコンポーネントインスタンス間での値の共有を避けるために、オブジェクトタイプにもファクトリ関数が必要です。
一致するプロパティもデフォルト値も提供されなかった場合、注入されたプロパティは `undefined` となります。
Expand Down
4 changes: 2 additions & 2 deletions src/api/options-state.md
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
Vue では、コンポーネント props はすべて明示的に宣言する必要があります。コンポーネント props は、2 つの形式で宣言できます:
- 文字列の配列を使用したシンプルな形式
- キーが props 名、値が props の型(コンストラクタ関数)または詳細オプションになっているオブジェクトを使用した完全な形式
- オブジェクトを使用した完全な形式。各プロパティのキーが props 名で、値は props の型(コンストラクタ関数)または詳細オプションになっているもの
オブジェクトベースの構文では、各 props はさらに以下のオプションを定義できます:
Expand Down Expand Up @@ -393,7 +393,7 @@
発行されるイベントは、次の 2 つの形式で宣言できます:
- 文字列の配列を使用したシンプルな形式
- 各プロパティのキーがイベントの名前で、値が `null` またはバリデータ関数のいずれかであるオブジェクトを使用した完全な形式。
- オブジェクトを使用した完全な形式。各プロパティのキーがイベント名で、値は `null` またはバリデータ関数になっているもの
バリデーション関数は、コンポーネントの `$emit` 呼び出しに渡された追加の引数を受け取ります。 たとえば、`this.$emit('foo', 1)` が呼び出された場合、対応する `foo` のバリデータは引数 `1` を受け取ります。バリデータ関数は、イベントの引数が妥当かどうかを示す真偽値を返す必要があります。
Expand Down
2 changes: 1 addition & 1 deletion src/glossary/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -234,7 +234,7 @@ Vue では、**props** という用語の一般的な使い方が 3 つありま

すべての場合において、props は他の場所から渡されるプロパティです。

props の語源は **properties** ですが、Vue の文脈では props という用語はより具体的な意味を持っています。properties の略語として使用することは避けてください
props の語源は **properties**(プロパティ)ですが、Vue の文脈では props という用語はより具体的な意味を持っています。プロパティの略語として使用することは避けてください

詳しくはこちらをご覧ください:
- [ガイド - props](/guide/components/props.html)
Expand Down
2 changes: 1 addition & 1 deletion src/guide/built-ins/suspense.md
Original file line number Diff line number Diff line change
Expand Up @@ -161,7 +161,7 @@ Vue Router には、動的インポートを使用した [lazily loading compone
</Suspense>
```

もし `suspensible` プロパティを設定しなかった場合、内側の `<Suspense>` は親の `<Suspense>` から同期コンポーネントとして扱われます。つまり、独自のフォールバックスロットを持つことになり、両方の `Dynamic` コンポーネントが同時に変更された場合、子の `<Suspense>` が自身の依存関係ツリーをロードしている間に、空のノードや複数のパッチサイクルが発生する可能性があり、これは望ましくありません。`suspensible` が設定されていると、非同期な依存処理はすべて親の `<Suspense>` に委ねられ(発行されるイベントも含まれます)、内側の `<Suspense>` は依存関係の解決とパッチのための別の境界としてのみ機能します。
もし `suspensible` props を設定しなかった場合、内側の `<Suspense>` は親の `<Suspense>` から同期コンポーネントとして扱われます。つまり、独自のフォールバックスロットを持つことになり、両方の `Dynamic` コンポーネントが同時に変更された場合、子の `<Suspense>` が自身の依存関係ツリーをロードしている間に、空のノードや複数のパッチサイクルが発生する可能性があり、これは望ましくありません。`suspensible` が設定されていると、非同期な依存処理はすべて親の `<Suspense>` に委ねられ(発行されるイベントも含まれます)、内側の `<Suspense>` は依存関係の解決とパッチのための別の境界としてのみ機能します。

---

Expand Down
2 changes: 1 addition & 1 deletion src/guide/built-ins/transition-group.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ import ListStagger from './transition-demos/ListStagger.vue'

### カスタムトランジションクラス {#custom-transitiongroup-classes}

[`<Transition>` のカスタムトランジションクラス](/guide/built-ins/transition.html#custom-transition-classes)と同様に、`<TransitionGroup>``moveClass` プロパティを渡すことで、移動する要素のカスタムトランジションクラスを指定することもできます。
[`<Transition>` のカスタムトランジションクラス](/guide/built-ins/transition.html#custom-transition-classes)と同様に、`<TransitionGroup>``moveClass` props を渡すことで、移動する要素のカスタムトランジションクラスを指定することもできます。

## 時差をもたせたリストのトランジション {#staggering-list-transitions}

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 @@ -121,7 +121,7 @@ defineProps<{

## リアクティブな props の分割代入 <sup class="vt-badge" data-text="3.5+" /> \*\* {#reactive-props-destructure}

Vue のリアクティビティシステムは、プロパティアクセスに基づいて状態の使用を追跡します。例えば、算出プロパティやウォッチャーで `props.foo` にアクセスすると、`foo` プロパティが依存関係として追跡されます
Vue のリアクティビティシステムは、プロパティアクセスに基づいて状態の使用を追跡します。例えば、算出プロパティやウォッチャーで `props.foo` にアクセスすると、`foo` props は依存関係として追跡されます

そこで、以下のようなコードを考えます:

Expand Down
4 changes: 2 additions & 2 deletions src/guide/essentials/component-basics.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}

`<BlogPost>` コンポーネントを開発していく中で、いくつかの機能については、親コンポーネントへの通信が必要になるかもしれません。例えば、ブログ記事のテキストを拡大し、ページの残りの部分はデフォルトのサイズのままにしておくアクセシビリティー機能を含めることにするかもしれません。

親コンポーネントの中では、`postFontSize` という <span class="options-api">data property</span><span class="composition-api">ref</span> を追加することで、この機能をサポートできます:
親コンポーネントの中では、`postFontSize` という <span class="options-api">data プロパティ</span><span class="composition-api">ref </span>を追加することで、この機能をサポートできます:

<div class="options-api">

Expand Down
6 changes: 3 additions & 3 deletions src/guide/essentials/computed.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export default {

ここでは、`publishedBooksMessage` という算出プロパティを宣言しています。

アプリケーションの `data` プロパティ内の `books` 配列の値を変更してみると、それに応じて `publishedBooksMessage` の結果がどのように変化しているかがわかります。
アプリケーションの `data` 内の `books` 配列の値を変更してみると、それに応じて `publishedBooksMessage` の結果がどのように変化しているかがわかります。

通常のプロパティと同じように、テンプレート内の算出プロパティにデータバインドすることもできます。Vue は `this.publishedBooksMessage``this.author.books` に依存していることを知っているので、`this.author.books` が変わると `this.publishedBooksMessage` に依存する全てのバインディングを更新します。

Expand All @@ -116,7 +116,7 @@ const author = reactive({
]
})
// 算出プロパティの参照
// 算出 ref
const publishedBooksMessage = computed(() => {
return author.books.length > 0 ? 'Yes' : 'No'
})
Expand Down Expand Up @@ -263,9 +263,9 @@ const fullName = computed({

- 3.4 以上でのみサポートされています


必要であれば、ゲッターの第 1 引数にアクセスすることで、算出プロパティが前回返した値を取得できます:


<div class="options-api">

```js
Expand Down
2 changes: 1 addition & 1 deletion src/guide/essentials/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -432,7 +432,7 @@ methods: {
</ul>
```

算出プロパティの中で `reverse()``sort()` を使用するときは注意してください!これら 2 つのメソッドには、算出プロパティのゲッターの中では避けるべき、元の配列を変更するという作用があります。以下のように、これらのメソッドを呼び出す前には元の配列のコピーを作成します:
算出プロパティの中で `reverse()``sort()` を使用するときは注意してください!これら 2 つのメソッドは元の配列を変更するため、算出プロパティのゲッターの中では避けるべきです。以下のように、これらのメソッドを呼び出す前には元の配列のコピーを作成します:

```diff
- return numbers.reverse()
Expand Down
2 changes: 1 addition & 1 deletion src/guide/essentials/watchers.md
Original file line number Diff line number Diff line change
Expand Up @@ -362,7 +362,7 @@ watchEffect(async () => {

- `watch` は明示的に示されたソースしか監視しません。コールバック内でアクセスされたものは追跡しません。加えて、コールバックはソースが実際に変更したときにのみ実行されます。`watch` は依存関係の追跡を副作用から分離します。それにより、コールバックをいつ実行するかをより正確にコントロールすることができます。

- それに対して、`watchEffect` は依存先の追跡と副作用を 1 つのフェーズにまとめたものになります。同期処理を実行している間にアクセスしたすべてのリアクティブのプロパティを自動的に追跡します。これにより、より便利で一般的にコードが短くなりますが、そのリアクティブの依存先はあまり明示的にならなくなってしまいます。
- それに対して、`watchEffect` は依存先の追跡と副作用を 1 つのフェーズにまとめたものになります。同期処理を実行している間にアクセスしたすべてのリアクティブなプロパティを自動的に追跡します。これにより、より便利で一般的にコードが短くなりますが、そのリアクティブの依存先はあまり明示的にならなくなってしまいます。

</div>

Expand Down
8 changes: 4 additions & 4 deletions src/guide/extras/web-components.md
Original file line number Diff line number Diff line change
Expand Up @@ -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<Pick<ElementType, SelectedAttributes>> &
PublicProps
Expand All @@ -375,7 +375,7 @@ type DefineCustomElement<
// Vue は、イベントタイプを`$emit`タイプから読み取ります。
// `$emit` は、`Events` にマッピングする特定のフォーマットを必要とします。
/** @deprecated カスタム要素参照では $emit プロパティを使用しないでください。
これはテンプレートプロパティ型専用です*/
これはテンプレート props 型専用です*/
$emit: VueEmit<Events>
}

Expand Down
10 changes: 5 additions & 5 deletions src/tutorial/src/step-8/description.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# 算出プロパティー {#computed-property}
# 算出プロパティ {#computed-property}

前回のステップで作成した TODO リストの上に追加していきましょう。ここでは各 TODO にトグル機能を追加していきます。これは各 TODO オブジェクトに `done` プロパティーを追加して、チェックボックスにそれをバインドするために `v-model` を使います:
前回のステップで作成した TODO リストの上に追加していきましょう。ここでは各 TODO にトグル機能を追加していきます。これは各 TODO オブジェクトに `done` プロパティを追加して、チェックボックスにそれをバインドするために `v-model` を使います:

```vue-html{2}
<li v-for="todo in todos">
Expand All @@ -13,7 +13,7 @@

<div class="options-api">

<a target="_blank" href="/guide/essentials/computed.html">算出プロパティー</a>の紹介です。他のプロパティーからリアクティブに算出されたプロパティーを `computed` オプションを使用して宣言することができます:
<a target="_blank" href="/guide/essentials/computed.html">算出プロパティ</a>の紹介です。他のプロパティからリアクティブに算出されたプロパティを `computed` オプションを使用して宣言することができます:

<div class="sfc">

Expand Down Expand Up @@ -99,6 +99,6 @@ createApp({
+ <li v-for="todo in filteredTodos">
```

算出プロパティーは、その計算の中で使用される他のリアクティブステートを依存関係として追跡します。計算結果はキャッシュされて、依存関係が変更されると自動的に更新されます。
算出プロパティは、その計算の中で使用される他のリアクティブステートを依存関係として追跡します。計算結果はキャッシュされて、依存関係が変更されると自動的に更新されます。

では、 `filteredTodos` の算出プロパティーを追加して、その算出ロジックを実装してみましょう! 正しく実装されていれば、完了したアイテムを非表示にするときに、TODO のチェックをオフにすると、すぐにそのアイテムも非表示になるはずです。
では、 `filteredTodos` の算出プロパティを追加して、その算出ロジックを実装してみましょう! 正しく実装されていれば、完了したアイテムを非表示にするときに、TODO のチェックをオフにすると、すぐにそのアイテムも非表示になるはずです。

0 comments on commit 3c57b04

Please sign in to comment.