Skip to content

Commit 123b8d4

Browse files
authored
Guide > Composition API > Setup の翻訳を追従 (#283)
* Note that props can be accessed in template directly vuejs/docs@c05b8e6#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05 * fix: fixed link to unwrapping; close vuejs/docs@b3a53a2#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05 * Resolve props template usage composition api vuejs/docs@c84c5f3#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05 * docs: clarify the usage of toRefs and toRef for optional props vuejs/docs@a502ebe#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05 * docs: shallow unwrap on setup vuejs/docs@3e5e52e#diff-861c883c19deb5fffdbcbaf69ecc06bab99f7f21c623d3ea197fa227826b5c05 * fix: missing anchor link * fix: follow spelling inconsistencies ruls #94 * fix: translate 'render function'
1 parent 9eac4f1 commit 123b8d4

File tree

4 files changed

+37
-20
lines changed

4 files changed

+37
-20
lines changed

src/api/application-config.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ app.config.errorHandler = (err, vm, info) => {
3838
}
3939
```
4040

41-
コンポーネントの描画関数とウォッチャーに捕捉されなかったエラーのハンドラを割り当てます。ハンドラには、アプリケーションのインスタンスとエラーが渡されて呼び出されます。
41+
コンポーネントの Render 関数とウォッチャに捕捉されなかったエラーのハンドラを割り当てます。ハンドラには、アプリケーションのインスタンスとエラーが渡されて呼び出されます。
4242

4343
> エラートラッキングサービスの [Sentry](https://sentry.io/for/vue/) ならびに [Bugsnag](https://docs.bugsnag.com/platforms/browsers/vue/) は公式に連携のためのオプションを用意しています。
4444

src/guide/composition-api-setup.md

Lines changed: 32 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
# セットアップ
22

3-
> このセクションではコード例に[単一ファイルコンポーネント](single-file-component.html)のシンタックスを使います
3+
> このセクションではコード例に[単一ファイルコンポーネント](single-file-component.html)の構文を使います
44
5-
> このガイドは[コンポジション API の導入](composition-api-introduction.html)[リアクティブの基礎](reactivity-fundamentals.html)を既に読んでいることを想定しています。 コンポジション API に初めて触れる方は、まずそちらを読んでみてください。
5+
> このガイドは[Composition API の導入](composition-api-introduction.html)[リアクティブの基礎](reactivity-fundamentals.html)を既に読んでいることを想定しています。 Composition API に初めて触れる方は、まずそちらを読んでみてください。
66
77
## 引数
88

9-
`setup` 関数を使う時、2 つの引数を取ります:
9+
`setup` 関数を使う時、2つの引数を取ります:
1010

1111
1. `props`
1212
2. `context`
@@ -15,7 +15,7 @@
1515

1616
### プロパティ
1717

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

2020
```js
2121
// MyBook.vue
@@ -34,7 +34,7 @@ export default {
3434
しかし、`props` はリアクティブなので、**ES6 の分割代入を使うことができません。** props のリアクティブを削除してしまうからです。
3535
:::
3636

37-
もし、props を分割代入する必要がある場合は、`setup` 関数内で [toRefs](reactivity-fundamentals.html#destructuring-reactive-state) を使うことによって安全に分割代入を行うことができます。
37+
もし、props を分割代入する必要がある場合は、`setup` 関数内で [toRefs](reactivity-fundamentals.html#リアクティブな状態の分割代入) を使うことによって分割代入を行うことができます:
3838

3939
```js
4040
// MyBook.vue
@@ -48,9 +48,23 @@ setup(props) {
4848
}
4949
```
5050

51+
`title` オプションのプロパティである場合、 `props` から抜けている可能性があります。その場合、 `toRefs` では `title` の ref はつくられません。代わりに `toRef` を使う必要があります:
52+
53+
```js
54+
// MyBook.vue
55+
56+
import { toRef } from 'vue'
57+
58+
setup(props) {
59+
const title = toRef(props, 'title')
60+
61+
console.log(title.value)
62+
}
63+
```
64+
5165
### コンテキスト
5266

53-
`setup` 関数に渡される第二引数は `context` です。`context` は 3 つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。:
67+
`setup` 関数に渡される第2引数は `context` です。`context` は3つのコンポーネントプロパティを公開する一般的な JavaScript オブジェクトです。:
5468

5569
```js
5670
// MyBook.vue
@@ -69,7 +83,7 @@ export default {
6983
}
7084
```
7185

72-
`context` オブジェクトは一般的な JavaScript オブジェクトです。 すなわち、リアクティブではありません。これは `context` で ES6 分割代入を安全に使用できることを意味します。
86+
`context` オブジェクトは一般的な JavaScript オブジェクトです。すなわち、リアクティブではありません。これは `context` で ES6 分割代入を安全に使用できることを意味します。
7387

7488
```js
7589
// MyBook.vue
@@ -84,34 +98,37 @@ export default {
8498

8599
## コンポーネントプロパティへのアクセス
86100

87-
`setup` が実行されるとき、 コンポーネントインスタンスはまだ作成されていません。そのため、以下のプロパティにのみアクセスすることができます:
101+
`setup` が実行されるとき、 コンポーネントインスタンスはまだ作成されていません。そのため、以下のプロパティにのみアクセスすることができます:
88102

89103
- `props`
90104
- `attrs`
91105
- `slots`
92106
- `emit`
93107

94-
言い換えると、以下のコンポーネントオプションには**アクセスできません**:
108+
言い換えると、以下のコンポーネントオプションには**アクセスできません**:
95109

96110
- `data`
97111
- `computed`
98112
- `methods`
99113

100114
## テンプレートでの使用
101115

102-
`setup` がオブジェクトを返す場合、コンポーネントのテンプレート内でオブジェクトのプロパティにアクセスすることができます。:
116+
`setup` がオブジェクトを返す場合、コンポーネントのテンプレート内でオブジェクトのプロパティにアクセスすることができ、 `setup` に渡された `props` のプロパティも同じようにアクセスできます:
103117

104118
```vue-html
105119
<!-- MyBook.vue -->
106120
<template>
107-
<div>{{ readersNumber }} {{ book.title }}</div>
121+
<div>{{ collectionName }}: {{ readersNumber }} {{ book.title }}</div>
108122
</template>
109123
110124
<script>
111125
import { ref, reactive } from 'vue'
112126
113127
export default {
114-
setup() {
128+
props: {
129+
collectionName: String
130+
},
131+
setup(props) {
115132
const readersNumber = ref(0)
116133
const book = reactive({ title: 'Vue 3 Guide' })
117134
@@ -125,11 +142,11 @@ export default {
125142
</script>
126143
```
127144

128-
`setup` から返された [refs](../api/refs-api.html#ref) は、テンプレート内でアクセスされたときに[自動的にアンラップ](../api/refs-api.html#access-in-templates)されるので、テンプレート内で `.value` を使用すべきではないことに注意してください。
145+
`setup` から返された [refs](../api/refs-api.html#ref) は、テンプレート内でアクセスされたときに[自動的に浅いアンラップ](/guide/reactivity-fundamentals.html#ref-のアンラップ)されるので、テンプレート内で `.value` を使用すべきではないことに注意してください。
129146

130-
## 描画関数での使用
147+
## レンダリング関数での使用
131148

132-
`setup` は同じスコープで宣言されたリアクティブなステートを直接利用することができる描画関数を返すこともできます。:
149+
`setup` は同じスコープで宣言されたリアクティブなステートを直接利用することができるレンダリング関数を返すこともできます:
133150

134151
```js
135152
// MyBook.vue

src/guide/custom-directive.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@ directives: {
5252
- `beforeUpdate`: 束縛された要素を含むコンポーネントの VNode が更新される前に呼ばれます。
5353

5454
:::tip Note
55-
VNodes は[後で](render-function.html#the-virtual-dom-tree)詳細に扱います。描画関数を説明する時です
55+
VNodes は[後で](render-function.html#the-virtual-dom-tree)詳細に扱います。Render 関数を説明する時です
5656
:::
5757

5858
- `updated`: 束縛された要素を含むコンポーネントの VNode **とその子コンポーネントの VNode** が更新された後に呼ばれます。
@@ -212,7 +212,7 @@ return withDirectives(h('div'), [[vDemo, test]])
212212

213213
ここで `vDemo` はユーザによって記述されたディレクティブオブジェクトで、それは `mounted``updated` のフック関数を含みます。
214214

215-
`withDirectives` は複製した VNode を返します。複製された VNode は VNode のライフサイクルフック (詳細は[描画関数](render-function.html)を参照) としてラップ、注入されたユーザのフック関数を持ちます:
215+
`withDirectives` は複製した VNode を返します。複製された VNode は VNode のライフサイクルフック (詳細は[Render 関数](render-function.html)を参照) としてラップ、注入されたユーザのフック関数を持ちます:
216216

217217
```js
218218
{

src/guide/migration/transition.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,8 +52,8 @@ v2.1.8 では `v-enter-to` トランジションクラスを導入して、 ente
5252

5353
`<transition>` コンポーネントの関連するプロップ名も変更されます。
5454

55-
- `leave-class``leave-from-class` に名前が変更されます。(描画関数や JSX では `leaveFromClass` と書くことができます)
56-
- `enter-class``enter-from-class` に名前が変更されます。(描画関数や JSX では `leaveFromClass` と書くことができます)
55+
- `leave-class``leave-from-class` に名前が変更されます。(Render 関数や JSX では `leaveFromClass` と書くことができます)
56+
- `enter-class``enter-from-class` に名前が変更されます。(Render 関数や JSX では `leaveFromClass` と書くことができます)
5757

5858
## 移行の戦略
5959

0 commit comments

Comments
 (0)