Skip to content

Commit 43007c0

Browse files
authored
fix: translate linked-signal and resource guide (#1001)
1 parent 14e3e98 commit 43007c0

File tree

5 files changed

+298
-74
lines changed

5 files changed

+298
-74
lines changed
+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# `linkedSignal`
2+
3+
IMPORTANT: `linkedSignal` is [developer preview](reference/releases#developer-preview). It's ready for you to try, but it might change before it is stable.
4+
5+
You can use the `signal` function to hold some state in your Angular code. Sometimes, this state depends on some _other_ state. For example, imagine a component that lets the user select a shipping method for an order:
6+
7+
```typescript
8+
@Component({/* ... */})
9+
export class ShippingMethodPicker {
10+
shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();
11+
12+
// Select the first shipping option by default.
13+
selectedOption = signal(this.shippingOptions()[0]);
14+
15+
changeShipping(newOptionIndex: number) {
16+
this.selectedOption.set(this.shippingOptions()[newOptionIndex]);
17+
}
18+
}
19+
```
20+
21+
In this example, the `selectedOption` defaults to the first option, but changes if the user selects another option. But `shippingOptions` is a signal— its value may change! If `shippingOptions` changes, `selectedOption` may contain a value that is no longer a valid option.
22+
23+
**The `linkedSignal` function lets you create a signal to hold some state that is intrinsically _linked_ to some other state.** Revisiting the example above, `linkedSignal` can replace `signal`:
24+
25+
```typescript
26+
@Component({/* ... */})
27+
export class ShippingMethodPicker {
28+
shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();
29+
30+
// Initialize selectedOption to the first shipping option.
31+
selectedOption = linkedSignal(() => this.shippingOptions()[0]);
32+
33+
changeShipping(index: number) {
34+
this.selectedOption.set(this.shippingOptions()[index]);
35+
}
36+
}
37+
```
38+
39+
`linkedSignal` works similarly to `signal` with one key difference— instead of passing a default value, you pass a _computation function_, just like `computed`. When the value of the computation changes, the value of the `linkedSignal` changes to the computation result. This helps ensure that the `linkedSignal` always has a valid value.
40+
41+
The following example shows how the value of a `linkedSignal` can change based on its linked state:
42+
43+
```typescript
44+
const shippingOptions = signal(['Ground', 'Air', 'Sea']);
45+
const selectedOption = linkedSignal(() => shippingOptions()[0]);
46+
console.log(selectedOption()); // 'Ground'
47+
48+
selectedOption.set(shippingOptions[2]);
49+
console.log(selectedOption()); // 'Sea'
50+
51+
shippingOptions.set(['Email', 'Will Call', 'Postal service']);
52+
console.log(selectedOption()); // 'Email'
53+
```
54+
55+
## Accounting for previous state
56+
57+
In some cases, the computation for a `linkedSignal` needs to account for the previous value of the `linkedSignal`.
58+
59+
In the example above, `selectedOption` always updates back to the first option when `shippingOptions` changes. You may, however, want to preserve the user's selection if their selected option is still somewhere in the list. To accomplish this, you can create a `linkedSignal` with a separate _source_ and _computation_:
60+
61+
```typescript
62+
@Component({/* ... */})
63+
export class ShippingMethodPicker {
64+
shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();
65+
66+
selectedOption = linkedSignal({
67+
// `selectedOption` is set to the `computation` result whenever this `source` changes.
68+
source: shippingOptions,
69+
computation: (newOptions, previous) => {
70+
// If the newOptions contain the previously selected option, preserve that selection.
71+
// Otherwise, default to the first option.
72+
return newOptions.find(opt => opt.id === previous?.value) ?? newOptions[0];
73+
}
74+
});
75+
76+
changeShipping(newOptionIndex: number) {
77+
this.selectedOption.set(this.shippingOptions()[newOptionIndex]);
78+
}
79+
}
80+
```
81+
82+
When you create a `linkedSignal`, you can pass an object with separate `source` and `computation` properties instead of providing just a computation.
83+
84+
The `source` can be any signal, such as a `computed` or component `input`. When the value of `source` changes, `linkedSignal` updates its value to the result of the provided `computation`.
85+
86+
The `computation` is a function that receives the new value of `source` and a `previous` object. The `previous` object has two properties— `previous.source` is the previous value of `source`, and `previous.value` is the previous result of the `computation`. You can use these previous values to decide the new result of the computation.
87+
88+
## Custom equality comparison
89+
90+
`linkedSignal` updates to the result of the computation every time its linked state changes. By default, Angular uses referential equality to determine if the linked state has changed. You can alternatively provide a custom equality function.
91+
92+
```typescript
93+
const activeUser = signal({id: 123, name: 'Morgan'});
94+
const email = linkedSignal(() => `${activeUser().name}@example.com`, {
95+
// Consider the user as the same if it's the same `id`.
96+
equal: (a, b) => a.id === b.id,
97+
});
98+
99+
// Or, if separating `source` and `computation`
100+
const alternateEmail = linkedSignal({
101+
source: activeUser,
102+
computation: user => `${user.name}@example.com`,
103+
equal: (a, b) => a.id === b.id,
104+
});
105+
106+
// This update to `activeUser` does not cause `email` or `alternateEmail`
107+
// to update because the `id` is the same.
108+
activeUser.set({id: 123, name: 'Morgan', isAdmin: false});
109+
```

Diff for: adev-ja/src/content/guide/signals/linked-signal.md

+24-24
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
# `linkedSignal`
22

3-
IMPORTANT: `linkedSignal` is [developer preview](reference/releases#developer-preview). It's ready for you to try, but it might change before it is stable.
3+
IMPORTANT: `linkedSignal`[開発者プレビュー](reference/releases#developer-preview)です。試用できますが、安定版になる前に変更される可能性があります。
44

5-
You can use the `signal` function to hold some state in your Angular code. Sometimes, this state depends on some _other_ state. For example, imagine a component that lets the user select a shipping method for an order:
5+
`signal`関数は、Angularコードで状態を保持するために使用できます。この状態は、他の状態に依存することがあります。たとえば、ユーザーが注文の配送方法を選択できるコンポーネントを考えてみましょう。
66

77
```typescript
88
@Component({/* ... */})
99
export class ShippingMethodPicker {
1010
shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();
1111

12-
// Select the first shipping option by default.
12+
// デフォルトで最初の配送オプションを選択します。
1313
selectedOption = signal(this.shippingOptions()[0]);
1414

1515
changeShipping(newOptionIndex: number) {
1616
this.selectedOption.set(this.shippingOptions()[newOptionIndex]);
1717
}
1818
}
19-
```
19+
```
2020

21-
In this example, the `selectedOption` defaults to the first option, but changes if the user selects another option. But `shippingOptions` is a signal— its value may change! If `shippingOptions` changes, `selectedOption` may contain a value that is no longer a valid option.
21+
この例では、`selectedOption`は最初のオプションにデフォルト設定されますが、ユーザーが別のオプションを選択すると変更されます。しかし、`shippingOptions`はシグナルであり、その値は変更される可能性があります!`shippingOptions`が変更されると、`selectedOption`はもはや有効なオプションではない値を含む可能性があります。
2222

23-
**The `linkedSignal` function lets you create a signal to hold some state that is intrinsically _linked_ to some other state.** Revisiting the example above, `linkedSignal` can replace `signal`:
23+
**`linkedSignal`関数は、本質的に他の状態に_リンク_された状態を保持するシグナルを作成できます。**上記の例を再考すると、`linkedSignal``signal`を置き換えることができます。
2424

2525
```typescript
2626
@Component({/* ... */})
2727
export class ShippingMethodPicker {
2828
shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();
2929

30-
// Initialize selectedOption to the first shipping option.
30+
// selectedOptionを最初の配送オプションに初期化します。
3131
selectedOption = linkedSignal(() => this.shippingOptions()[0]);
3232

3333
changeShipping(index: number) {
@@ -36,9 +36,9 @@ export class ShippingMethodPicker {
3636
}
3737
```
3838

39-
`linkedSignal` works similarly to `signal` with one key difference— instead of passing a default value, you pass a _computation function_, just like `computed`. When the value of the computation changes, the value of the `linkedSignal` changes to the computation result. This helps ensure that the `linkedSignal` always has a valid value.
39+
`linkedSignal``signal`と同様に動作しますが、重要な違いが1つあります。デフォルト値を渡す代わりに、`computed`のように*算出関数*を渡します。算出値が変更されると、`linkedSignal`の値は計算結果に変更されます。これは、`linkedSignal`が常に有効な値を持つようにするのに役立ちます。
4040

41-
The following example shows how the value of a `linkedSignal` can change based on its linked state:
41+
次の例は、`linkedSignal`の値がリンクされた状態に基づいてどのように変化するかを示しています。
4242

4343
```typescript
4444
const shippingOptions = signal(['Ground', 'Air', 'Sea']);
@@ -52,23 +52,23 @@ shippingOptions.set(['Email', 'Will Call', 'Postal service']);
5252
console.log(selectedOption()); // 'Email'
5353
```
5454

55-
## Accounting for previous state
55+
## 以前の状態を考慮する
5656

57-
In some cases, the computation for a `linkedSignal` needs to account for the previous value of the `linkedSignal`.
57+
場合によっては、`linkedSignal`の計算で`linkedSignal`の以前の値を考慮する必要があります。
5858

59-
In the example above, `selectedOption` always updates back to the first option when `shippingOptions` changes. You may, however, want to preserve the user's selection if their selected option is still somewhere in the list. To accomplish this, you can create a `linkedSignal` with a separate _source_ and _computation_:
59+
上記の例では、`shippingOptions`が変更されると、`selectedOption`は常に最初のオプションに戻って更新されます。ただし、選択したオプションがリスト内にまだ存在する場合は、ユーザーの選択を維持したい場合があります。これを実現するには、別々の*ソース**算出*を使用して`linkedSignal`を作成できます。
6060

6161
```typescript
6262
@Component({/* ... */})
6363
export class ShippingMethodPicker {
6464
shippingOptions: Signal<ShippingMethod[]> = getShippingOptions();
6565

6666
selectedOption = linkedSignal({
67-
// `selectedOption` is set to the `computation` result whenever this `source` changes.
67+
// この`source`が変更されるたびに、`selectedOption``computation`の結果に設定されます。
6868
source: shippingOptions,
6969
computation: (newOptions, previous) => {
70-
// If the newOptions contain the previously selected option, preserve that selection.
71-
// Otherwise, default to the first option.
70+
// newOptionsに以前選択したオプションが含まれている場合、その選択を保持します。
71+
// そうでない場合は、最初のオプションをデフォルトとします。
7272
return newOptions.find(opt => opt.id === previous?.value) ?? newOptions[0];
7373
}
7474
});
@@ -79,31 +79,31 @@ export class ShippingMethodPicker {
7979
}
8080
```
8181

82-
When you create a `linkedSignal`, you can pass an object with separate `source` and `computation` properties instead of providing just a computation.
82+
`linkedSignal`を作成する際には、算出だけを提供する代わりに、個別の`source`プロパティと`computation`プロパティを持つオブジェクトを渡すことができます。
8383

84-
The `source` can be any signal, such as a `computed` or component `input`. When the value of `source` changes, `linkedSignal` updates its value to the result of the provided `computation`.
84+
`source`は、`computed`やコンポーネントの`input`などの任意のシグナルにできます。`source`の値が変更されると、`linkedSignal`は提供された`computation`の結果にその値を更新します。
8585

86-
The `computation` is a function that receives the new value of `source` and a `previous` object. The `previous` object has two properties— `previous.source` is the previous value of `source`, and `previous.value` is the previous result of the `computation`. You can use these previous values to decide the new result of the computation.
86+
`computation`は、`source`の新しい値と`previous`オブジェクトを受け取る関数です。`previous`オブジェクトには、`previous.source``source`の以前の値)、`previous.value``computation`の以前の結果)の2つのプロパティがあります。これらの以前の値を使用して、計算の新しい結果を決定できます。
8787

88-
## Custom equality comparison
88+
## カスタムの等価比較
8989

90-
`linkedSignal` updates to the result of the computation every time its linked state changes. By default, Angular uses referential equality to determine if the linked state has changed. You can alternatively provide a custom equality function.
90+
`linkedSignal`は、リンクされた状態が変更されるたびに算出の結果に更新されます。デフォルトでは、Angularは参照の等価性を使用して、リンクされた状態が変更されたかどうかを判断します。代わりに、カスタムの等価関数の指定ができます。
9191

9292
```typescript
9393
const activeUser = signal({id: 123, name: 'Morgan'});
9494
const email = linkedSignal(() => `${activeUser().name}@example.com`, {
95-
// Consider the user as the same if it's the same `id`.
95+
// `id`が同じであれば、ユーザーは同じとみなします。
9696
equal: (a, b) => a.id === b.id,
9797
});
9898

99-
// Or, if separating `source` and `computation`
99+
// または、`source``computation`を分離する場合
100100
const alternateEmail = linkedSignal({
101101
source: activeUser,
102102
computation: user => `${user.name}@example.com`,
103103
equal: (a, b) => a.id === b.id,
104104
});
105105

106-
// This update to `activeUser` does not cause `email` or `alternateEmail`
107-
// to update because the `id` is the same.
106+
// `activeUser`へのこの更新は、`id`が同じであるため、
107+
// `email`または`alternateEmail`を更新しません。
108108
activeUser.set({id: 123, name: 'Morgan', isAdmin: false});
109109
```

0 commit comments

Comments
 (0)