Level 8 実践: 3機能を Git worktree で並列実装する

このチュートリアルについて

概念・仕組みを先に理解したい方は Level 8 の概念ガイドを参照してください。

Git worktree を使うと、同一リポジトリの複数ブランチを別ディレクトリとして同時にチェックアウトできます。これにより、複数の Claude エージェントが互いに干渉せず、それぞれ独立したブランチで並列実装を実行できます。

対象読者: Level 7 まで完了しており、Git の基本操作（ブランチ・コミット）に慣れている方。シェルスクリプトの並列実行（&・wait）の概念を知っていると理解しやすいです。

学習時間の目安: 読了 15分 + 実践 50分

前のレベルからの引き継ぎ

Level 7 でブログネタ収集が自動化された。my-portfolio にダークモード・プロジェクト一覧・RSS フィードの3機能を追加したいが、順番に実装すると時間がかかる。

Step 1: 追加する3機能の概要

機能	ブランチ	実装内容
ダークモード	`feature/darkmode`	`tailwind.config.ts` に `darkMode: 'class'` を設定し、ヘッダーにトグルボタンを追加する
プロジェクト一覧	`feature/projects-page`	GitHub API を使ってスター数の多いリポジトリを取得し、`src/app/projects/page.tsx` に一覧表示する
RSS フィード	`feature/rss-feed`	`src/app/rss.xml/route.ts` に Route Handler を追加し、ブログ記事を RSS 形式で配信する

3機能に依存関係はないため、並列実装が可能です。

Step 2: Git worktree でブランチを作成する

my-portfolio のルートで以下のコマンドを実行します。各ブランチを専用のディレクトリとしてチェックアウトします。

# ダークモード用
git worktree add ../my-portfolio-darkmode -b feature/darkmode

# プロジェクト一覧用
git worktree add ../my-portfolio-projects -b feature/projects-page

# RSS フィード用
git worktree add ../my-portfolio-rss -b feature/rss-feed

実行後のディレクトリ構成:

~/
├── my-portfolio/                 # メインリポジトリ（main ブランチ）
├── my-portfolio-darkmode/        # feature/darkmode ブランチ
├── my-portfolio-projects/        # feature/projects-page ブランチ
└── my-portfolio-rss/             # feature/rss-feed ブランチ

各ディレクトリは同一の Git オブジェクトを共有しており、どこでコミットしても元のリポジトリに反映されます。

Step 3: 並列実装スクリプトの作成

scripts/parallel_features.sh を作成します。3つの worktree ディレクトリで claude を & で並列起動し、wait で全完了を待ちます。

#!/usr/bin/env bash
# scripts/parallel_features.sh
# 3機能を Git worktree で並列実装する

set -euo pipefail

REPO_ROOT=$(git rev-parse --show-toplevel)
PARENT_DIR=$(dirname "${REPO_ROOT}")
TIMESTAMP=$(date +%Y%m%d_%H%M%S)
LOG_DIR="${REPO_ROOT}/logs"
mkdir -p "${LOG_DIR}"

echo "=== 並列機能実装 ==="
echo "開始時刻: $(date)"
echo ""

# エージェントへの指示プロンプト

DARKMODE_PROMPT="my-portfolio（Next.js 14 + TypeScript + Tailwind CSS）にダークモードを実装してください。

要件:
1. tailwind.config.ts の darkMode を 'class' に設定する
2. src/components/ThemeToggle.tsx を新規作成する
   - ボタンクリックで <html> に 'dark' クラスを付け外しする
   - localStorage に設定を保存して再訪時も維持する
   - アイコンは「☀️ ライト / 🌙 ダーク」のテキストで可
3. src/app/layout.tsx の <header> にトグルボタンを追加する
4. すべての既存コンポーネントに dark: プレフィックスのスタイルを追加する
   （例: dark:bg-gray-900 dark:text-white）

完了後に git add と git commit を実行してください。
コミットメッセージ: 'feat: add dark mode toggle with localStorage persistence'"

PROJECTS_PROMPT="my-portfolio（Next.js 14 + TypeScript）にプロジェクト一覧ページを実装してください。

要件:
1. src/app/projects/page.tsx を新規作成する
2. GitHub REST API（https://api.github.com/users/{username}/repos）を fetch する
   - username は環境変数 NEXT_PUBLIC_GITHUB_USERNAME から取得する
   - スター数で降順ソートして上位6件を表示する
3. src/components/ProjectCard.tsx を新規作成する
   - リポジトリ名・説明・スター数・言語・GitHubリンクを表示する
   - Tailwind CSS でカード型のデザインにする
4. src/app/layout.tsx のナビゲーションに '/projects' リンクを追加する
5. .env.local.example に NEXT_PUBLIC_GITHUB_USERNAME=your-username を追加する

完了後に git add と git commit を実行してください。
コミットメッセージ: 'feat: add projects page with GitHub API integration'"

RSS_PROMPT="my-portfolio（Next.js 14 + TypeScript）に RSS フィードを実装してください。

要件:
1. src/app/rss.xml/route.ts を新規作成する（Route Handler）
2. src/content/posts/ の Markdown ファイルを読み込んで RSS 2.0 形式の XML を返す
   - gray-matter で frontmatter（title・date・description）を取得する
   - Content-Type は 'application/xml' に設定する
3. RSS の channel 情報:
   - title: 'my-portfolio blog'
   - link: process.env.NEXT_PUBLIC_SITE_URL（デフォルト: 'https://example.com'）
   - description: 'TypeScript・Next.js の実践的な記事'
4. src/app/layout.tsx の <head> に <link rel='alternate' type='application/rss+xml'> を追加する
5. gray-matter がまだ未インストールなら npm install gray-matter を実行する

完了後に git add と git commit を実行してください。
コミットメッセージ: 'feat: add RSS feed endpoint at /rss.xml'"

# 3エージェントを並列実行
echo "3エージェントを並列起動しています..."

(
  cd "${PARENT_DIR}/my-portfolio-darkmode"
  echo "${DARKMODE_PROMPT}" | claude --print --dangerously-skip-permissions \
    > "${LOG_DIR}/darkmode_${TIMESTAMP}.log" 2>&1
  echo "ダークモード: 完了"
) &
PID_DARKMODE=$!

(
  cd "${PARENT_DIR}/my-portfolio-projects"
  echo "${PROJECTS_PROMPT}" | claude --print --dangerously-skip-permissions \
    > "${LOG_DIR}/projects_${TIMESTAMP}.log" 2>&1
  echo "プロジェクト一覧: 完了"
) &
PID_PROJECTS=$!

(
  cd "${PARENT_DIR}/my-portfolio-rss"
  echo "${RSS_PROMPT}" | claude --print --dangerously-skip-permissions \
    > "${LOG_DIR}/rss_${TIMESTAMP}.log" 2>&1
  echo "RSS フィード: 完了"
) &
PID_RSS=$!

# 全エージェントの完了を待つ
echo "実装中... （完了まで数分かかります）"
wait $PID_DARKMODE $PID_PROJECTS $PID_RSS

echo ""
echo "=== 全エージェント完了 ==="
echo "終了時刻: $(date)"
echo ""
echo "ログファイル:"
echo "  - ${LOG_DIR}/darkmode_${TIMESTAMP}.log"
echo "  - ${LOG_DIR}/projects_${TIMESTAMP}.log"
echo "  - ${LOG_DIR}/rss_${TIMESTAMP}.log"

実行権限を付与します。

chmod +x scripts/parallel_features.sh

Step 4: スクリプトを実行する

./scripts/parallel_features.sh

実行中は3つのエージェントが並列で動作します。それぞれのログファイルで進捗を確認できます。

# 別のターミナルでリアルタイム確認
tail -f logs/darkmode_*.log

Step 5: 各ブランチの結果を確認する

全エージェントが完了したら、各 worktree で結果を確認します。

# ダークモードの確認
cd ../my-portfolio-darkmode
git log --oneline -3
ls src/components/ThemeToggle.tsx

# プロジェクト一覧の確認
cd ../my-portfolio-projects
git log --oneline -3
ls src/app/projects/page.tsx

# RSS フィードの確認
cd ../my-portfolio-rss
git log --oneline -3
ls src/app/rss.xml/route.ts

Step 6: 並列レビューを実行する

3ブランチを scripts/review_pr.sh で順番にレビューします。

cd ~/my-portfolio

for BRANCH in feature/darkmode feature/projects-page feature/rss-feed; do
  echo ""
  echo "=============================="
  echo "レビュー: ${BRANCH}"
  echo "=============================="

  # 一時的にブランチの差分をレビュー
  (
    cd "../my-portfolio-${BRANCH#feature/}"
    git diff main...HEAD -- 'src/**/*.tsx' 'src/**/*.ts' | \
    claude --print --dangerously-skip-permissions \
      -p "以下の差分を TypeScript 型安全性・React ベストプラクティス・アクセシビリティの観点でレビューしてください。"
  )
done

Step 7: 各ブランチをプッシュする

レビュー結果に問題がなければ、各ブランチをリモートにプッシュします。

cd ../my-portfolio-darkmode
git push origin feature/darkmode

cd ../my-portfolio-projects
git push origin feature/projects-page

cd ../my-portfolio-rss
git push origin feature/rss-feed

Step 8: worktree のクリーンアップ

作業が完了して各ブランチが main にマージされたら、worktree を削除します。

cd ~/my-portfolio

git worktree remove ../my-portfolio-darkmode
git worktree remove ../my-portfolio-projects
git worktree remove ../my-portfolio-rss

# worktree の一覧を確認（main のみになっていること）
git worktree list

Claude 自身をオーケストレーターとして使う

スクリプトを書く代わりに、Claude に全体の調整を任せることもできます。

> my-portfolio に以下の3機能を並列で実装してください。

1. ダークモード（Tailwind の class モード + localStorage）
2. プロジェクト一覧ページ（GitHub API + 上位6件）
3. RSS フィード（/rss.xml Route Handler）

Git worktree を使って feature/darkmode・feature/projects-page・feature/rss-feed
の3ブランチを同時に作成し、それぞれに Claude エージェントを起動して並列実装してください。
各ブランチで実装完了後にコミットし、最後にレビュー結果を報告してください。

Claude は worktree の作成から並列実行・レビュー・報告まで自律的に実行します。

この時点の my-portfolio

feature/darkmode・feature/projects-page・feature/rss-feed の3ブランチが完成した
各ブランチはリモートにプッシュ済みで PR を作成できる状態
scripts/parallel_features.sh により、今後も複数機能を並列実装できる体制が整った

my-portfolio/
├── scripts/
│   ├── review_pr.sh
│   ├── collect_and_blog.sh
│   └── parallel_features.sh    # ← 新規追加
├── logs/
│   ├── darkmode_*.log
│   ├── projects_*.log
│   └── rss_*.log
└── ...

# 各 worktree ブランチ（リモート）
feature/darkmode       → ThemeToggle.tsx・tailwind dark mode 設定
feature/projects-page  → projects/page.tsx・ProjectCard.tsx
feature/rss-feed       → rss.xml/route.ts

次のレベルへ

Level 9 実践: 週次記事生成・脆弱性監視を 24/7 自動化する