TOOLS BOX

Next.jsZustand状態管理UI コンポーネント

Zustand Test のアクションを selector → props で安全に受け渡す

Zustand のアクションは store 生成時から参照が安定している性質を活かし、selector で取り出して props で子に渡す書き方を解説する。

Next.jsZustand状態管理エラーハンドリング

Zustand Test の保存処理を非同期 action と loading / error 状態で扱う

saveSettings のような非同期処理を store のアクションに閉じ込め、status: 'idle'|'loading'|'error'|'success' を 1 つのフィールドで表現する書き方を解説する。

Zustand Test の settingsStore を BroadcastChannel で複数タブに同期する

BroadcastChannel API で別タブの settingsStore に変更をブロードキャストし、エコーバックを避けながら受信側を更新する手順を解説する。

Zustand Test の suggestedRate を subscribeWithSelector で派生する

settingsStore.rate から detailStore.suggestedRate を導出する派生状態の作り方を、subscribeWithSelector と shallow を軸に解説する。

Zustand Test の devtools をアクション命名規則で読みやすくする

store 名 / アクション名 / replace モードを揃え、Redux DevTools のタイムラインを 4 store 横断で読み解けるようにする命名規則を解説する。

Next.jsZustandPlaywrightテスト

Zustand Test を Playwright で E2E テストする

フォーム入力 → リアルタイム同期 → 保存 → リセットまでの一連の流れを Playwright で再現し、Store Monitor の表示と DOM の両方で検証する手順を解説する。

Next.jsReact Hook FormZodフォームUI コンポーネント

Zustand Test のフォームエラーを aria-invalid と aria-describedby で読み上げ可能にする

RHF の errors.<field>.message を、aria-invalid と aria-describedby で input と紐付けてスクリーンリーダーに伝える書き方を解説する。

Zustand Test の settingsStore に immer を入れて深いネストを楽に更新する

settingsStore にネストしたフィールドを足すときに、immer middleware で『見た目はミュータブル、実体は immutable』な更新に書き換える手順を解説する。

Next.jsZustandImmer状態管理

Zustand Test の settingsStore だけを persist で永続化する

persist middleware の partialize で settings の確定値だけを localStorage に保存し、UI 状態や派生 store を巻き込まない部分永続化を解説する。

Zustand Test の profileStore で表示用整形を 1 か所にまとめる

settingsStore の値を trim・大文字化・フォールバックといった整形を施して保持する profileStore の最小設計を解説する。

Next.jsReact Hook FormZodフォーム状態管理

Zustand Test の React Hook Form を watch・handleSubmit・formState で読み解く

useForm の watch でリアルタイム同期し、handleSubmit で確定値を扱い、formState で UI を切り替える Playground の RHF 実装を1ステップずつ解説する。

上級

Zustand Test を Server Component と use client の境界で安全に動かす

Zustand store はクライアント専用。Server Component から直接読まず、初期値の受け渡しと hydration mismatch を避ける書き方を解説する。

Next.jsZustand状態管理ルーティング

Zustand Test の settingsStore を slice と combine で分割する

肥大化しがちな store を「フィールドのスライス」「アクションのスライス」に分けて combine で結合し、責務をモジュール単位で表現する手順を解説する。

上級

Zustand Test の middleware 連鎖を StateCreator で型崩れなく書く

devtools / persist / subscribeWithSelector / immer を重ねたときに set の引数推論が壊れないよう、StateCreator のジェネリクスで型を補強する手順を解説する。

Zustand Test の 4 ストア設計と storeSync を読み解く

settings / profile / detail / ui の 4 ストアを subscribe で連携し、patchFormData・setFormData・reset を使い分ける Playground の Zustand 実装を1ステップずつ解説する。

Next.jsZustand状態管理UI コンポーネント

Zustand Test の Store Monitor サイドパネルを selector だけで作る

全 store の値をリアルタイムに監視するサイドパネルを selector だけで構成し、再レンダリング範囲を局所化するパターンを解説する。

Zustand Test の storeSync を Vitest でユニットテストする

settings から profile へ subscribe で同期するレイヤを、Vitest で「呼ばれた / 呼ばれない」「整形が正しい」を確かめるテストの書き方を解説する。

Next.jsZustand状態管理テスト

Next.jsZustandStorybookUI コンポーネント状態管理

Zustand Test の Form / Monitor / TabBar を Storybook で分離する

Zustand に依存する UI を Storybook で取り扱うために、store のリセット / decorator / play function を組み合わせて状態をストーリー単位で固定する手順を解説する。

Zustand Test の TabBar を role=tablist とキーボード操作で完成させる

uiStore の activeTab を起点に、role=tablist / aria-selected / 矢印キー操作 / フォーカス管理を満たした TabBar を組み立てる手順を解説する。

Next.jsZustandUI コンポーネント

Next.jsZodReact Hook Formフォーム状態管理

Zustand Test の型を Zod スキーマから 4 ストアまで貫く

Zod スキーマ → z.infer → useForm → settings / profile / detail / ui の 4 ストアまで、Playground の TypeScript の流れを1ステップずつ追う。

Next.jsZustand状態管理UI コンポーネント

Zustand Test の uiStore でタブ切り替えだけを切り出す

アクティブなタブの状態だけを抱える uiStore を独立させ、settings / profile / detail と疎結合に保つ最小設計を解説する。

Next.jsZustand状態管理パフォーマンス

Zustand Test の useShallow と primitive selector を使い分ける

オブジェクト selector で useShallow を使う場合と、複数の primitive selector に分ける場合の判断基準を、再レンダリング挙動と一緒に解説する。

Next.jsReact Hook FormZustandパフォーマンス状態管理

Zustand Test の watch 同期コストを計測して throttle で抑える

RHF の watch から settingsStore に毎キーストローク同期する負荷を performance.mark で計測し、必要なら throttle / 差分検知で抑える手順を解説する。