Claude で React 開発｜コンポーネント自動生成と状態管理

Claude と React を組み合わせるメリット

React はコンポーネント単位で UI を構築する JavaScript ライブラリで、型定義や副作用の管理など覚えることが多く、初学者の壁になりがちです。Claude Code はこのボイラープレートを自然言語の指示から一発生成できるため、開発速度が大幅に向上します。

re-birth-ai.com の調査によると、Claude Code を活用することで 50〜70% の開発時間短縮が定量的に報告されています。TypeScript の型定義も自然言語で渡せるため、型安全な実装をスピーディに進められます。

開発環境のセットアップ

Claude Code で React 開発を始める前に、環境を整えます。

1. Node.js 20 以上をインストール
2. npm create vite@latest my-app -- --template react-ts で TypeScript + Vite のプロジェクトを作成
3. ターミナルで claude コマンドを実行して Claude Code を起動
4. プロジェクトルートで起動することでファイル構造をコンテキストとして読み込む

Vite を選ぶ理由は起動速度と HMR（Hot Module Replacement）の速さです。Create React App は 2025 年以降メンテナンスが停滞しており、新規プロジェクトでは Vite または Next.js が推奨されています。

コンポーネントの自動生成

Claude Code のコンポーネント生成は、曖昧な指示よりも 具体的な仕様 を与えるほど品質が上がります。

良いプロンプト例

src/components/UserCard.tsx を作成してください。
- Props: { name: string; avatarUrl: string; role: string; followersCount: number }
- フォロワー数は 1000 以上で "1.2k" 形式にフォーマット
- Tailwind CSS でスタイリング、hover でカード影を付ける
- アクセシビリティ: role="article"、img に alt テキスト必須

この指示では型情報・フォーマットルール・スタイル要件・アクセシビリティ要件を一括で渡しています。Claude Code は JSX、型定義、フォーマット関数を含む完全なコンポーネントを返します。

コンポーネント分割のコツ

1 つのプロンプトで 200 行超のコンポーネントを生成させると可読性が下がります。「ボタン」「フォーム」「バリデーション」を別々のプロンプトで依頼し、最後に統合する分割アプローチが実務では有効です。Claude Code は「既存の UserCard.tsx を受け取り、フォロワー数表示部分を FollowerBadge.tsx に切り出してください」という分割依頼も得意です。

カスタムフックの生成

React のロジック再利用にはカスタムフックが欠かせません。Claude Code は以下のような指示でカスタムフックを即生成できます。

src/hooks/useFetch.ts を作成してください。
- 引数: url: string, options?: RequestInit
- 戻り値: { data: T | null; loading: boolean; error: string | null }
- AbortController でコンポーネントアンマウント時にリクエストをキャンセル
- TypeScript ジェネリクス対応

Apidog のガイドでも紹介されているように、Claude Code はフック内の副作用クリーンアップ（useEffect の return 関数）も適切に実装します。手書きでは見落としがちな cleanup 処理を自動で組み込む点が大きな利点です。

また、useLocalStorage・useDebounce・useIntersectionObserver など汎用フックも「〇〇フックを作成してください。引数は〜、戻り値は〜」と伝えるだけで TypeScript 対応の実装が得られます。

状態管理の実装

React Context（中小規模向け）

src/context/AuthContext.tsx を作成してください。
- ユーザーの認証状態を管理
- { user: User | null; login: (email, password) => Promise<void>; logout: () => void }
- localStorage でセッションを永続化
- useAuth カスタムフックもエクスポート

Claude Code は Context の Provider コンポーネント、カスタムフック、型定義をまとめて生成します。useContext を直接使う実装よりも useAuth フック経由にする設計上の判断も自動で行われます。

Redux Toolkit（大規模向け）

アプリが大規模化したら Redux Toolkit が有効です。

src/store/cartSlice.ts を作成してください。
- Redux Toolkit の createSlice を使用
- State: { items: CartItem[]; total: number }
- Actions: addItem / removeItem / clearCart
- total は items の合計を自動計算する派生値として実装

Claude Code は createSlice・型定義・セレクター関数をまとめて生成します。続けて src/store/store.ts の設定ファイルも依頼すれば、プロジェクト全体の状態管理を短時間で整備できます。

React Router との連携

SPA のルーティング設定も Claude Code に任せられます。

React Router v7 を使ったルーティングを設定してください。
- / : ホーム
- /products : 商品一覧（コード分割・遅延ロード）
- /products/:id : 商品詳細
- /dashboard : 認証必須（未ログインなら /login にリダイレクト）

Claude Code は Suspense + lazy() を使った遅延ロードと、Navigate コンポーネントを使った認証ガード付きルーターを一括生成します。ローダーやエラーバウンダリーの設定も指示すれば追加してくれます。

Tailwind CSS でのスタイリング

Tailwind CSS と Claude Code の相性は非常に良く、デザイン仕様を自然言語で伝えるだけでユーティリティクラスを適切に組み合わせてくれます。

レスポンシブなカードグリッドを作成してください。
- モバイル: 1 列
- タブレット(md): 2 列
- デスクトップ(lg): 3 列
- カード間に gap-6、padding は p-4
- ダークモード対応（dark: プレフィックス使用）

Tailwind の dark: プレフィックスや md: ブレークポイントの組み合わせも自動で選択されます。デザイナーがFigmaで作成したコンポーネントの仕様を自然言語に置き換えて渡すだけで、実装の骨格が素早く完成します。

パフォーマンス最適化

React アプリのパフォーマンス最適化も Claude Code に任せられます。

以下のコンポーネントをパフォーマンス最適化してください。
- 不必要な再レンダリングを React.memo で防止
- 重い計算を useMemo でメモ化
- コールバック関数を useCallback でメモ化
- 最適化した箇所にコメントで理由を記載

Claude Code は既存コードを分析し、最適化が有効な箇所とそうでない箇所を判断した上で実装します。「なぜ最適化が必要か」の理由も説明してくれるため、学習の観点でも有効です。リスト描画の多い画面では react-window との組み合わせも提案してくれます。

テストコードの自動生成

Vitest + React Testing Library を使ったテストも Claude Code で自動生成できます。

UserCard.tsx のテストを src/components/UserCard.test.tsx に作成してください。
- name, avatarUrl, role が正しくレンダリングされるかテスト
- フォロワー数 1500 が "1.5k" と表示されるかテスト
- alt テキストの確認
- screen クエリは getByRole を優先して使用

テスト環境のセットアップ（setup.ts・vitest.config.ts）も Claude Code に依頼すれば、テスト環境の構築から実装まで一括で進められます。テストコードの生成は手書きに比べて網羅性が高く、エッジケースの見落としを減らす効果があります。

React の習熟度ベンチマーク

Zenn では Claude の React 習熟度ベンチマーク(Claude Fable 5のReact習熟度を測る)が公開されており、最新モデルほど React の慣習に沿ったコードを生成することが実証されています。たとえば key 属性の適切な使用・不要な useEffect の回避・コンポーネント再利用設計といった中〜上級の判断も、新しいモデルになるほど精度が向上しています。

実践的なプロンプト Tips

Claude Code と React 開発を組み合わせる際のポイントをまとめます。

1. 具体的な型情報を渡す: string や number だけでなく、インターフェース定義を渡すと精度が上がります
2. ファイルパスを明示する: src/components/Button.tsx のように保存先を指定すると意図通りの出力になります
3. 1 ファイル 1 プロンプト: 複数ファイルをまとめて依頼すると出力が長くなり品質が低下しやすいです
4. 既存コードを貼り付ける: 改修の場合は既存コードを渡してから「〜を追加してください」と依頼する方が自然なコードが生成されます
5. エラーログをそのまま渡す: バグ修正時はコンソールエラーをコピペするだけで原因分析と修正案を返してくれます

まとめ

Claude と React の組み合わせは、コンポーネント生成・カスタムフック・状態管理・ルーティング・スタイリング・テストまで全工程をカバーできます。鍵は「具体的な仕様をプロンプトに盛り込む」こと。型情報・ファイルパス・デザイン要件を最初から伝えることで、手直しなしに使える品質のコードが生成されます。まずは小さなコンポーネントから試して、プロンプトの精度を肌で確かめてみてください。