型付きDerived StateとSelector
計算された状態用の型付きSelector関数を記述します。
「型付きDerived StateとSelector」はCoddyKit上の無料TypeScript Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはTypeScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 TypeScript Academyコースには全4レッスンが含まれています。
派生状態とは
派生状態とは、他の状態から計算される状態です。たとえば、リストのフィルタリングや値の合計が該当します。セレクターにこの計算をカプセル化し、パフォーマンス向上のためにメモ化できます。
// Raw state
const users: User[] = [/* ... */];
// Derived state: active users only
const activeUsers = users.filter(u => u.isActive);型付きセレクター関数
戻り値の型を明示したセレクター関数を記述すると、計算内容を文書化し、型のずれを防げます。
import type { RootState } from "./store";
const selectActiveUsers = (state: RootState): User[] =>
state.users.filter((u) => u.isActive);
const selectUserCount = (state: RootState): number =>
state.users.length;reselect：メモ化されたセレクター
reselectライブラリ（RTKで使用）は、入力が変更された場合にのみ再計算する、メモ化されたセレクターを作成します。
import { createSelector } from "reselect";
const selectActiveUsers = createSelector(
(state: RootState) => state.users,
(users) => users.filter((u) => u.isActive)
);
// Return type inferred: User[]パラメーター付きセレクターの型付け
ファクトリーセレクターは引数を受け取り、セレクターを返します。エンティティ単位の検索に便利です。
const selectUserById = (id: string) =>
createSelector(
(state: RootState) => state.users,
(users) => users.find((u) => u.id === id) ?? null
);
// Usage: const user = useAppSelector(selectUserById("123"));Zustandのセレクター
Zustandでは、型付きセレクターをストアフックに渡し、必要な状態の部分だけを読み取ります。
const activeUsers = useUserStore((s) => s.users.filter(u => u.isActive));
// Inferred type: User[]useMemoを使ったReactの派生状態
ローカルな派生状態には、適切な型注釈を付けたuseMemoを使い、コンポーネント内の計算値をメモ化します。
const sortedUsers = useMemo(
(): User[] => [...users].sort((a, b) => a.name.localeCompare(b.name)),
[users]
);セレクターの合成
単純なセレクターを組み合わせて複雑なセレクターを構築します。reselectはその連鎖全体でメモ化を処理します。
const selectActiveUserNames = createSelector(
selectActiveUsers,
(users) => users.map((u) => u.name)
); // string[]immerを使った型安全なZustandの派生更新
派生した更新を計算するときは、immerを使ってドラフト状態を変更します。TypeScriptによって、有効なプロパティだけを変更できることが保証されます。
const useStore = create<AppStore>()(immer((set) => ({
users: [],
activeCount: 0,
setUsers: (users) =>
set((draft) => {
draft.users = users;
draft.activeCount = users.filter((u) => u.isActive).length;
}),
})));セレクターの戻り値の型推論
TypeScriptはセレクターから戻り値の型を推論しますが、明示的な注釈を付けると可読性が向上し、動的な式から意図せずanyになるのを防げます。
// Inferred — may widen to any for complex expressions
const selectTotals = createSelector(
(s: RootState) => s.cart.items,
(items) => items.reduce((sum, i) => sum + i.price, 0) // inferred: number
);セレクターのテスト
セレクターは純粋関数です。モック状態を渡し、出力の型と値をアサートしてテストします。
test("selectActiveUsers", () => {
const state = { users: [{ id: "1", isActive: true }, { id: "2", isActive: false }] } as RootState;
expect(selectActiveUsers(state)).toHaveLength(1);
});まとめ：型付きセレクター
型付きセレクターでは、RootStateを受け取り、戻り値の型を明示した関数を記述します。メモ化にはcreateSelectorを使い、複雑な派生値にはセレクターを合成し、純粋関数としてテストします。
確認問題
createSelectorには、通常のセレクター関数と比べてどのような利点がありますか。
学習内容
型付きセレクターはRootStateを受け取り、正確に型付けされた派生値を返します。メモ化にはcreateSelectorを使い、複雑なロジックにはセレクターを合成し、パラメーター付きのエンティティ検索にはファクトリーセレクターを記述します。
よくある質問
「型付きDerived StateとSelector」レッスンは無料ですか？
はい。「型付きDerived StateとSelector」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、TypeScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 TypeScript Academyコースには全4レッスンが含まれています。
「型付きDerived StateとSelector」で何を学びますか？
計算された状態用の型付きSelector関数を記述します。 ブラウザで直接実行するハンズオンコードでTypeScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
TypeScript Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのTypeScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「型付きDerived StateとSelector」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このTypeScript Academyレッスンでコードを書いて実行できますか？
はい。すべてのTypeScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Redux ToolkitのSliceとThunkに型を付ける
- Zustand Storeの型付けパターン
- XState：型付きステートマシン
- 型付きDerived StateとSelector