Claude Code: 実践：Chrome 拡張機能と並列タスク

> Create a Chrome extension: Webpage highlight annotation tool

Features:
1. Right-click menu "Highlight" after selecting text
2. Support 4 colors: yellow/green/blue/red
3. Persistent annotations (Chrome storage API)
4. Popup panel to manage annotation list
5. One-click export to Markdown

Tech: Manifest V3, TypeScript, no framework, native DOM

Claude Code:
  → プロジェクト構造を作成（7ソースファイル）
  → manifest.json を作成（Manifest V3）
  → background.ts、content.ts、popup UI を作成
  → storage.ts、export.ts を作成
  → 実行中: npm run build ✓
  Project created! Features complete.

# ラウンド1：基本機能完了、反復開始

> Add feature: Click existing highlight to remove annotation
Claude Code: ✅ click-to-remove ハンドラを追加

> Add feature: Annotation list search support
Claude Code: ✅ フィルタ付き検索を追加

> Add feature: Support annotation in PDF pages
Claude Code: ✅ PDF.js 統合を追加

chrome-highlighter/
├── manifest.json
├── src/
│   ├── background.ts
│   ├── content.ts
│   ├── popup/
│   ├── storage.ts
│   ├── export.ts
│   └── pdf-viewer.ts
├── dist/
├── package.json
└── tsconfig.json

# 直列：8 + 6 + 10 + 5 = 29 分合計

# 並列：max(8, 6, 10, 5) = 10 分合計
# 65%の時間節約

# 問題：同じファイルへの並列修正が競合を引き起こす

# 解決策：各タスクは異なるファイルを修正
> Avatar only touches avatar.ts files
> Export only touches export.ts files
> Don't modify index.ts (I'll register routes manually)

Claude Code:
  Sub-agent 1 [avatar files] → ✅
  Sub-agent 2 [export files] → ✅
  Main agent: 手動挿入用のルート登録コードを生成

元のタスク："Migrate project from REST to GraphQL"

分解：
1. GraphQL Schema を定義（独立）
2. User Resolver を作成（独立、Schema 後）
3. Order Resolver を作成（独立、Schema 後）
4. Payment Resolver を作成（独立、Schema 後）
5. N+1 最適化用 DataLoader を追加（独立）
6. ルートレイヤーを移行（全 Resolver 後）
7. 古い REST ルートを削除（最後のステップ）

# Phase 1：Schema → /checkpoint "schema-complete"
# Phase 2：並列 Resolver → /checkpoint "resolvers-complete"
# Phase 3：ルート移行 → /checkpoint "migration-complete"
# 検証：134テストがすべて合格 ✅

Phase 1 (Schema):    $0.45
Phase 2 (Resolvers): $2.30 (4サブエージェント)
Phase 3 (Migration): $1.80
Total:               $4.55

vs. 手動開発：~4時間 × $50/時 = $200+