Skip to content

Commit 92ed280

Browse files
committed
translate reactivity in depth
1 parent 6b5e98e commit 92ed280

File tree

1 file changed

+37
-38
lines changed

1 file changed

+37
-38
lines changed

src/guide/reactivity.md

Lines changed: 37 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
# Reactivity in Depth
1+
# リアクティブの探求
22

3-
Now it’s time to take a deep dive! One of Vue’s most distinct features is the unobtrusive reactivity system. Models are proxied JavaScript objects. When you modify them, the view updates. It makes state management simple and intuitive, but it’s also important to understand how it works to avoid some common gotchas. In this section, we are going to dig into some of the lower-level details of Vue’s reactivity system.
3+
さらに深く見ていきましょう!Vue の最大の特徴の 1 つは、控えめなリアクティブシステムです。モデルはプロキシされた JavaScript オブジェクトです。それらを変更するとビューが更新されます。これは状態管理を非常にシンプルかつ直感的にしますが、よくある問題を避けるためにその仕組みを理解することも重要です。このセクションでは、Vue のリアクティブシステムに関する低レベルの詳細のいくつかを掘り下げていきます。
44

5-
## What is Reactivity?
5+
# リアクティブとは何か?
66

7-
This term comes up in programming quite a bit these days, but what do people mean when they say it? Reactivity is a programming paradigm that allows us to adjust to changes in a declarative manner. The canonical example that people usually show, because it’s a great one, is an excel spreadsheet.
7+
この言葉はここ最近のプログラミングで頻繁に目にしますが、それについて言及される時どういう意味で使われているでしょうか?リアクティブは宣言的な方法で変更に対応できるようにするプログラミングのパラダイムです。優れているが故に、標準的な例としてしばしば上げられるのが Excel のスプレッドシートです。
88

99
<video width="550" height="400" controls>
1010
<source src="/images/reactivity-spreadsheet.mp4" type="video/mp4">
1111
Your browser does not support the video tag.
1212
</video>
1313

14-
If you put the number two in the first cell, and the number 3 in the second and asked for the SUM, the spreadsheet would give it to you. No surprises there. But if you update that first number, the SUM automagically updates too.
14+
最初のセルに数字の 2 を入力し、2 番目のセルに数字の 3 を入力して SUM を要求すると、スプレッドシートは SUM の結果を返してくれます。なんの驚きもありません。ただし、最初のセルの数字を更新すると、 SUM の結果もなんと自動的に更新されます。
1515

16-
JavaScript doesn’t usually work like this -- If we were to write something comparable in JavaScript:
16+
JavaScript は通常このように機能しません。JavaScript で同等のものを書こうとしたら次のようになります:
1717

1818
```js
1919
var val1 = 2
@@ -29,17 +29,17 @@ val1 = 3
2929
// 5
3030
```
3131

32-
If we update the first value, the sum is not adjusted.
32+
最初の値を更新しても、合計値は調整されません。
3333

34-
So how would we do this in JavaScript?
34+
では、 JavaScript を使って以下の要素をどうやって実現するのでしょうか。
3535

36-
- Detect when there’s a change in one of the values
37-
- Track the function that changes it
38-
- Trigger the function so it can update the final value
36+
- いずれかの値に変化があった時に検出する
37+
- それを変更する関数を追跡する
38+
- 最終的な値を更新できるように関数を発火させる
3939

40-
## How Vue Tracks These Changes
40+
## Vue がこれらの変更を追跡する方法
4141

42-
When you pass a plain JavaScript object to an application or component instance as its `data` option, Vue will walk through all of its properties and convert them to [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) using a handler with getters and setters. This is an ES6-only feature, but we offer a version of Vue 3 that uses the older `Object.defineProperty` to support IE browsers. Both have the same surface API, but the Proxy version is slimmer and offers improved performance.
42+
プレーンな JavaScript オブジェクトを `data` オプションとしてアプリケーションまたはコンポーネントインスタンスに渡すと、Vue はそのすべてのプロパティを走査して、ゲッターとセッターのハンドラを使用しそれらを[プロキシ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)に変換します。 これは ES6 のみの機能ですが、旧式の `Object.defineProperty` を使用した Vue 3 のバージョンを IE ブラウザをサポートするために提供しています。どちらも表面的には同じ API を提供しますが、プロキシバージョンの方がよりスリムで、パフォーマンスが改良されています。
4343

4444
<div class="reactivecontent">
4545
<iframe height="500" style="width: 100%;" scrolling="no" title="Proxies and Vue's Reactivity Explained Visually" src="https://codepen.io/sdras/embed/zYYzjBg?height=500&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
@@ -48,9 +48,9 @@ When you pass a plain JavaScript object to an application or component instance
4848
</iframe>
4949
</div>
5050

51-
That was rather quick and requires some knowledge of [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) to understand! So let’s dive in a bit. There’s a lot of literature on Proxies, but what you really need to know is that a **Proxy is an object that encases another object or function and allows you to intercept it.**
51+
この例はかなり素早いので、理解するには[プロキシ](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Proxy)についての知識がある程度必要です!では、少し詳しく見ていきましょう。プロキシに関する文献はたくさんありますが、本当に知っておく必要があることは **プロキシは別のオブジェクトまたは関数を包み、操作を差し込むこと(intercept)ができるオブジェクトだということです。**
5252

53-
We use it like this: `new Proxy(target, handler)`
53+
proxy は次のように使用します: `new Proxy(target, handler)`
5454

5555
```js
5656
const dinner = {
@@ -69,7 +69,7 @@ console.log(proxy.meal)
6969
// tacos
7070
```
7171

72-
Ok, so far, we’re just wrapping that object and returning it. Cool, but not that useful yet. But watch this, we can also intercept this object while we wrap it in the Proxy. This interception is called a trap.
72+
今のところは、オブジェクトをラップしてそれをそのまま返すだけです。かっこいいですが、まだ役に立つ物ではありません。しかしこれを見てください。プロキシでラップしている中で、このオブジェクトに操作を差し込むこともできます。この操作の差し込みはトラップと呼ばれています。
7373

7474
```js
7575
const dinner = {
@@ -90,9 +90,9 @@ console.log(proxy.meal)
9090
// tacos
9191
```
9292

93-
Beyond a console log, we could do anything here we wish. We could even _not_ return the real value if we wanted to. This is what makes Proxies so powerful for creating APIs.
93+
コンソールログ以外にも、ここでは思い通りの操作が可能です。必要な場合は、実際の値を返さ _ない_ ようにすることさえできます。これにより、プロキシは API の作成において強力なものになっています。
9494

95-
Furthermore, there’s another feature Proxies offer us. Rather than just returning the value like this: `target[prop]`, we could take this a step further and use a feature called `Reflect`, which allows us to do proper `this` binding. It looks like this:
95+
さらに、プロキシは別の機能も提供してくれます。`target[prop]` のような値をただ返すだけではなく、これをさらに一歩進めて `this` のバインディングを適切に行うことができる `Reflect` と呼ばれる機能を使用することができます。これは次のようになります。
9696

9797
```js{7}
9898
const dinner = {
@@ -112,7 +112,7 @@ console.log(proxy.meal)
112112
// tacos
113113
```
114114

115-
We mentioned before that in order to have an API that updates a final value when something changes, we’re going to have to set new values when something changes. We do this in the handler, in a function called `track`, where we pass in the `target` and `key`.
115+
前述の通り、何らかの変更があった時に最終的な値を更新する API を実装するには、何らかの変更があった時に新しい値を設定する必要があるでしょう。この処理をハンドラー内の `track` という関数で、 `target` `key` を引数として渡して行います。
116116

117117
```js{7}
118118
const dinner = {
@@ -133,7 +133,7 @@ console.log(proxy.meal)
133133
// tacos
134134
```
135135

136-
Finally, we also set new values when something changes. For this, we’re going to set the changes on our new proxy, by triggering those changes:
136+
最後に、何らかの変更があった時に新しい値を設定します。このために、これらの変更を発火させることで、新しいプロキシに変更をセットします。
137137

138138
```js
139139
const dinner = {
@@ -158,19 +158,19 @@ console.log(proxy.meal)
158158
// tacos
159159
```
160160

161-
Remember this list from a few paragraphs ago? Now we have some answers to how Vue handles these changes:
161+
数段落前のこのリストを覚えていますか?これで Vue がこれらの変更を処理する方法に対するいくつかの回答が出揃いました。
162162

163-
- <strike>Detect when there’s a change in one of the values</strike>: we no longer have to do this, as Proxies allow us to intercept it
164-
- **Track the function that changes it**: We do this in a getter within the proxy, called `effect`
165-
- **Trigger the function so it can update the final value**: We do in a setter within the proxy, called `trigger`
163+
- <strike>いずれかの値に変化があった時に検出する</strike>: プロキシがそれに対する操作の差し込みを可能にしているため、その必要がなくなりました
164+
- **それを変更する関数を追跡する**: これは、 `effect` と呼ばれるプロキシ内のゲッターで行います
165+
- **最終的な値を更新できるように関数を発火させる**: `trigger` と呼ばれるプロキシ内のセッターで行います
166166

167-
The proxied object is invisible to the user, but under the hood they enable Vue to perform dependency-tracking and change-notification when properties are accessed or modified. As of Vue 3, our reactivity is now available in a [separate package](https://github.com/vuejs/vue-next/tree/master/packages/reactivity). One caveat is that browser consoles format differently when converted data objects are logged, so you may want to install [vue-devtools](https://github.com/vuejs/vue-devtools) for a more inspection-friendly interface.
167+
プロキシされたオブジェクトはユーザーには見えませんが、内部的にはプロパティがアクセスまたは変更されたときに、Vue が依存関係の追跡と変更通知を実行できるようになっています。 Vue 3 以降、リアクティブは[個別のパッケージ](https://github.com/vuejs/vue-next/tree/master/packages/reactivity)で利用できるようになりました。注意点の 1 つは、変換されたデータオブジェクトがログに記録された時は、ブラウザコンソールが違った整形をすることです。そのため、 [vue-devtools](https://github.com/vuejs/vue-devtools) をインストールして、より見やすいインターフェイスにすることをお勧めします。
168168

169-
### Proxied Objects
169+
## プロキシされたオブジェクト
170170

171-
Vue internally tracks all objects that have been made reactive, so it always returns the same proxy for the same object.
171+
Vue はリアクティブに作られたすべてのオブジェクトを内部的に追跡するため、常に同じオブジェクトに対して同じプロキシを返します。
172172

173-
When a nested object is accessed from a reactive proxy, that object is _also_ converted into a proxy before being returned:
173+
ネストされたオブジェクトがリアクティブプロキシからアクセスされると、次のようにそのオブジェクト __ 返却される前にプロキシに変換されます:
174174

175175
```js
176176
const handler = {
@@ -187,9 +187,9 @@ const handler = {
187187
}
188188
```
189189

190-
### Proxy vs. original identity
190+
## プロキシとオリジナルの同一性
191191

192-
The use of Proxy does introduce a new caveat to be aware with: the proxied object is not equal to the original object in terms of identity comparison (`===`). For example:
192+
プロキシを使用使うことにより、警戒すべき新しい注意点が発生します。プロキシ化されたオブジェクトは、同一性比較 (===) の点で元のオブジェクトと等しくないということです。 例えば:
193193

194194
```js
195195
const obj = {}
@@ -198,20 +198,19 @@ const wrapped = new Proxy(obj, handlers)
198198
console.log(obj === wrapped) // false
199199
```
200200

201-
The original and the wrapped version will behave the same in most cases, but be aware that they will fail
202-
operations that rely on strong identity comparisons, such as `.filter()` or `.map()`. This caveat is unlikely to come up when using the options API, because all reactive state is accessed from `this` and guaranteed to already be proxies.
201+
オリジナルとラップされたバージョンはほとんどの場合同じように動作しますが、 `.filter()``.map()` などの強力な同一性比較に依存する操作は失敗することに注意してください。オプション API を使用する場合、この注意点に出くわすことはほとんどありません。すべてのリアクティブな状態が `this` からアクセスされ、すでにプロキシだということが保証されているためです。
203202

204-
However, when using the composition API to explicitly create reactive objects, the best practice is to never hold a reference to the original raw object and only work with the reactive version:
203+
しかし、コンポジション API を使用して明示的にリアクティブオブジェクトを作成する場合、元の生のオブジェクトへの参照を保持せず、次のようにリアクティブバージョンでのみ処理をすることがベストプラクティスです:
205204

206205
```js
207206
const obj = reactive({
208207
count: 0
209208
}) // no reference to original
210209
```
211210

212-
## Watchers
211+
## ウォッチャ
213212

214-
Every component instance has a corresponding watcher instance, which records any properties "touched" during the component’s render as dependencies. Later on when a dependency’s setter is triggered, it notifies the watcher, which in turn causes the component to re-render.
213+
すべてのコンポーネントインスタンスには対応するウォッチャインスタンスがあり、コンポーネントのレンダリング中に「触れられた」プロパティを依存関係として記録します。後に依存関係にあるもののセッターが発火されると、ウォッチャーに通知され、コンポーネントが再レンダリングされます。
215214

216215
<div class="reactivecontent">
217216
<iframe height="500" style="width: 100%;" scrolling="no" title="Second Reactivity with Proxies in Vue 3 Explainer" src="https://codepen.io/sdras/embed/GRJZddR?height=500&theme-id=light&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true">
@@ -220,10 +219,10 @@ Every component instance has a corresponding watcher instance, which records any
220219
</iframe>
221220
</div>
222221

223-
When you pass an object to a component instance as data, Vue converts it to a proxy. This proxy enables Vue to perform dependency-tracking and change-notification when properties are accessed or modified. Each property is considered a dependency.
222+
オブジェクトをデータとしてコンポーネントインスタンスに渡すと、Vue はそれをプロキシに変換します。このプロキシにより、Vue はプロパティがアクセスまたは変更されたときに、依存関係の追跡と変更通知の実行ができるようになります。各プロパティは依存関係と見なされます。
224223

225-
After the first render, a component would have tracked a list of dependencies &mdash; the properties it accessed during the render. Conversely, the component becomes a subscriber to each of these properties. When a proxy intercepts a set operation, the property will notify all of its subscribed components to re-render.
224+
最初のレンダリングの後、コンポーネントはレンダリング中にアクセスしたプロパティを依存関係一覧として追跡します。逆に言えば、コンポーネントはこれらの各プロパティのサブスクライバーになります。プロキシがセット処理を傍受すると、プロパティはサブスクライブされているすべてのコンポーネントに再レンダリングを通知します。
226225

227226
[//]: # 'TODO: Insert diagram'
228227

229-
> If you are using Vue 2.x and below, you may be interested in some of the change detection caveats that exist for those versions, [explored in more detail here](change-detection.md).
228+
> Vue 2.x 以前を使用している場合は、それらのバージョンに存在する変更検出の注意点に興味があるかもしれません[詳細はこちらをご覧ください](change-detection.md)

0 commit comments

Comments
 (0)