フロントエンド開発で手が回らなくなる場面
フロントエンド開発は、コンポーネント設計、スタイリング、状態管理、テスト、パフォーマンス最適化と、やるべきことが多岐にわたります。Claude Code をターミナルから使えば、これらの作業を対話的に進めながら、開発スピードを大きく向上させることができます。
React / Next.js プロジェクトで Claude Code を活用する具体的なワークフローを順番にご紹介します。プロジェクトの初期セットアップから、日々のコンポーネント開発、リファクタリングまで、現場ですぐ使えるテクニックを網羅しました。
CLAUDE.md でプロジェクトのルールを伝える
フロントエンド開発で Claude Code を最大限に活かすには、プロジェクトルートに CLAUDE.md を配置し、コーディング規約や技術スタックを明記しておく点が肝心です。
# プロジェクト概要
Next.js 15 (App Router) + TypeScript + Tailwind CSS v4 のウェブアプリケーション。
# コーディング規約
- コンポーネントは関数コンポーネント + React Hooks を使用
- CSS は Tailwind CSS のユーティリティクラスで記述（CSS Modules は使わない）
- 型定義は `types/` ディレクトリに集約
- テストは Vitest + React Testing Library
- インポートは絶対パス（`@/components/...`）を使用
# ディレクトリ構成
- `src/app/` — App Router のルート
- `src/components/` — 再利用可能なコンポーネント
- `src/components/ui/` — 汎用 UI コンポーネント
- `src/lib/` — ユーティリティ関数
- `src/types/` — TypeScript 型定義この CLAUDE.md を置くだけで、Claude Code はプロジェクトの文脈を理解した上でコード生成を行ってくれるようになります。
コンポーネント生成のワークフロー
新規コンポーネントの作成
Claude Code のターミナルで自然言語で指示するだけで、プロジェクトの規約に沿ったコンポーネントが生成されます。
claude "src/components/ui/ に再利用可能な Modal コンポーネントを作成して。
アクセシビリティ対応（focus trap、ESC で閉じる、aria 属性）を含めて。
Tailwind CSS でスタイリングして、アニメーション付きで。"Claude Code はディレクトリ構成を読み取り、既存のコンポーネントのパターンに合わせたコードを出力します。CLAUDE.md に記載した規約も反映されるため、チーム全体のコードスタイルとの一貫性が保たれます。
既存コンポーネントのリファクタリング
大きくなりすぎたコンポーネントの分割も得意です。
claude "src/components/Dashboard.tsx が 500 行を超えている。
再利用可能な小さなコンポーネントに分割して、
各ファイルにテストも追加してほしい。"Claude Code はファイルの内容を分析した上で、適切な粒度でコンポーネントを分割し、元のファイルからのインポートも修正してくれます。
スタイリングの効率化
デザインシステムの構築
Tailwind CSS を使ったデザイントークンの設定も、Claude Code に依頼できます。
claude "tailwind.config.ts にカスタムカラーパレットを追加して。
ダークモード対応で、プライマリ・セカンダリ・アクセントの各色に
50〜950 のスケールを設定してほしい。ブランドカラーは #6366F1。"レスポンシブ対応
既存のコンポーネントをレスポンシブに対応させる作業も効率的に進められます。
claude "src/components/PricingTable.tsx をモバイルファーストで
レスポンシブ対応にして。sm / md / lg のブレークポイントで
レイアウトが自然に切り替わるようにしてほしい。"Claude Code は既存のマークアップ構造を維持しつつ、Tailwind のレスポンシブプレフィックスを適切に追加します。
テスト作成の自動化
コンポーネントテスト
フロントエンド開発で後回しにされがちなテスト作成も、Claude Code なら一瞬です。
claude "src/components/ui/ 内の全コンポーネントに対して、
Vitest + React Testing Library のテストを作成して。
レンダリング、ユーザーインタラクション、アクセシビリティの
各観点をカバーして。"Claude Code はコンポーネントの props と振る舞いを分析し、意味のあるテストケースを生成します。単なるスナップショットテストではなく、ユーザーの操作をシミュレートする実践的なテストが書かれます。
E2E テストの骨格作成
Playwright を使った E2E テストの骨格も作れます。
claude "Playwright で認証フローの E2E テストを書いて。
ログイン → ダッシュボード表示 → プロフィール編集 → ログアウト
の一連の流れをカバーするテストがほしい。"パフォーマンス最適化
バンドルサイズの分析と改善
claude "next build の出力を見て、バンドルサイズが大きい
ページを特定して、改善策を提案してほしい。
動的インポートや tree-shaking の最適化を含めて。"Claude Code は next build の出力を解析し、具体的な改善アクションを提示してくれます。dynamic() による遅延読み込みや、不要な依存関係の削除など、実践的な提案が得られます。
Core Web Vitals の改善
claude "このプロジェクトの LCP と CLS を改善するために、
画像の最適化（next/image の活用）、フォントの読み込み戦略、
レイアウトシフトの防止策を実装して。"Next.js App Router 固有のパターン
Server Components と Client Components の使い分け
App Router では、Server Components と Client Components の境界設計が重要です。Claude Code に既存のページを分析させ、最適な分割を提案してもらえます。
claude "src/app/dashboard/page.tsx を分析して、
Server Component と Client Component の最適な分割を
提案して。データフェッチは Server 側、
インタラクションは Client 側に分離してほしい。"メタデータとSEO
claude "src/app/ 内の全ページに generateMetadata を実装して。
各ページの内容に基づいた title、description、OGP 画像の
設定を含めてほしい。"実践的な開発サイクル
日々のフロントエンド開発では、以下のようなサイクルで Claude Code を活用すると効率的です。
設計フェーズでは、コンポーネントの構成や API の型定義を Claude Code に相談します。「このページに必要なコンポーネント構成を提案して」と伝えれば、ディレクトリ構成と合わせて設計案が返ってきます。
実装フェーズでは、コンポーネント生成、スタイリング、ロジック実装を対話的に進めます。一つずつ確認しながら進めることで、手戻りを減らせます。
検証フェーズでは、テスト作成とコードレビューを Claude Code に依頼します。claude "直近の変更をレビューして、改善点を教えて" と伝えるだけで、コードの品質チェックが行われます。
マルチエージェント活用
Claude Code の --agent フラグを使えば、複数のタスクを並列で実行できます。例えば、コンポーネント生成とテスト作成を同時に走らせることで、待ち時間を大幅に削減できます。
# メインのターミナルでコンポーネントを作成
claude "新しい DataTable コンポーネントを作成して"
# 別のターミナルでテストを作成
claude "既存の Button コンポーネントのテストを追加して"大規模なリファクタリングでは、Claude Code にタスクを分解させた上で、並列に処理を進めることも可能です。
まとめ
Claude Code をフロントエンド開発に取り入れることで、コンポーネントの設計からテスト作成、パフォーマンス最適化まで、開発サイクル全体を加速できます。特に CLAUDE.md によるプロジェクト文脈の共有は、生成されるコードの品質を大きく左右する重要なポイントです。
まずは小さなタスクから試してみて、自分のワークフローに合った使い方を見つけていきましょう。