Computedとメソッド
派生状態と更新メソッドを追加します
「Computedとメソッド」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
生の状態の先へ
便利なストアは、派生値と動作を公開します。SignalStore では、読み取りモデルに withComputed を、アクションに withMethods を使ってこれらを追加します。
withComputed
withComputed はストアの現在のシグナルを受け取り、computed() シグナルのオブジェクトを返します。通常の computed と同様にメモ化され、自動的に更新されます。
import { signalStore, withState, withComputed } from '@ngrx/signals';
import { computed } from '@angular/core';
export const CartStore = signalStore(
withState({ items: [] as Item[] }),
withComputed(({ items }) => ({
count: computed(() => items().length),
total: computed(() => items().reduce((s, i) => s + i.price, 0))
}))
);Computed の読み取り
Computed メンバーは状態と同じようにストア上に現れます。テンプレートで store.count() や store.total() を読み取ると、items の変更時に更新されます。
template: 'Items: {{ store.count() }} — {{ store.total() }}'withMethods
withMethods はストアを受け取り、名前付きメソッドを返します。内部では patchState を使って状態を不変的に更新します。
import { withMethods, patchState } from '@ngrx/signals';
withMethods((store) => ({
add(item: Item) {
patchState(store, (s) => ({ items: [...s.items, item] }));
},
clear() {
patchState(store, { items: [] });
}
}))メソッドでも状態を読み取る
メソッド内では、ストア引数から現在のシグナルを読み取り、更新前に処理を判断できます。
withMethods((store) => ({
toggle(id: string) {
const exists = store.items().some(i => i.id === id);
if (!exists) return;
patchState(store, (s) => ({
items: s.items.map(i => i.id === id ? { ...i, on: !i.on } : i)
}));
}
}))メソッドで computed を利用する
withComputed は withMethods より先に実行されるため、メソッドからストアがすでに公開している computed メンバーを読み取れます。
withMethods((store) => ({
checkout() {
if (store.total() === 0) return;
// proceed...
}
}))依存関係のインジェクション
withMethods はインジェクションコンテキストで実行されるため、内部で inject() を呼び出して HttpClient や router などのサービスを取得できます。
withMethods((store, http = inject(HttpClient)) => ({
load() {
http.get<Item[]>('/api/items')
.subscribe(items => patchState(store, { items }));
}
}))Feature の順序
Feature は上から下へ構成されます。withState を最初に置き、次に状態を読む withComputed、その後に状態と computed を読む withMethods を置きます。逆にすると型エラーになります。
カプセル化
コンポーネントは store.add(item) を呼び出したり、store.total() を読み取ったりします。patchState を直接呼び出すことはないため、すべての変更ロジックをストア内に保てます。
純粋な Computed と副作用を持つメソッド
withComputed の関数は純粋に保ち、値の導出だけを行わせます。HTTP 呼び出しやナビゲーションなどの副作用は withMethods 内に置きます。
メソッドのテスト
SignalStore はインジェクション可能なクラスです。テストでは TestBed からストアを提供し、メソッドを呼び出した後、状態と computed シグナルを同期的にアサートします。
const store = TestBed.inject(CartStore);
store.add({ id: '1', price: 10 });
expect(store.count()).toBe(1);
expect(store.total()).toBe(10);理解度チェック
computed と methods についての理解度を確認しましょう。
まとめ
withComputed でメモ化された読み取りモデルを、withMethods で patchState とインジェクションしたサービスを利用するカプセル化されたアクションを SignalStore に追加しました。Feature の順序により、各レイヤーが前のレイヤーを読み取れるようになります。
AI チューターと学ぶ HTML — 無料
ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。
- コース
- 38
- レッスン
- 144
よくある質問
「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フィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- SignalStoreの作成
- Computedとメソッド
- 非同期処理のためのrxMethod
- エンティティとカスタム機能