リアクティビティとシグナル • Angular 日本語版

Angularでは、シグナルを使用して状態を作成および管理します。シグナルは、値をラップする軽量なラッパーです。

signal関数を用いて、ローカル状態を保持するためのシグナルを作成します。

import {signal} from '@angular/core';

// `signal` 関数でシグナルを作成します。
const firstName = signal('Morgan');

// シグナルの値を読み取るには、それを呼び出します。シグナルは関数です。
console.log(firstName());

// 新しい値を指定して `set` メソッドを呼び出すことで、このシグナルの値を変更します。
firstName.set('Jaime');

// `update` メソッドを使用して、
// 前の値に基づいて値を変更することもできます。
firstName.update((name) => name.toUpperCase());

Angularは、シグナルがどこで読み取られ、いつ更新されたかを追跡します。フレームワークはこの情報を使用して、新しい状態をDOMに更新するなど、追加の作業をします。時間の経過とともに変化するシグナル値に応答するこの機能は、リアクティビティとして知られています。

算出式

computedは、他のシグナルに基づいて値を生成するシグナルです。

import {signal, computed} from '@angular/core';

const firstName = signal('Morgan');
const firstNameCapitalized = computed(() => firstName().toUpperCase());

console.log(firstNameCapitalized()); // MORGAN

computedシグナルは読み取り専用です。setメソッドまたはupdateメソッドはありません。代わりに、computedシグナルの値は、読み取るシグナルのいずれかが変更されると自動的に変更されます。

import {signal, computed} from '@angular/core';

const firstName = signal('Morgan');
const firstNameCapitalized = computed(() => firstName().toUpperCase());
console.log(firstNameCapitalized()); // MORGAN

firstName.set('Jaime');
console.log(firstNameCapitalized()); // JAIME

コンポーネントでシグナルを使う

signalとcomputedをコンポーネント内で使用して、状態を作成および管理します。

@Component({
  /* ... */
})
export class UserProfile {
  isTrial = signal(false);
  isTrialExpired = signal(false);
  showTrialDuration = computed(() => this.isTrial() && !this.isTrialExpired());

  activateTrial() {
    this.isTrial.set(true);
  }
}

TIP: Angularのシグナルについてもっと知りたいですか？詳細なシグナルガイドを参照してください。

次の手順

動的なデータの宣言と管理方法を学習したので、テンプレート内でそのデータを使用する方法を学習する時間です。