Zustand パターン

Zustand 5.xを使った最新の状態管理 - 軽量でTypeScript優先、ボイラープレートなし。

概要

• Redux複雑さのないグローバル状態
• プロップドリリングなしでコンポーネント間で共有される状態
• localStorage/sessionStorageによる永続化された状態
• セレクターを使った計算/派生状態
• ミドルウェア（ログ、devtools、永続化）が必要な状態

コアパターン

基本的なストア、スライス、Immer、persist、セレクター、非同期アクション、devtoolsをカバーしています。

すべての7つのコアパターンの完全なコード例については、Read("${CLAUDE_SKILL_DIR}/references/core-patterns.md")をロードしてください。

クイックリファレンス

// ✅ ダブルコールパターンで型付きストアを作成
const useStore = create<State>()((set, get) => ({ ... }));

// ✅ すべての状態アクセスでセレクターを使用
const count = useStore((s) => s.count);

// ✅ 複数の値にはuseShallowを使用（Zustand 5.x）
const { a, b } = useStore(useShallow((s) => ({ a: s.a, b: s.b })));

// ✅ ミドルウェアの順序: immer → subscribeWithSelector → devtools → persist
create(persist(devtools(immer((set) => ({ ... })))))

// ❌ ストア全体を分割代入しない
const store = useStore(); // ANY変更で再レンダリング

// ❌ サーバー状態を保存しない（TanStack Queryを代わりに使用）
const useStore = create((set) => ({ users: [], fetchUsers: async () => ... }));

主な決定事項

決定項目	オプションA	オプションB	推奨
状態構造	単一ストア	複数ストア	単一ストア内のスライス - クロススライスアクセスが簡単
ネストされた更新	スプレッド演算子	Immerミドルウェア	Immer - 深くネストされた状態（3+レベル）
永続化	手動localStorage	persistミドルウェア	persistミドルウェア with partialize
複数の値	複数セレクター	useShallow	useShallow - 2～5個の関連値
サーバー状態	Zustand	TanStack Query	TanStack Query - Zustandはクライアント専用状態向け
DevTools	常に有効	条件付き	条件付き - enabled: process.env.NODE_ENV === 'development'

アンチパターンと統合

禁止されたパターン（ストア分割代入、派生状態、サーバー状態、直接変更）およびReact Queryの統合ガイダンス。

アンチパターン例とTanStack Query分離パターンについては、Read("${CLAUDE_SKILL_DIR}/references/anti-patterns-and-integration.md")をロードしてください。

関連スキル

• tanstack-query-advanced - サーバー状態管理（クライアント状態用のZustandと共に使用）
• form-state-patterns - フォーム状態（React Hook Formとフォーム用Zustandの比較）
• react-server-components-framework - ZustandとのRSCハイドレーション考慮事項

機能の詳細

store-creation

キーワード: zustand, create, store, typescript, state 解決: 適切なTypeScript推論で型安全なZustandストアのセットアップ

slices-pattern

キーワード: slices, modular, split, combine, StateCreator 解決: 大規模ストアをメンテナンス可能で領域固有のスライスに整理

middleware-stack

キーワード: immer, persist, devtools, middleware, compose 解決: イミュータビリティ、永続化、デバッグのための正しい順序でのミドルウェア結合

selector-optimization

キーワード: selector, useShallow, re-render, performance, memoization 解決: 適切なセレクターパターンで不要な再レンダリングの防止

persistence-migration

キーワード: persist, localStorage, sessionStorage, migrate, version 解決: バージョン間のスキーマ移行による状態の永続化

リファレンス

Read("${CLAUDE_SKILL_DIR}/references/<file>") でオンデマンドロード:

ファイル	内容
core-patterns.md	基本ストア、スライス、Immer、persist、セレクター、非同期、devtools
anti-patterns-and-integration.md	禁止パターンとReact Query統合
middleware-composition.md	正しい順序での複数ミドルウェア結合

その他のリソース:

• ロード: Read("${CLAUDE_SKILL_DIR}/scripts/store-template.ts") - プロダクション対応ストアテンプレート
• ロード: Read("${CLAUDE_SKILL_DIR}/checklists/zustand-checklist.md") - 実装チェックリスト