0Pricing
Angular Academy · レッスン

Computed Signal

自動的に更新される値を導出します。

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

Computedシグナルとは

computed()シグナルは、1つ以上のシグナルから値を導出します。ソースシグナルが変化すると、computed値は遅延評価されます。つまり、何かから読み取られたときにだけ再計算されます。

Computedシグナルは読み取り専用です。そのため、.set()を呼び出すことはできません。

computedの作成

computed()に関数を渡します。Angularは、その関数内で読み取ったすべてのシグナルを自動的に追跡します。

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

const price = signal(100);
const quantity = signal(2);

const total = computed(() => price() * quantity());

console.log(total()); // 200

依存関係の自動追跡

依存関係を手動で宣言する必要はありません。コールバック内でprice()とquantity()を読み取ると、それらは依存関係として自動的に登録されます。

シグナルが条件付きで読み取られ、その分岐に到達しなかった場合、その実行では追跡されません。

const showTax = signal(false);
const tax = signal(20);
const base = signal(100);

const final = computed(() =>
  showTax() ? base() + tax() : base()
);
// When showTax() is false, "tax" is NOT a dependency

遅延評価とメモ化

Computedは読み取られたときだけ実行され、結果をキャッシュします。ソースに変更がない状態で2回読み取っても、関数は1回だけ実行されます。

const a = signal(1);
const doubled = computed(() => {
  console.log('recompute');
  return a() * 2;
});

doubled(); // logs "recompute", returns 2
doubled(); // cached, returns 2, no log

Computedシグナルの連鎖

Computedシグナルは他のComputedシグナルに依存でき、リアクティブグラフを形成します。

const firstName = signal('Ada');
const lastName = signal('Lovelace');

const fullName = computed(() => firstName() + ' ' + lastName());
const greeting = computed(() => 'Hello, ' + fullName());

console.log(greeting()); // Hello, Ada Lovelace

コンポーネントでcomputedを使用する

Computedシグナルはコンポーネントで特に効果を発揮します。テンプレートは、computed値が実際に変化した場合にだけ再レンダリングされます。

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

@Component({
  selector: 'app-cart',
  template: '<p>Total: {{ total() }}</p>'
})
export class CartComponent {
  items = signal([10, 20, 30]);
  total = computed(() => this.items().reduce((a, b) => a + b, 0));
}

Computedは読み取り専用

Computedシグナルに値を設定しようとすると、コンパイル時エラーになります。Computedは、導出された状態を表現するためだけに存在します。

const count = signal(0);
const doubled = computed(() => count() * 2);

// doubled.set(10); // ERROR: Property 'set' does not exist
count.set(5);       // OK - update the source instead
console.log(doubled()); // 10

等価性と再計算のスキップ

ComputedはデフォルトでObject.isを使って比較します。新しいcomputed値が以前の値と等しい場合、依存元には通知されないため、不要な処理を避けられます。

const value = signal(2);
const isEven = computed(() => value() % 2 === 0);

// value 2 -> 4 -> 6 all yield isEven() === true
// Dependents of isEven do NOT re-run on those changes

カスタム等価性関数

equalオプションを渡すと、computedが変更されたとみなす条件を制御できます。オブジェクトや配列に便利です。

const data = signal({ id: 1, name: 'A' });

const view = computed(
  () => data(),
  { equal: (a, b) => a.id === b.id }
);
// Dependents re-run only when the id changes

computedで副作用を避ける

Computedは純粋でなければなりません。HTTP呼び出し、動作を目的としたログ出力、他のシグナルの変更などは行わないでください。副作用はeffect()に記述します。Computedを純粋に保つことで、リアクティブグラフを予測しやすくなります。

Computedとメソッドの比較

テンプレートのメソッドは、変更検知のサイクルごとに実行されます。Computedは依存関係が変化したときだけ実行され、結果をキャッシュします。導出値には、はるかに効率的です。

// Method: recalculates every CD cycle
getTotal() { return this.items().reduce((a, b) => a + b, 0); }

// Computed: memoized, runs only on item change
total = computed(() => this.items().reduce((a, b) => a + b, 0));

理解度チェック

Computedシグナルについて理解度を確認しましょう。

まとめ：Computedシグナル

computed()によって、依存関係の自動追跡、遅延評価、メモ化を備えた読み取り専用の導出シグナルを作成できることを学びました。

  • 副作用を入れず、純粋に保ちます。
  • 他のComputedシグナルに依存できます。
  • 変更検出をカスタマイズするにはequalを使用します。

次は、effect()を使った副作用の実行です。

よくある質問

「Computed Signal」レッスンは無料ですか？

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

「Computed Signal」で何を学びますか？

自動的に更新される値を導出します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「Computed Signal」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

  1. Computed Signal
  2. Effectsと副作用
  3. Effectのクリーンアップとライフサイクル
  4. linkedSignalと高度なパターン
← Angular Academyに戻る