状態管理の設計をClaudeに相談する

Reactアプリを開発していると、「状態管理どのライブラリにすればいいんだろう」と悩む場面は多いですよね。Redux、Zustand、Jotai——それぞれ特徴が異なり、プロジェクトの規模や要件によって最適解が変わります。そんな設計判断こそ、Claude Codeに相談してみましょう。

まずプロジェクトの状況を伝えて選定する

Claude Codeへの相談は「曖昧な質問」より「状況を具体的に伝える」ほうが精度の高い回答が得られます。たとえば次のように入力してみてください。

現在Reactで中規模のECサイトを開発しています。
- チームメンバーは5人（Reduxの経験者が2人）
- サーバー状態はTanStack Queryで管理予定
- クライアント状態はカート情報・モーダル開閉・ユーザー設定など

Redux、Zustand、Jotaiのどれが適していますか？
トレードオフも含めて比較してください。

このように「規模・チームスキル・既存ライブラリ」を伝えると、Claudeは単なる机上の比較ではなく、あなたのプロジェクトに即したアドバイスを返してくれます。

選定後にそのまま実装コードを生成させる

ライブラリを決めたら、続けて実装の相談ができます。たとえばZustandを選んだ場合、次のように会話を続けましょう。

Zustandで決めました。
カート機能のストアを実装してください。
商品の追加・削除・数量変更・合計金額の計算が必要です。
TypeScriptで書いてください。

するとClaudeは型定義付きのストアを生成してくれます。

import { create } from 'zustand'

type CartItem = {
  id: string
  name: string
  price: number
  quantity: number
}

type CartStore = {
  items: CartItem[]
  addItem: (item: Omit<CartItem, 'quantity'>) => void
  removeItem: (id: string) => void
  updateQuantity: (id: string, quantity: number) => void
  total: () => number
}

export const useCartStore = create<CartStore>((set, get) => ({
  items: [],
  addItem: (item) =>
    set((state) => ({
      items: [...state.items, { ...item, quantity: 1 }],
    })),
  removeItem: (id) =>
    set((state) => ({ items: state.items.filter((i) => i.id !== id) })),
  updateQuantity: (id, quantity) =>
    set((state) => ({
      items: state.items.map((i) => (i.id === id ? { ...i, quantity } : i)),
    })),
  total: () => get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),
}))

生成されたコードをそのままプロジェクトに貼り付けて、動作確認しながら調整できます。

※TypeScript: JavaScriptに型定義を追加した言語。型チェックによりバグを事前に発見しやすくなる。

既存コードをリファクタリングする

すでにuseStateで管理しているコードをグローバル状態に移行したい場合も、Claudeに任せましょう。

以下のコンポーネントでuseStateを使っていますが、
複数コンポーネントで状態を共有したいのでZustandに移行してください。

[既存コードをここに貼り付ける]

このようにコードを直接渡して指示するだけで、既存の実装を壊さずにリファクタリング案を提示してくれます。設計の相談から実装・改善まで、Claude Codeをフルに活用してみてください。

※リファクタリング: 外部から見た動作を変えずに、コードの内部構造を整理・改善すること。