Claude Codeで始めるAI駆動開発 — 初心者のための実践チュートリアル

はじめに

前回の入門ガイドでは、Claude Codeのインストールと基本操作を紹介しました。本記事では、実際の開発シナリオに沿って、Claude Codeをどう活用するかを具体的なハンズオン形式で解説します。

シナリオ1: Reactコンポーネントの作成

お題: お問い合わせフォームを作る

新しいReactプロジェクトで、バリデーション付きのお問い合わせフォームを作成してみましょう。

> お問い合わせフォームコンポーネントを作成して。
  名前、メールアドレス、メッセージの3フィールドで、
  バリデーション付きでお願いします。Tailwind CSSでスタイリングして。

Claude Codeは以下の手順を自動的に実行します。

プロジェクトの技術スタック（React、Tailwind CSSなど）を確認
既存のコンポーネントパターンを分析
新しいコンポーネントファイルを作成
バリデーションロジックを実装

生成されたコードは、プロジェクトの既存パターンに合わせたスタイルで出力されます。例えば、既存コードがTypeScriptを使っていれば型定義付きで生成し、既存のUIライブラリ（shadcn/uiなど）があればそれを活用します。

ポイント: 具体的に指示する

曖昧な指示と具体的な指示では、結果が大きく変わります。

❌ 「フォームを作って」
✅ 「名前・メール・メッセージの3フィールドを持つお問い合わせフォームを作成して。
    メールはRFC準拠のバリデーション、メッセージは10文字以上必須で。
    送信成功時はトースト通知を表示して。」

シナリオ2: バグの調査と修正

エラーメッセージを共有する

開発中にエラーが発生した場合、そのエラーメッセージをそのまま貼り付けるだけで解決策を提案してくれます。

> 以下のエラーが出ています。原因を調査して修正してください。

  Error: Hydration failed because the initial UI does not match
  what was rendered on the server.

Claude Codeは関連するファイルを読み取り、Server Component / Client Componentの不整合を特定し、修正を提案します。

ポイント: Plan Modeを活用する

複雑なバグの場合は、Ctrl+GでPlan Mode（計画モード）に切り替えましょう。このモードでは、Claudeはコードを変更せず、調査と計画だけを行います。計画内容を確認してから実装に移れるため、意図しない変更を防げます。

シナリオ3: APIエンドポイントの追加

Next.jsプロジェクトにAPIエンドポイントを追加する例です。

> /api/users エンドポイントを追加して。
  GET: ユーザー一覧取得（ページネーション対応）
  POST: 新規ユーザー作成（バリデーション付き）
  Supabaseをデータベースとして使ってください。

Claudeはルートファイルの作成だけでなく、必要に応じてデータベーススキーマの確認、型定義の追加、エラーハンドリングまで一貫して行います。

シナリオ4: テストの作成

既存のコードに対してテストを自動生成できます。

> lib/utils/validation.ts のテストを書いて。
  エッジケースも含めてカバーして。

Claudeはテストフレームワーク（Jest、Vitest等）を自動検出し、正常系・異常系・境界値のテストケースを生成します。

シナリオ5: リファクタリング

> components/Dashboard.tsx が500行を超えて肥大化しています。
  責務ごとにコンポーネントを分割してリファクタリングしてください。

Claudeは既存の機能を維持しながら、ロジックの分離、カスタムフックの抽出、コンポーネントの分割を段階的に行います。

効果的な使い方のコツ

1. コンテキストを与える

プロジェクトのルールや制約を事前に伝えると、より適切なコードが生成されます。プロジェクトルートにCLAUDE.mdファイルを作成し、コーディング規約やアーキテクチャの方針を記述しておくと、Claudeが毎回参照してくれます。

2. 段階的に進める

大きなタスクは一度に依頼せず、小さなステップに分けて進めましょう。

> まずデータモデルの設計を提案して
> （確認後）では、そのモデルに基づいてAPIを実装して
> （確認後）最後にフロントエンドのフォームを作って

3. モデルを使い分ける

Alt+Pでモデルを切り替えられます。

Opus: 複雑なアーキテクチャ設計、大規模リファクタリング
Sonnet: 日常的なコーディング、バグ修正（コスト効率が良い）
Haiku: 簡単な質問、コード生成（最速・最安）

よくある質問

Q: Claude Codeは既存のコードを壊さない？

デフォルトモードでは、すべてのファイル変更の前に確認が入ります。差分を確認してから承認できるため、意図しない変更を防げます。また、Gitと組み合わせれば、いつでも変更を元に戻せます。

Q: 機密情報は安全？

Claude Codeはローカルのターミナルで動作し、コードはAnthropicのサーバーに送信されて処理されます。.envファイルなどの機密ファイルは自動的に除外される仕組みがあります。ただし、プロンプトに機密情報を含めないよう注意してください。

まとめ

Claude Codeは、日常の開発タスクのほとんどをカバーできる強力なツールです。最初は小さなタスクから始めて、徐々に複雑なタスクを任せていくことで、AIとの協働開発のスキルが自然と身につきます。次回は、Claude Code最新機能であるAgent Teamsについて紹介します。