Angular Academy · レッスン

computedによる状態の導出

Q: 「computedによる状態の導出」で何を学びますか？

基底状態から読み取り用モデルを構築します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

基底状態から読み取り用モデルを構築します

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

派生状態

状態は、別の状態から計算されることがよくあります。たとえば、商品の合計、フィルタリングされた一覧、妥当性フラグなどです。Angularのcomputed()は、他のシグナルから値を導出する読み取り専用シグナルを作成します。

computedの作成

computed()に関数を渡します。関数は他のシグナルを読み取り、値を返します。結果は依存先のいずれかが変化したときだけ再評価されます。

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

const price = signal(10);
const qty = signal(3);
const total = computed(() => price() * qty());
// total() === 30

依存関係の自動追跡

依存関係を宣言する必要はありません。関数内で読み取ったシグナルが自動的に依存関係になります。qtyが変化するとtotalが再計算され、無関係なシグナルが変化しても再計算されません。

メモ化

computed()は結果をキャッシュします。依存関係が変化するまでは、何度読み取っても関数は1回しか実行されません。そのため、多数のテンプレートバインディングから参照される派生読み取りモデルでも、低コストで利用できます。

const expensive = computed(() => heavyTransform(data()));
// reading expensive() repeatedly does not re-run heavyTransform

ストア内のcomputed

シグナルストア内で計算済みの読み取りモデルを公開すると、コンポーネントはテンプレートで再計算せず、すぐに描画できる値を利用できます。

@Injectable({ providedIn: 'root' })
export class CartStore {
  private _items = signal<Item[]>([]);
  readonly items = this._items.asReadonly();
  readonly count = computed(() => this._items().length);
  readonly subtotal = computed(() =>
    this._items().reduce((s, i) => s + i.price, 0));
}

computedの連鎖

計算済みシグナルは、他の計算済みシグナルを読み取れます。基礎となる導出結果を、より上位の読み取りモデルにつなぐように、層状に構築できます。

const subtotal = computed(() => items().reduce((s, i) => s + i.price, 0));
const tax = computed(() => subtotal() * 0.2);
const total = computed(() => subtotal() + tax());

フィルタリングと検索

よくある読み取りモデルとして、検索シグナルで一覧をフィルタリングする方法があります。一覧または検索クエリが変化するたびに、フィルタリング結果が更新されます。

const query = signal('');
const all = signal<User[]>([]);
const filtered = computed(() =>
  all().filter(u => u.name.toLowerCase().includes(query().toLowerCase())));

副作用なし

computed()の関数は純粋でなければなりません。シグナルを読み取り、値を返すだけにします。その中で状態を変更したり、APIを呼び出したり、他のシグナルに書き込んだりしないでください。副作用には代わりにeffect()を使います。

等価性と更新のスキップ

デフォルトでは、computedは参照の等価性（Object.is）を使って値が変化したか判断します。新しい値が古い値と等しければ利用側に通知されず、不要な処理を避けられます。

const status = computed(() => count() > 0 ? 'has' : 'empty');
// while count stays > 0 the string stays 'has' -> no downstream updates

テンプレートでのcomputedの使用

テンプレートでは、他のシグナルと同じように計算済みシグナルを読み取ります。Angularは、computedの値が実際に変化したバインディングだけを更新します。

@Component({
  template: '<p>Items: {{ store.count() }} — Total: {{ store.subtotal() }}</p>'
})
export class SummaryComponent {
  store = inject(CartStore);
}

computedとメソッドの違い

状態から導出され、自動更新とメモ化が必要な値にはcomputed()を使います。引数を受け取る単発の計算や、必要なときだけ実行する計算には通常のメソッドを使います。

確認問題

計算済みシグナルについての理解を確認します。

まとめ

computed()を使って派生状態を構築し、依存関係の自動追跡、メモ化された純粋関数、連鎖可能な読み取りモデル、等価性による更新のスキップを学びました。ストアから計算済みの読み取りモデルを公開すると、テンプレートを宣言的に保てます。

よくある質問

「computedによる状態の導出」レッスンは無料ですか？

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

「computedによる状態の導出」で何を学びますか？

基底状態から読み取り用モデルを構築しますブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

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

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

「computedによる状態の導出」レッスンにはどのくらい時間がかかりますか？

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

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

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

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

← Angular Academyに戻る