Angular Academy · レッスン

イミュータブルな状態更新

Q: 「イミュータブルな状態更新」で何を学びますか？

Signalの状態にイミュータブルな更新を適用します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Signalの状態にイミュータブルな更新を適用します

「イミュータブルな状態更新」はCoddyKit上の無料Angular Academyレッスンです。これはレッスン3/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

不変性の理由

シグナルは参照によって変化を検知します。配列やオブジェクトをその場で変更すると参照が同じままになり、依存するcomputed()シグナルが再計算されないことがあります。常に新しい参照を生成します。

変更の落とし穴

既存の配列に対してpushすると、参照を変更せずに配列だけを変更してしまいます。これを避けてください。

// BAD: mutates in place, reference unchanged
this._items.update(list => { list.push(item); return list; });

配列でのスプレッド

スプレッド演算子で新しい配列を作成すると参照が変わり、利用側の処理が再実行されます。

// GOOD: new array reference
this._items.update(list => [...list, item]);

項目の削除

新しい配列を返し、元の配列には手を加えないfilter()を使います。

removeItem(id: string) {
  this._items.update(list => list.filter(i => i.id !== id));
}

1つの項目の更新

map()で新しい配列を返し、対象のオブジェクトをスプレッドして新しいコピーを作成します。これにより内部の参照も変わります。

markDone(id: string) {
  this._items.update(list =>
    list.map(i => i.id === id ? { ...i, done: true } : i));
}

オブジェクトでのスプレッド

オブジェクトの状態では、以前のオブジェクトをスプレッドし、変更するフィールドを上書きします。ネストされたオブジェクトにも同様にスプレッドが必要です。

private _profile = signal({ name: '', address: { city: '' } });

setCity(city: string) {
  this._profile.update(p => ({ ...p, address: { ...p.address, city } }));
}

新しい値によるset

状態全体を置き換える場合は、新しいオブジェクトをset()に渡すため、自然に不変性が保たれます。

reset() {
  this._profile.set({ name: '', address: { city: '' } });
}

computedが依存する理由

computedの読み取りモデルはシグナルの参照に依存するため、不変性を保った更新によって確実に再計算されます。同じ配列参照を保ったまま変更すると、合計やフィルター結果が気付かないうちに古いままになることがあります。

ヘルパーパターン

よく使う変換処理を小さな純粋ヘルパーに切り出すと、ストアのメソッドを読みやすく、一貫したものに保てます。

const upsert = (list: Item[], item: Item) =>
  list.some(i => i.id === item.id)
    ? list.map(i => i.id === item.id ? item : i)
    : [...list, item];

save(item: Item) { this._items.update(l => upsert(l, item)); }

深いネストへの注意

状態を深くネストすると、多数のスプレッドが必要になります。更新が困難になった場合は、状態の形を平坦化するか、複数のシグナルに分割して、各更新が小さな範囲だけに触れるようにします。

不変性がデバッグに役立つ

更新のたびに新しい参照が生成されるため、時間の経過に沿ってスナップショットを比較したり、変更前と変更後の状態をログに記録したりできます。隠れたインプレース編集を心配せずに、変更について推論できます。

理解度チェック

不変なシグナル更新についての理解度を確認しましょう。

まとめ

不変な更新パターンを学びました。配列とオブジェクトにはスプレッド構文、編集と削除には map/filter、set による新しい参照の生成を使います。また、参照の等価性により、正しいリアクティビティには不変性が不可欠である理由も学びました。

よくある質問

「イミュータブルな状態更新」レッスンは無料ですか？

はい。「イミュータブルな状態更新」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「イミュータブルな状態更新」で何を学びますか？

Signalの状態にイミュータブルな更新を適用しますブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン3/4です。

「イミュータブルな状態更新」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← Angular Academyに戻る