Angular Academy · レッスン

Effectsと副作用

Q: 「Effectsと副作用」で何を学びますか？

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

EffectでSignalの変更に反応します。

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

Effectとは

effect()は、読み取ったシグナルのいずれかが変化するたびに関数を実行します。Computedとは異なり、Effectは副作用のために使用します。ログ出力、localStorageとの同期、APIの呼び出し、DOMの操作などが該当します。

Effectは値を返しません。

Effectの作成

Effectは最初にすぐ実行され、その後、追跡対象のシグナルが変化するたびに再実行されます。

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

const count = signal(0);

effect(() => {
  console.log('count is', count());
});
// logs "count is 0" immediately
count.set(5); // logs "count is 5"

Effectにはインジェクションコンテキストが必要

デフォルトでは、effect()はインジェクションコンテキスト内で作成する必要があります。通常は、コンポーネント、ディレクティブ、サービスのコンストラクターまたはフィールド初期化子が該当します。

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

@Component({ selector: 'app-x', template: '' })
export class XComponent {
  user = signal('guest');
  constructor() {
    effect(() => console.log('user:', this.user()));
  }
}

依存関係の自動追跡

Computedと同様に、Effectは実行時に読み取ったシグナルだけを正確に追跡します。条件付きの読み取りは、その分岐に到達した場合にだけ追跡されます。

const enabled = signal(true);
const value = signal(10);

effect(() => {
  if (enabled()) {
    console.log(value());
  }
});
// When enabled() is false, value is not a dependency

シグナルとlocalStorageの同期

Effectの代表的な用途は、状態が変化するたびに永続化することです。

const theme = signal('light');

effect(() => {
  localStorage.setItem('theme', theme());
});

theme.set('dark'); // writes "dark" to localStorage

Effectは値を返さない

導出値が必要な場合は、computed()を使用します。Effectは戻り値のないアクションに使うもので、結果そのものが副作用になります。

// WRONG: trying to derive state in an effect
// effect(() => this.total = this.a() + this.b());

// RIGHT: derive with computed
// total = computed(() => this.a() + this.b());

Effect内でのシグナルの設定

Angularはループを防ぐため、デフォルトではEffect内でのシグナルへの書き込みを許可しません。本当に必要な場合は{ allowSignalWrites: true }を渡しますが、導出処理にはcomputedを使うことを推奨します。

effect(() => {
  const v = source();
  derived.set(v * 2);
}, { allowSignalWrites: true });
// Use sparingly; computed() is usually better

EffectRefによる手動クリーンアップ

effect()はEffectRefを返します。.destroy()を呼び出すと、所有者が破棄される前にEffectを手動で停止できます。

import { effect, EffectRef } from '@angular/core';

const ref = effect(() => console.log(value()));
// later
ref.destroy(); // effect no longer runs

Effectは自動的にクリーンアップされる

コンポーネント内で作成したEffectは、コンポーネントが破棄されると自動的に破棄されます。通常、自分で.destroy()を呼び出す必要はほとんどありません。

Effectはレンダリング後に実行される

Effectはスケジュールされ、変更検知後にマイクロタスク単位でまとめて実行されます。同期的に複数のシグナルを変更しても、Effectは1回だけ実行されます。

const a = signal(0);

effect(() => console.log(a()));

a.set(1);
a.set(2);
a.set(3);
// Effect runs once with the final value 3 (batched)

Effectとcomputedの使い分け

computed：シグナルから値を導出します（純粋）。
effect：シグナルに反応して外部への処理を行います（非純粋）。

Effectから値を返したくなった場合は、おそらくcomputedを使うべきです。

理解度チェック

Effectについて理解度を確認しましょう。

まとめ：Effect

effect()は、追跡対象のシグナルが変化するたびに、副作用だけを目的として関数を実行します。

最初にすぐ実行され、その後は依存関係が変化するたびに実行されます。
インジェクションコンテキストが必要です。
所有者とともに自動的に破棄されます。手動で制御する場合はEffectRefを返します。
導出にはcomputedを、処理の実行にはeffectを使用します。

次は、Effect内のリソースをクリーンアップする方法です。

よくある質問

「Effectsと副作用」レッスンは無料ですか？

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

「Effectsと副作用」で何を学びますか？

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

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

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

「Effectsと副作用」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Angular Academyに戻る