Skip to content

Commit 1d16136

Browse files
committed
API Reference > Computed and watch の翻訳
1 parent 5e73c4b commit 1d16136

File tree

2 files changed

+37
-37
lines changed

2 files changed

+37
-37
lines changed

src/api/computed-watch-api.md

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,21 @@
1-
# Computed and watch
1+
# computed と watch
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
## `computed`
66

7-
Takes a getter function and returns an immutable reactive [ref](./refs-api.html#ref) object for the returned value from the getter.
7+
ゲッタ関数を受け取り、ゲッタからの戻り値に対してイミュータブルでリアクティブな [ref](./refs-api.html#ref) オブジェクトを返します。
88

99
```js
1010
const count = ref(1)
1111
const plusOne = computed(() => count.value + 1)
1212

1313
console.log(plusOne.value) // 2
1414

15-
plusOne.value++ // error
15+
plusOne.value++ // エラー
1616
```
1717

18-
Alternatively, it can take an object with `get` and `set` functions to create a writable ref object.
18+
または、`get` `set` 関数のオブジェクトを受け取り、書き込み可能な ref オブジェクトを作成することもできます。
1919

2020
```js
2121
const count = ref(1)
@@ -30,16 +30,16 @@ plusOne.value = 1
3030
console.log(count.value) // 0
3131
```
3232

33-
**Typing:**
33+
**:**
3434

3535
```ts
36-
// read-only
36+
// 読み取り専用
3737
function computed<T>(
3838
getter: () => T,
3939
debuggerOptions?: DebuggerOptions
4040
): Readonly<Ref<Readonly<T>>>
4141

42-
// writable
42+
// 書き込み可能
4343
function computed<T>(
4444
options: {
4545
get: () => T
@@ -63,21 +63,21 @@ interface DebuggerEvent {
6363

6464
## `watchEffect`
6565

66-
Runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.
66+
依存関係をリアクティブに追跡しながら関数を即時実行し、依存関係が変更されるたびに関数を再実行します。
6767

6868
```js
6969
const count = ref(0)
7070

7171
watchEffect(() => console.log(count.value))
72-
// -> logs 0
72+
// -> 0 がログに出力される
7373

7474
setTimeout(() => {
7575
count.value++
76-
// -> logs 1
76+
// -> 1 がログに出力される
7777
}, 100)
7878
```
7979

80-
**Typing:**
80+
**:**
8181

8282
```ts
8383
function watchEffect(
@@ -86,7 +86,7 @@ function watchEffect(
8686
): StopHandle
8787

8888
interface WatchEffectOptions {
89-
flush?: 'pre' | 'post' | 'sync' // default: 'pre'
89+
flush?: 'pre' | 'post' | 'sync' // デフォルト: 'pre'
9090
onTrack?: (event: DebuggerEvent) => void
9191
onTrigger?: (event: DebuggerEvent) => void
9292
}
@@ -103,32 +103,32 @@ type InvalidateCbRegistrator = (invalidate: () => void) => void
103103
type StopHandle = () => void
104104
```
105105
106-
**See also**: [`watchEffect` guide](../guide/reactivity-computed-watchers.html#watcheffect)
106+
**参照**: [`watchEffect` ガイド](../guide/reactivity-computed-watchers.html#watcheffect)
107107
108108
## `watchPostEffect` <Badge text="3.2+" />
109109
110-
Alias of `watchEffect` with `flush: 'post'` option.
110+
`flush: 'post'` オプションがついた `watchEffect` のエイリアスです。
111111
112112
## `watchSyncEffect` <Badge text="3.2+" />
113113
114-
Alias of `watchEffect` with `flush: 'sync'` option.
114+
`flush: 'sync'` オプションがついた `watchEffect` のエイリアスです。
115115
116116
## `watch`
117117
118-
The `watch` API is the exact equivalent of the Options API [this.\$watch](./instance-methods.html#watch) (and the corresponding [watch](./options-data.html#watch) option). `watch` requires watching a specific data source and applies side effects in a separate callback function. It also is lazy by default - i.e. the callback is only called when the watched source has changed.
118+
`watch` API Options API [this.\$watch](./instance-methods.html#watch)(および対応する [watch](./options-data.html#watch) オプション)とまったく同等です。`watch` は特定のデータソースを監視する必要があり、別のコールバック関数で副作用を適用します。また、デフォルトでは遅延処理となります。つまり、監視対象のソースが変更されたときにのみコールバックが呼び出されます。
119119
120-
- Compared to [watchEffect](#watcheffect), `watch` allows us to:
120+
- [watchEffect](#watcheffect) と比較すると、`watch` では以下のことが可能です:
121121
122-
- Perform the side effect lazily;
123-
- Be more specific about what state should trigger the watcher to re-run;
124-
- Access both the previous and current value of the watched state.
122+
- 副作用を遅延実行できる。
123+
- どの状態がウォッチャの再実行をトリガすべきか、より具体的に指定できる。
124+
- 監視している状態の、以前の値と現在の値の両方にアクセスできる。
125125
126-
### Watching a Single Source
126+
### 単一のソースを監視する
127127
128-
A watcher data source can either be a getter function that returns a value, or directly a [ref](./refs-api.html#ref):
128+
ウォッチャのデータソースは、値を返すゲッタ関数か、直接 [ref](./refs-api.html#ref) を指定できます:
129129
130130
```js
131-
// watching a getter
131+
// ゲッタを監視
132132
const state = reactive({ count: 0 })
133133
watch(
134134
() => state.count,
@@ -137,31 +137,31 @@ watch(
137137
}
138138
)
139139

140-
// directly watching a ref
140+
// ref を直接監視
141141
const count = ref(0)
142142
watch(count, (count, prevCount) => {
143143
/* ... */
144144
})
145145
```
146146

147-
### Watching Multiple Sources
147+
### 複数のソースを監視する
148148

149-
A watcher can also watch multiple sources at the same time using an array:
149+
ウォッチャは配列を使って複数のソースを同時に監視することもできます:
150150

151151
```js
152152
watch([fooRef, barRef], ([foo, bar], [prevFoo, prevBar]) => {
153153
/* ... */
154154
})
155155
```
156156

157-
### Shared Behavior with `watchEffect`
157+
### `watchEffect` との共有動作
158158

159-
`watch` shares behavior with [`watchEffect`](#watcheffect) in terms of [manual stoppage](../guide/reactivity-computed-watchers.html#stopping-the-watcher), [side effect invalidation](../guide/reactivity-computed-watchers.html#side-effect-invalidation) (with `onInvalidate` passed to the callback as the 3rd argument instead), [flush timing](../guide/reactivity-computed-watchers.html#effect-flush-timing) and [debugging](../guide/reactivity-computed-watchers.html#watcher-debugging).
159+
`watch` [手動停止](../guide/reactivity-computed-watchers.html#監視の停止)[副作用の無効化](../guide/reactivity-computed-watchers.html#副作用の無効化)`onInvalidate` を第 3 引数としてコールバックに渡す)、[フラッシュのタイミング](../guide/reactivity-computed-watchers.html#作用フラッシュのタイミング)[デバッグ](../guide/reactivity-computed-watchers.html#watcher-のデバッグ)に関して、[`watchEffect`](#watcheffect) と動作を共有しています。
160160

161-
**Typing:**
161+
**:**
162162

163163
```ts
164-
// watching single source
164+
// 単一のソースを監視する
165165
function watch<T>(
166166
source: WatcherSource<T>,
167167
callback: (
@@ -172,7 +172,7 @@ function watch<T>(
172172
options?: WatchOptions
173173
): StopHandle
174174

175-
// watching multiple sources
175+
// 複数のソースを監視する
176176
function watch<T extends WatcherSource<unknown>[]>(
177177
sources: T
178178
callback: (
@@ -189,11 +189,11 @@ type MapSources<T> = {
189189
[K in keyof T]: T[K] extends WatcherSource<infer V> ? V : never
190190
}
191191

192-
// see `watchEffect` typing for shared options
192+
// 共有オプションについては `watchEffect` の型を参照
193193
interface WatchOptions extends WatchEffectOptions {
194-
immediate?: boolean // default: false
194+
immediate?: boolean // デフォルト: false
195195
deep?: boolean
196196
}
197197
```
198198

199-
**See also**: [`watch` guide](../guide/reactivity-computed-watchers.html#watch)
199+
**参照**: [`watch` ガイド](../guide/reactivity-computed-watchers.html#watch)

src/api/reactivity-api.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,5 +4,5 @@
44

55
- [Basic Reactivity APIs](/api/basic-reactivity.html)
66
- [Refs](/api/refs-api.html)
7-
- [Computed and watch](/api/computed-watch-api.html)
8-
- [Effect Scope API](/api/effect-scope.html)
7+
- [computed と watch](/api/computed-watch-api.html)
8+
- [Effect Scope API](/api/effect-scope.html)

0 commit comments

Comments
 (0)