フェーズ開発

フェーズドキュメントとAI計画を使用した主要機能のための構造化されたワークフロー。

このワークフローを使うとき

フェーズ開発は以下の場合に使用します：

  • 複数のタスクを含む主要な新機能の追加
  • 開発が数日から数週間にわたる
  • コーディング前に構造化された計画が必要
  • 複数タスクの進捗を追跡したい
  • 機能が複数のファイル/コンポーネントにまたがる

概要

フェーズ開発は2段階のAIワークフローを使用します：

  1. 計画段階：Claude Web（またはGemini/ChatGPT）を使用して詳細なフェーズドキュメントを作成
  2. 開発段階：VS CodeのClaude Codeを使用して、タスクごとに計画を実行

この分離により、コーディング開始前に十分な計画が確保されます。

ステップ1：Claude Webで計画を作成

ブラウザでclaude.ai（または好みのAIツール）を開きます。構築したい機能を説明し、フェーズドキュメントを依頼します。

フェーズドキュメント作成のプロンプト
Claudeプロンプト
[app-name]というアプリの機能を構築しています。[機能の説明]を実装するための詳細なフェーズドキュメントを作成してください。 フェーズドキュメントには以下を含めてください： 1. フェーズの目標と期待される成果 2. 前提条件と依存関係 3. 詳細な実装ステップを含む番号付きタスク 4. 各タスクの検証ステップ 5. 完了の定義チェックリスト 6. 作成/変更するファイルのリスト アプリについてのコンテキスト： - [アプリの簡単な説明] - [現在の技術スタック] - [制約や要件] フェーズファイルとして保存できるmarkdownドキュメントとしてフォーマットしてください。

フェーズドキュメントの構造

AIは以下の構造に従ったドキュメントを生成します：

# フェーズ N: 機能名

## 目標
このフェーズが達成することの簡単な説明。

## 前提条件
- [ ] 必要なセットアップや依存関係
- [ ] 完了している前のフェーズ

## タスク

### タスク 1: セットアップ/基盤
**ステップ：**
1. ファイルXを作成
2. 設定Yを追加
3. ...

**検証：**
- [ ] ファイルが存在しコンパイルできる
- [ ] テストが通る

### タスク 2: コア実装
...

## 完了の定義
- [ ] すべてのタスクが完了
- [ ] ビルドが通る
- [ ] テストが通る
- [ ] ステージングにデプロイ済み

## 作成/変更するファイル
- `app/feature/page.tsx`
- `app/api/feature/route.ts`
- ...

ステップ2：フェーズドキュメントを保存

  1. AI生成のフェーズドキュメントをコピー
  2. アプリのai_docs/plans/ディレクトリに保存
  3. パターンに従って命名：phase-N-feature-name.md
ファイル配置の例bash
apps/my-app/ai_docs/plans/phase-2-user-dashboard.md

ステップ3：PLAN.mdを更新

アプリのPLAN.mdファイルで新しいフェーズを参照します：

## 現在のフェーズ

**フェーズ 2: ユーザーダッシュボード**（進行中）
- 参照: [フェーズ 2 計画](ai_docs/plans/phase-2-user-dashboard.md)

### 状態
- [ ] タスク 1: ダッシュボードレイアウトのセットアップ
- [ ] タスク 2: メトリクスウィジェットの追加
- [ ] タスク 3: データ取得の実装

ステップ4：VS Codeで開発を開始

VS CodeでClaude Codeに切り替えます。Claudeにフェーズドキュメントを分析して開発を開始するよう伝えます。

VS Codeでフェーズ開発を開始
Claudeプロンプト
my-app-name: フェーズ 2（ユーザーダッシュボード）の作業を開始したいです。 ai_docs/plans/phase-2-user-dashboard.mdのフェーズドキュメントを読んで分析してください。その後： 1. このフェーズ用のフィーチャーブランチを作成 2. タスク 1から開始 3. 各タスクで軽微な変更ワークフローに従う（プランモード、実装、テスト、コミット） 準備ができたら教えてください。

Claudeは以下を行います：

  1. フェーズドキュメントを読んで分析
  2. フィーチャーブランチを作成（例：feature/phase-2-user-dashboard）
  3. 最初のタスクを分解して実装を開始

ステップ5：タスクを1つずつ実行

フェーズドキュメントの各タスクを順番に進めます：

  1. タスク開始：Claudeにどのタスクに取り組むか伝える
  2. 実装：Claudeが軽微な変更ワークフローに従って実装
  3. 検証：検証ステップが通ることを確認
  4. コミット：完了したタスクのコミットを作成
  5. 状態更新：PLAN.mdでタスクを完了としてマーク
  6. 次のタスク：次のタスクに移動
次のタスクに移動
Claudeプロンプト
タスク 1が完了し検証されました。タスク 2: メトリクスウィジェットの追加に移りましょう。 フェーズドキュメントからタスクの詳細を読んで実装を開始してください。

ステップ6：フェーズを完了

すべてのタスクが完了したら：

  1. 最終検証：完全なビルドとテストを実行
  2. PR作成：フェーズ全体のPRを提出
  3. PLAN.md更新：フェーズを完了としてマーク
  4. アーカイブ：オプションでフェーズドキュメントをai_docs/plans/archive/に移動
フェーズを完了
Claudeプロンプト
フェーズ 2のすべてのタスクが完了しました。以下をお願いします： 1. 最終ビルドを実行してすべてがコンパイルされることを確認 2. すべての変更の要約を含むmainへのプルリクエストを作成 3. PLAN.mdを更新してフェーズ 2を完了としてマーク

効果的なフェーズ開発のコツ

計画のコツ

  • 最初のプロンプトで要件を具体的に
  • 利用可能な場合はUIモックアップやワイヤーフレームを含める
  • 従うべき既存のコードパターンに言及
  • テスト要件を事前に指定

実行のコツ

  • 次のタスクを始める前に1つのタスクを完全に完了
  • 各タスク後にコミット（全タスク終了時ではなく）
  • PLAN.mdの状態を定期的に更新
  • タスクが大きすぎる場合はサブタスクに分割

再計画が必要な場合

  • 計画に重要なステップが欠けていることが判明した場合
  • 要件が大幅に変更された場合
  • 技術的なブロッカーにより別のアプローチが必要な場合

これらの場合、続行する前にフェーズドキュメントを更新してください。

例：ユーザー認証の追加

フェーズドキュメントの抜粋：

# フェーズ 3: ユーザー認証

## 目標
Better Authを使用してメールベースの認証を追加。

## タスク

### タスク 1: Better Authのセットアップ
1. better-authパッケージをインストール
2. middleware.tsで認証を設定
3. 環境変数を追加

### タスク 2: ログインページの作成
1. app/[locale]/login/page.tsxを作成
2. メール入力フォームを追加
3. マジックリンクリクエストを実装

### タスク 3: 保護されたルート
1. 認証チェック用にミドルウェアを更新
2. 保護されたページへのログインリダイレクトを追加
...

このフェーズは3〜5回のコミット（タスクごとに1回）を要し、完全な認証機能が完成します。