Skip to content

Commit a24df84

Browse files
committed
Merge remote-tracking branch 'upstream/lang-ja' into 02-refs
# Conflicts: # src/api/reactivity-api.md
2 parents b7ddb87 + e6486cd commit a24df84

File tree

3 files changed

+78
-78
lines changed

3 files changed

+78
-78
lines changed

src/api/basic-reactivity.md

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,39 @@
1-
# Basic Reactivity APIs
1+
# 基本のリアクティビティ API
22

3-
> This section uses [single-file component](../guide/single-file-component.html) syntax for code examples
3+
> このセクションでは、コード例に [単一ファイルコンポーネント](../guide/single-file-component.html) 構文を使用します
44
55
## `reactive`
66

7-
Returns a reactive copy of the object.
7+
オブジェクトのリアクティブなコピーを返します。
88

99
```js
1010
const obj = reactive({ count: 0 })
1111
```
1212

13-
The reactive conversion is "deep"—it affects all nested properties. In the [ES2015 Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) based implementation, the returned proxy is **not** equal to the original object. It is recommended to work exclusively with the reactive proxy and avoid relying on the original object.
13+
リアクティブの変換は「ディープ」で、ネストされたすべてのプロパティに影響します。[ES2015 Proxy](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy) ベースの実装では、返されたプロキシは元のオブジェクトとは等しく**ありません**。元のオブジェクトに依存せず、リアクティブプロキシのみで作業することをお勧めします。
1414

15-
**Typing:**
15+
**:**
1616

1717
```ts
1818
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>
1919
```
2020

2121
::: tip Note
22-
`reactive` will unwrap all the deep [refs](./refs-api.html#ref), while maintaining the ref reactivity
22+
`reactive` は、ref のリアクティビティを維持しながら、全ての深さの [ref](./refs-api.html#ref) をアンラップします
2323

2424
```ts
2525
const count = ref(1)
2626
const obj = reactive({ count })
2727
28-
// ref will be unwrapped
28+
// ref はアンラップされる
2929
console.log(obj.count === count.value) // true
3030
31-
// it will update `obj.count`
31+
// `obj.count` が更新される
3232
count.value++
3333
console.log(count.value) // 2
3434
console.log(obj.count) // 2
3535
36-
// it will also update `count` ref
36+
// `count` ref も更新される
3737
obj.count++
3838
console.log(obj.count) // 3
3939
console.log(count.value) // 3
@@ -42,7 +42,7 @@ console.log(count.value) // 3
4242
:::
4343

4444
::: warning Important
45-
When assigning a [ref](./refs-api.html#ref) to a `reactive` property, that ref will be automatically unwrapped.
45+
`reactive` のプロパティに [ref](./refs-api.html#ref) を代入すると、その ref は自動的にアンラップされます。
4646

4747
```ts
4848
const count = ref(1)
@@ -58,26 +58,26 @@ console.log(obj.count === count.value) // true
5858

5959
## `readonly`
6060

61-
Takes an object (reactive or plain) or a [ref](./refs-api.html#ref) and returns a readonly proxy to the original. A readonly proxy is deep: any nested property accessed will be readonly as well.
61+
(リアクティブもしくはプレーンな)オブジェクトや [ref](./refs-api.html#ref) を受け取り、オリジナルへの読み取り専用プロキシを返します。読み取り専用プロキシはディープで、つまりネストされたプロパティへのアクセスも同様に読み取り専用となります。
6262

6363
```js
6464
const original = reactive({ count: 0 })
6565
6666
const copy = readonly(original)
6767
6868
watchEffect(() => {
69-
// works for reactivity tracking
69+
// リアクティビティの追跡に機能する
7070
console.log(copy.count)
7171
})
7272
73-
// mutating original will trigger watchers relying on the copy
73+
// original を変更すると、copy に依存しているウォッチャがトリガされます
7474
original.count++
7575
76-
// mutating the copy will fail and result in a warning
76+
// copy の変更は失敗し、警告が表示されます
7777
copy.count++ // warning!
7878
```
7979

80-
As with [`reactive`](#reactive), if any property uses a `ref` it will be automatically unwrapped when it is accessed via the proxy:
80+
[`reactive`](#reactive) と同様に、プロパティが `ref` を使用している場合、プロキシ経由でアクセスされると自動的にアンラップされます:
8181

8282
```js
8383
const raw = {
@@ -92,11 +92,11 @@ console.log(copy.count) // 123
9292

9393
## `isProxy`
9494

95-
Checks if an object is a proxy created by [`reactive`](#reactive) or [`readonly`](#readonly).
95+
オブジェクトが [`reactive`](#reactive) または [`readonly`](#readonly) で作成されたプロキシかどうかをチェックします。
9696

9797
## `isReactive`
9898

99-
Checks if an object is a reactive proxy created by [`reactive`](#reactive).
99+
オブジェクトが [`reactive`](#reactive) で作成されたリアクティブプロキシかどうかをチェックします。
100100

101101
```js
102102
import { reactive, isReactive } from 'vue'
@@ -110,7 +110,7 @@ export default {
110110
}
111111
```
112112

113-
It also returns `true` if the proxy is created by [`readonly`](#readonly), but is wrapping another proxy created by [`reactive`](#reactive).
113+
また、[`readonly`](#readonly) で作成されたプロキシが、[`reactive`](#reactive) で作成された別のプロキシをラップしている場合も `true` を返します。
114114

115115
```js{7-15}
116116
import { reactive, isReactive, readonly } from 'vue'
@@ -119,13 +119,13 @@ export default {
119119
const state = reactive({
120120
name: 'John'
121121
})
122-
// readonly proxy created from plain object
122+
// プレーンオブジェクトから作成された読み取り専用プロキシ
123123
const plain = readonly({
124124
name: 'Mary'
125125
})
126126
console.log(isReactive(plain)) // -> false
127127
128-
// readonly proxy created from reactive proxy
128+
// リアクティブプロキシから作成された読み取り専用プロキシ
129129
const stateCopy = readonly(state)
130130
console.log(isReactive(stateCopy)) // -> true
131131
}
@@ -134,11 +134,11 @@ export default {
134134

135135
## `isReadonly`
136136

137-
Checks if an object is a readonly proxy created by [`readonly`](#readonly).
137+
オブジェクトが [`readonly`](#readonly) で作成された読み取り専用プロキシかどうかをチェックします。
138138

139139
## `toRaw`
140140

141-
Returns the raw, original object of a [`reactive`](#reactive) or [`readonly`](#readonly) proxy. This is an escape hatch that can be used to temporarily read without incurring proxy access/tracking overhead or write without triggering changes. It is **not** recommended to hold a persistent reference to the original object. Use with caution.
141+
[`reactive`](#reactive) [`readonly`](#readonly) プロキシの元のオブジェクトを返します。これは、プロキシのアクセス/トラッキングのオーバヘッドを発生させずに一時的に読み込んだり、変更をトリガせずに書き込んだりするために使える避難用ハッチです。元のオブジェクトへの永続的な参照を保持することは推奨**されません**。注意して使用してください。
142142

143143
```js
144144
const foo = {}
@@ -149,45 +149,45 @@ console.log(toRaw(reactiveFoo) === foo) // true
149149

150150
## `markRaw`
151151

152-
Marks an object so that it will never be converted to a proxy. Returns the object itself.
152+
プロキシに変換されないようにオブジェクトに印をつけます。オブジェクト自体を返します。
153153

154154
```js
155155
const foo = markRaw({})
156156
console.log(isReactive(reactive(foo))) // false
157157
158-
// also works when nested inside other reactive objects
158+
// 他のリアクティブオブジェクト内にネストされている場合にも機能します
159159
const bar = reactive({ foo })
160160
console.log(isReactive(bar.foo)) // false
161161
```
162162

163163
::: warning
164-
`markRaw` and the shallowXXX APIs below allow you to selectively opt-out of the default deep reactive/readonly conversion and embed raw, non-proxied objects in your state graph. They can be used for various reasons:
164+
`markRaw` や下記の shallowXXX API を使用すると、デフォルトのディープな reactive/readonly 変換を選択的にオプトアウトして、プロキシされていない生のオブジェクトを状態グラフに埋め込むことができます。これらは様々な理由で使用できます:
165165

166-
- Some values simply should not be made reactive, for example a complex 3rd party class instance, or a Vue component object.
166+
- 例えば、複雑なサードパーティのクラス・インスタンスや Vue のコンポーネント・オブジェクトなど、単純にリアクティブにすべきではない値もあります。
167167

168-
- Skipping proxy conversion can provide performance improvements when rendering large lists with immutable data sources.
168+
- プロキシの変換をスキップすることで、イミュータブルなデータソースで大きなリストをレンダリングする際のパフォーマンスを向上させることができます。
169169

170-
They are considered advanced because the raw opt-out is only at the root level, so if you set a nested, non-marked raw object into a reactive object and then access it again, you get the proxied version back. This can lead to **identity hazards** - i.e. performing an operation that relies on object identity but using both the raw and the proxied version of the same object:
170+
生のオプトアウトがルートレベルでのみ行われ、ネストされた、マークされていない生のオブジェクトをリアクティブオブジェクトにセットし、再びそれにアクセスすると、プロキシされたバージョンが戻ってくるので、これらは高度と考えられます。これにより、オブジェクトの同一性に依存する操作を実行するのに、同じオブジェクトの生のバージョンとプロキシされたバージョンの両方を使用するという、**同一性の危険**が生じる可能性があります:
171171

172172
```js
173173
const foo = markRaw({
174174
nested: {}
175175
})
176176
177177
const bar = reactive({
178-
// although `foo` is marked as raw, foo.nested is not.
178+
// `foo` raw として印をつけらているが、foo.nested はそうではない。
179179
nested: foo.nested
180180
})
181181
182182
console.log(foo.nested === bar.nested) // false
183183
```
184184

185-
Identity hazards are in general rare. However, to properly utilize these APIs while safely avoiding identity hazards requires a solid understanding of how the reactivity system works.
185+
同一性の危険は一般的にまれです。しかし、同一性の危険を安全に回避しながらこれらの API を適切に利用するには、リアクティブの仕組みをしっかりと理解する必要があります。
186186
:::
187187

188188
## `shallowReactive`
189189

190-
Creates a reactive proxy that tracks reactivity of its own properties but does not perform deep reactive conversion of nested objects (exposes raw values).
190+
自身のプロパティのリアクティビティを追跡するリアクティブプロキシを作成しますが、ネストされたオブジェクトのディープなリアクティブ変換は行いません(生の値を公開します)。
191191

192192
```js
193193
const state = shallowReactive({
@@ -197,18 +197,18 @@ const state = shallowReactive({
197197
}
198198
})
199199
200-
// mutating state's own properties is reactive
200+
// state 自身のプロパティを変更するのはリアクティブ
201201
state.foo++
202-
// ...but does not convert nested objects
202+
// ...しかしネストされたオブジェクトは変換されない
203203
isReactive(state.nested) // false
204-
state.nested.bar++ // non-reactive
204+
state.nested.bar++ // リアクティブではない
205205
```
206206

207-
Unlike [`reactive`](#reactive), any property that uses a [`ref`](/api/refs-api.html#ref) will **not** be automatically unwrapped by the proxy.
207+
[`reactive`](#reactive) と違って、[`ref`](/api/refs-api.html#ref) を使用しているプロパティはプロキシによって自動的にアンラップ**されません**
208208

209209
## `shallowReadonly`
210210

211-
Creates a proxy that makes its own properties readonly, but does not perform deep readonly conversion of nested objects (exposes raw values).
211+
自身のプロパティを読み取り専用にするプロキシを作成しますが、ネストされたオブジェクトのディープな読み取り専用の変換は行いません(生の値を公開します)。
212212

213213
```js
214214
const state = shallowReadonly({
@@ -218,11 +218,11 @@ const state = shallowReadonly({
218218
}
219219
})
220220
221-
// mutating state's own properties will fail
221+
// state 自身のプロパティを変更するのは失敗する
222222
state.foo++
223-
// ...but works on nested objects
223+
// ...しかしネストされたオブジェクトでは動作する
224224
isReadonly(state.nested) // false
225-
state.nested.bar++ // works
225+
state.nested.bar++ // 動作する
226226
```
227227

228-
Unlike [`readonly`](#readonly), any property that uses a [`ref`](/api/refs-api.html#ref) will **not** be automatically unwrapped by the proxy.
228+
[`readonly`](#readonly) と違って、[`ref`](/api/refs-api.html#ref) を使用しているプロパティはプロキシによって自動的にアンラップ**されません**

0 commit comments

Comments
 (0)