0Pricing
Angular Academy · レッスン

setとupdateによるSignalの更新

リアクティブにSignalの値を変更します。

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

シグナルの変更

writableシグナルを変更する方法は2つあります。set()は値を置き換え、update()は現在の値から新しい値を導出します。

set()の使用

set(newValue)は、渡した値でシグナルの値全体を置き換えます。

const c = signal(0);
c.set(1);
console.log(c()); // 1

set()を使う場面

新しい値が古い値に依存しない場合はset()を使います。たとえば、ユーザー入力やAPIレスポンスから新しい値をそのまま設定する場合です。

const name = signal('');
name.set('Alice');
console.log(name()); // Alice

update()の使用

update(fn)は、現在の値を受け取り新しい値を返す関数を受け取ります。次の値が前の値に依存する場合に適しています。

const c = signal(0);
c.update(v => v + 1);
console.log(c()); // 1

update()でインクリメントする

典型的なカウンターでは、既存のカウントを基にインクリメントするためにupdate()を使用します。

const count = signal(10);
count.update(v => v + 1); // 11
count.update(v => v - 1); // 10

オブジェクトをイミュータブルに更新する

変更検知は参照を比較するため、オブジェクトを直接変更せずに置き換えます。古い値をスプレッドして新しいオブジェクトを作成します。

const point = signal({ x: 0, y: 0 });
point.update(p => ({ ...p, x: p.x + 1 }));
console.log(point()); // { x: 1, y: 0 }

配列をイミュータブルに更新する

配列の場合は、新しい配列を返します。既存の配列に対するpush/spliceは避け、スプレッド構文や新しい配列を返す配列メソッドを使用します。

const items = signal<string[]>(['a']);
items.update(arr => [...arr, 'b']);
console.log(items()); // ['a', 'b']

set()とupdate()のまとめ

set：最終的な値がすでに決まっている場合に使います。update：現在の値から最終的な値を計算する場合に使います。どちらも、値が実際に変化した場合はコンシューマーに通知します。

参照の同一性と変更

シグナルはデフォルトで、変更があったかどうかを判断するために参照の同一性（プリミティブの場合は値の同一性）を使用します。シグナルにまったく同じプリミティブ値を設定しても、依存先には通知されません。

const c = signal(5);
c.set(5); // no change, dependents not notified

ミューテーションが推奨されない理由

以前のAPIにはmutate()メソッドがありましたが、現在推奨されている方法は、set()とupdate()で新しい参照を返すイミュータブルな更新です。

メソッド内でのシグナル更新

コンポーネントでは、テンプレートからイベントハンドラー経由で呼び出せるメソッド内に、シグナルの更新処理をまとめます。

export class CounterComponent {
  count = signal(0);
  increment() { this.count.update(v => v + 1); }
  reset() { this.count.set(0); }
}

クイックチェック：set と update

目的に合ったツールを選んでください。

まとめ：シグナルの更新

値を置き換えるための set() と、現在の値から新しい値を導出するための update(fn) を学びました。また、参照の等価性で変更を検出できるように、オブジェクトや配列をイミュータブルに更新する方法も確認しました。次は、テンプレートでシグナルを直接使用する方法です。

よくある質問

「setとupdateによるSignalの更新」レッスンは無料ですか？

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

「setとupdateによるSignalの更新」で何を学びますか？

リアクティブにSignalの値を変更します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「setとupdateによるSignalの更新」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Signalとは
  2. Signalの作成と読み取り
  3. setとupdateによるSignalの更新
  4. テンプレート内のSignal
← Angular Academyに戻る