mirror of
https://github.com/affaan-m/everything-claude-code.git
synced 2026-06-14 04:01:30 +08:00
feat(ja-JP): add skill sub-reference translations (angular, remotion, etc.)
Translated 85 skill sub-reference files to achieve full parity with the English source: - skills/angular-developer/references/ — 35 files (all references) - skills/remotion-video-creation/rules/ — 28 files (all rules) - skills/tinystruct-patterns/references/ — 5 files - skills/openclaw-persona-forge/references/ — 6 files - skills/skill-comply/prompts/ — 3 files - skills/lead-intelligence/agents/ — 4 files - skills/brand-voice/references/ — 1 file - skills/frontend-slides/ — 2 files - hooks/memory-persistence/README.md — 1 file English source parity: 0 missing files (excluding rules/zh/, internal docs, and experimental examples absent from zh-CN)
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
# `linkedSignal` による依存状態の管理
|
||||
|
||||
`linkedSignal` 関数を使うと、別の状態と本質的に連動した書き込み可能な状態を作成できます。入力や他のシグナルから導出されたデフォルト値を持ちつつ、ユーザーが独立して変更できる状態に最適です。
|
||||
|
||||
ソース状態が変化すると、`linkedSignal` は新たに計算された値にリセットされます。
|
||||
|
||||
## 基本的な使い方
|
||||
|
||||
ソースに基づいて再計算するだけでよい場合は、計算関数を渡してください。`linkedSignal` は `computed` のように機能しますが、得られるシグナルは書き込み可能です(`.set()` や `.update()` を呼び出せます)。
|
||||
|
||||
```ts
|
||||
import { Component, signal, linkedSignal } from '@angular/core';
|
||||
|
||||
@Component({...})
|
||||
export class ShippingMethodPicker {
|
||||
shippingOptions = signal(['Ground', 'Air', 'Sea']);
|
||||
|
||||
// 最初のオプションをデフォルト値とする。
|
||||
// shippingOptions が変化すると、selectedOption は新しい最初のオプションにリセットされる。
|
||||
selectedOption = linkedSignal(() => this.shippingOptions()[0]);
|
||||
|
||||
changeShipping(index: number) {
|
||||
// このシグナルは手動で更新することもできる!
|
||||
this.selectedOption.set(this.shippingOptions()[index]);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## 高度な使い方:以前の状態を考慮する
|
||||
|
||||
ソース状態が変化したとき、ユーザーの手動選択がまだ有効であれば保持したい場合があります。その場合は、`source` と `computation` を持つオブジェクト構文を使います。
|
||||
|
||||
`computation` 関数は、ソースの新しい値と、以前のソース値および以前の `linkedSignal` 値を含む `previous` オブジェクトを受け取ります。
|
||||
|
||||
```ts
|
||||
interface ShippingMethod { id: number; name: string; }
|
||||
|
||||
@Component({...})
|
||||
export class ShippingMethodPicker {
|
||||
shippingOptions = signal<ShippingMethod[]>([
|
||||
{id: 0, name: 'Ground'}, {id: 1, name: 'Air'}, {id: 2, name: 'Sea'}
|
||||
]);
|
||||
|
||||
selectedOption = linkedSignal<ShippingMethod[], ShippingMethod>({
|
||||
source: this.shippingOptions,
|
||||
computation: (newOptions, previous) => {
|
||||
// 新たに読み込まれたオプションにユーザーが以前選択した
|
||||
// オプションが含まれていれば、そのまま選択を保持する。
|
||||
// そうでなければ、最初のオプションにリセットする。
|
||||
return newOptions.find(opt => opt.id === previous?.value.id) ?? newOptions[0];
|
||||
}
|
||||
});
|
||||
}
|
||||
```
|
||||
|
||||
### `linkedSignal` と `computed` と `effect` の使い分け
|
||||
|
||||
- `computed` を使う:状態が他の状態から**厳密に**導出されており、手動で更新すべきでない場合。
|
||||
- `linkedSignal` を使う:状態は他の状態から導出されているが、ユーザーが**必ず**オーバーライドまたは手動更新できる必要がある場合。
|
||||
- `effect` を使って一方の状態をもう一方に同期させることは**絶対にしない**。それはアンチパターンです。代わりに `computed` または `linkedSignal` を使ってください。
|
||||
Reference in New Issue
Block a user