エンティティとカスタム機能
withEntitiesでコレクションを管理します
「エンティティとカスタム機能」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
コレクションの管理
レコードのリスト（todo、ユーザー、商品）は非常によく使われるため、NgRx には正規化された状態とすぐに使える更新関数で管理する withEntities が用意されています。
withEntities
withEntities は、id をキーとする項目を entityMap と順序付きの ids 配列に保存し、リストの entities computed シグナルを公開します。
import { withEntities } from '@ngrx/signals/entities';
export const TodoStore = signalStore(
withEntities<Todo>()
);
// store.entities() -> Todo[]Entity Updater
patchState とともに updater ヘルパーを使います。setAllEntities、addEntity、updateEntity、removeEntity を利用できます。これらはマップと ID の順序を一貫した状態に保ちます。
import { addEntity, removeEntity, updateEntity } from '@ngrx/signals/entities';
patchState(store, addEntity({ id: '1', title: 'A', done: false }));
patchState(store, updateEntity({ id: '1', changes: { done: true } }));
patchState(store, removeEntity('1'));コレクションの読み込み
取得後にコレクション全体を置き換えるには setAllEntities を使います。配列がマップと ids に正規化されます。
import { setAllEntities } from '@ngrx/signals/entities';
load: rxMethod<void>(pipe(
switchMap(() => api.getTodos()),
tap(todos => patchState(store, setAllEntities(todos)))
))カスタム idKey
エンティティの識別子が id ではない場合は、セレクターを渡します。するとストアはそのフィールドをキーとしてマップを構成します。
withEntities<User>(); // expects user.id
// custom key:
patchState(store, addEntity(user, { selectId: (u: User) => u.uuid }));Entity からの派生
withEntities と withComputed を組み合わせて、コレクションを基盤とするフィルタリング済みまたは集計済みの読み取りモデルを構築します。
withComputed(({ entities }) => ({
remaining: computed(() => entities().filter(t => !t.done).length)
}))カスタム Feature とは
カスタム feature は、状態、computed、メソッドをまとめた再利用可能な構成要素で、複数のストアに組み込めます。signalStoreFeature で作成します。
import { signalStoreFeature, withState } from '@ngrx/signals';
export function withLoading() {
return signalStoreFeature(
withState({ loading: false })
);
}Feature の再利用
組み込み feature と同じように、カスタム feature を任意のストアに追加できます。読み込みフラグやページネーションなど、横断的な関心事を共有する方法です。
export const TodoStore = signalStore(
withLoading(),
withEntities<Todo>()
);
// store.loading() now existsメソッドを持つ Feature
カスタム feature には withMethods を含めて、setLoading ヘルパーのような再利用可能な動作を公開できます。
export function withLoading() {
return signalStoreFeature(
withState({ loading: false }),
withMethods((store) => ({
setLoading(loading: boolean) { patchState(store, { loading }); }
}))
);
}構成可能性
Feature は feature descriptor を返す単なる関数なので、withLoading()、withEntities()、アプリ固有の状態などを多数積み重ね、強く型付けされた1つのストアに統合できます。
ジェネリック Feature
エンティティの種類を問わず使えるように、機能をジェネリックにします。型パラメーターも受け渡されるため、利用側では完全な型安全性を維持できます。
export function withSelected<T>() {
return signalStoreFeature(
withState({ selected: null as T | null })
);
}理解度チェック
エンティティと機能に関する知識を確認します。
まとめ
withEntities（正規化されたマップ、更新ヘルパー、派生読み取りモデル）を使ってコレクションを管理し、再利用可能でジェネリックな signalStoreFeature バンドルを構築して、複数のストアで状態、computed、メソッドを共有しました。
よくある質問
「エンティティとカスタム機能」レッスンは無料ですか？
はい。「エンティティとカスタム機能」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「エンティティとカスタム機能」で何を学びますか？
withEntitiesでコレクションを管理します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「エンティティとカスタム機能」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- SignalStoreの作成
- Computedとメソッド
- 非同期処理のためのrxMethod
- エンティティとカスタム機能