Imagine終了でも大丈夫！実践🚀Claude Codeでチーム開発 - Day85のダッシュボードを本格アプリに
こんにちは！YaroTechです。
昨日、Imagine with Claudeが終了しました。
正直、Imagineの妄想創作スピードは想像以上に速くて、めちゃくちゃ便利でした。
「こんなアプリ作りたい」→ 10秒後には動いてる...この体験、忘れられません。
でも大丈夫。Imagine終了でも大丈夫！
Day85では、Imagineで作ったアプリをArtifactsで復活させる方法をお伝えしました。
そして今日は、さらにその先へ。
Day85で作ったnote記事ダッシュボードを、Claude Codeで本番レベルのアプリに作り込みます！
しかも、サブエージェント（複数のClaude）を使った「チーム開発」を体験します。
PM Claude: 要件整理と進捗管理
Dev Claude: コード実装
QA Claude: テストとバグ発見
一人で開発しているのに、チームで開発している感覚...これ、マジで未来です！
今回は Week 1（基盤構築）を実践し、実際の作業内容とつまずきポイントを完全公開します！
※見出し画像のプロンプトは一番下におまけで公開中！
🖥️ 実行環境
OS: Windows 11 Pro 24H2（ARM64版）
ターミナル: Windows Terminal × 3（PM/Dev/QA用）
使用ツール: Claude Code CLI v1.0.83
ベースファイル: Day85のnote_dashboard_fixed.html
必要なもの:
Node.js 18以上
Claude Max サブスクリプション
Git
基本的なコマンドライン操作の知識
※「ベースファイル: Day85のnote_dashboard_fixed.html」はArtifactsで作ってもらったファイルです。「公開希望」コメントあれば、ファイル公開してもいいですよ！
重要: この記事はDay85の続きです。Day85を読んでいない方は、先にそちらをチェックしてください！
関連記事: Day85: 10分で作った神アプリ、消えちゃった...→でも大丈夫！Imagine完全ワークフロー
🎯 この記事で得られること
✅ Claude Codeのサブエージェント機能の実践方法
✅ PM / Dev / QA の役割分担での開発体験
✅ 実際のエラーと解決方法（ARM64環境）
✅ React + TypeScript開発環境の構築手順
✅ Week 1基盤構築の完全ガイド
🚨 この記事を読む前に
プログラミング初心者の方や、この記事で使われている専門用語（API、Git、Docker、LocalStorageなど）に不安がある方は、先にこちらの用語解説記事を読むことをおすすめします：
関連記事: 【保存版】Claude Code開発で使う用語を初心者向けに完全解説！API、Git、Docker...これだけ知っておけばOK
「API？Git？なにそれ？」という方も、この記事を読めば安心して実践編に進めます！
🤖 サブエージェントとは？
定義
サブエージェントとは、複数のClaude Codeインスタンスを同時に起動し、それぞれに異なる役割を持たせる開発手法です。
Anthropicの公式ドキュメントでも推奨されている方法で、Git worktreesを使って複数のブランチを同時に操作できます。
なぜサブエージェントを使うのか？
従来の開発
あなた一人 → すべてのタスクを順番に処理問題点:
コンテキストスイッチが大変
タスクの優先順位が曖昧
全体像を見失いやすい
サブエージェントでの開発
PM Claude → 要件整理、優先順位付け
Dev Claude → コード実装
QA Claude → テスト、品質保証メリット:
各Claudeが専門分野に集中
並行作業が可能
品質が向上
チーム開発の疑似体験
📋 今回のミッション：Week 1基盤構築
Day85のプロトタイプ
Day85で作ったもの:
シングルHTMLファイル（538行）
仮データのハードコーディング
LocalStorageでの簡易データ保存
基本的なUI/UX
Week 1の目標
PM Claudeが提案した18週間264時間の開発計画のうち、今回は**Week 1の基盤構築（19時間相当）**を実践します：
完成させるもの:
✅ React 19 + TypeScript + Viteプロジェクト
✅ ESLint、Prettier、Husky設定
✅ 完全なディレクトリ構造
✅ Tailwind CSS v4設定
✅ Zustand状態管理
✅ TypeScript型定義（7ファイル）
✅ React Routerルーティング
実際の所要時間: 約2時間（サブエージェント活用）
重要: 今回は「家の基礎工事」段階です。見た目は味気ないですが、本番品質の開発基盤が完成します！
🚀 実践編：ステップバイステップ
手順1: プロジェクトセットアップ（5分）
1-1. プロジェクトディレクトリ作成
cd C:\Users\YourName\Downloads\note
mkdir note-dashboard-pro
cd note-dashboard-pro1-2. Git初期化とDay85ファイルコピー
git init
copy C:\Users\YourName\Downloads\note\articles\Day85\note_dashboard_fixed.html .\prototype.html
git add .
git commit -m "Initial commit: Day85 prototype"結果: prototype.html（538行）が記録されました
手順2: サブエージェント準備（5分）
2-1. 3つのターミナルタブを開く
Windows Terminalで`Ctrl + Shift + T`を2回押して、合計3つのタブを作成：
※`Ctrl + Shift + T`を2回押しでPowerShellが立ち上がる場合はタブの「∨」で「コマンドプロンプト」を選んでください。
タブ1: PM Claude用
タブ2: Dev Claude用
タブ3: QA Claude用
各タブで`cd C:\Users\YourName\Downloads\note\note-dashboard-pro`を実行
2-2. Claude Code起動
各タブで`claude`コマンドを実行：
claude確認ダイアログ: 「Do you trust the files in this folder?」→ `y` を入力
手順3: PM Claudeに計画書作成を指示（15分）
3-1. PM Claudeへの指示（タブ1）
あなたはこのプロジェクトのプロジェクトマネージャーです。
【プロジェクト概要】
Day85で作成したnote記事ダッシュボードのプロトタイプ（prototype.html）を、
本番運用可能なWebアプリケーションに作り込みます。
【あなたの役割】
1. prototype.htmlを分析し、現状の問題点を洗い出す
2. 必要な改良点をリストアップする
3. タスクを優先順位順に並べる
4. 開発者とテスターに渡すタスクリストを作成する
【成果物】
- REQUIREMENTS.md（要件定義書）
- TASKS.md（タスクリスト）
- ARCHITECTURE.md（アーキテクチャ設計）
まずは prototype.html を分析してください。3-2. PM Claudeの成果物
PM Claudeが作成した3つのドキュメント（実物）：
REQUIREMENTS.md（一部抜粋）:
## 技術要件
### フロントエンド
- **フレームワーク**: React 18 + TypeScript
- **状態管理**: Zustand
- **スタイリング**: Tailwind CSS v4
- **バンドラー**: Vite
### 非機能要件
- パフォーマンス: Lighthouse Score 90以上
- アクセシビリティ: WCAG 2.1 AA準拠TASKS.md（Week 1部分）:
### Week 1: プロジェクト基盤構築（19時間）
| ID | Task | Estimate |
|----|------|----------|
| T001 | プロジェクト初期化（Vite + React + TypeScript） | 4h |
| T002 | 開発環境セットアップ（ESLint, Prettier, Husky） | 3h |
| T003 | ディレクトリ構造設計・実装 | 2h |
| T004 | Tailwind CSS導入 | 3h |
| T005 | Zustand状態管理セットアップ | 2h |
| T006 | TypeScript型定義作成 | 3h |
| T007 | React Routerルーティング実装 | 2h |手順4: Dev Claudeに実装開始を指示（10分）
4-1. Dev Claudeへの指示（タブ2）
あなたはこのプロジェクトの開発者です。
【あなたの役割】
PMが作成したREQUIREMENTS.mdとTASKS.mdを読み、
Phase 1（Week 1）の実装を開始してください。
【技術スタック】
- Frontend: React + TypeScript + Vite
- スタイリング: Tailwind CSS v4
- 状態管理: Zustand
- テスト: Vitest
まずREQUIREMENTS.mdとTASKS.mdを読んで、
Week 1のタスクを順番に実装してください。4-2. QA Claudeへの指示（タブ3）
あなたはこのプロジェクトのQAエンジニアです。
【あなたの役割】
1. 開発者が実装したコードをテストする
2. バグを発見したら報告する
3. テストコードを作成する
現時点では「準備完了、開発完了待ち」と返答してください。手順5: Week 1実装の実践（90分）
5-1. T001: Viteプロジェクト作成
Dev Claudeの作業:
pnpmチェック → 未インストール → npm使用決定
`npm create vite@latest .`実行 → エラー（既存ファイルあり）
一時フォルダ作成 → `temp-project`に作成 → ファイルコピー
つまずきポイント1: Windowsコマンドエラー
# エラー: xcopy が失敗
xcopy /E /I /Y temp-project\* .
# 解決: PowerShellに切り替え
Copy-Item -Path temp-project\* -Destination . -Recurse -ForceARM64環境での動作: 問題なし✅
5-2. T002: 開発環境セットアップ
インストールしたパッケージ:
npm install --save-dev \
prettier \
husky \
lint-staged \
@commitlint/cli \
@commitlint/config-conventional設定ファイル作成:
`.prettierrc` - コードフォーマット設定
`.prettierignore` - フォーマット除外
`eslint.config.js` - Prettier連携
`.lintstagedrc.json` - Git pre-commit
`commitlint.config.js` - コミットメッセージ規約
つまずきポイント2: Huskyフック作成エラー
# エラー: .huskyフォルダ作成失敗
npx husky init
# 解決: Bashコマンドで代替
echo "npx lint-staged" > .husky/pre-commit5-3. T003: ディレクトリ構造構築
作成された構造:
src/
├── components/
│ ├── common/ # 共通コンポーネント
│ ├── dashboard/ # ダッシュボード用
│ └── forms/ # フォーム用
├── hooks/ # カスタムフック
├── store/ # Zustand状態管理
├── services/
│ ├── api/ # API通信
│ ├── storage/ # データ永続化
│ └── analytics/ # 分析ロジック
├── types/ # TypeScript型定義
├── styles/ # スタイル
├── pages/ # ページコンポーネント
└── utils/ # ユーティリティ5-4. T004: Tailwind CSS導入
インストール:
npm install --save-dev \
tailwindcss \
postcss \
autoprefixer \
@tailwindcss/forms \
@tailwindcss/typographyつまずきポイント3: Tailwind v4対応
/* エラー: v3構文は非推奨 */
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 解決: v4では不要、直接スタイル記述 */
/* index.cssから@tailwindディレクティブ削除 */tailwind.config.js:
export default {
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
colors: {
'note-purple': '#b68d7f',
},
},
},
};5-5. T005-T007: Zustand、型定義、ルーティング
Zustandインストール:
npm install zustandTypeScript型定義作成（7ファイル）:
`types/article.ts` - 記事データ型
`types/analytics.ts` - 分析データ型
`types/settings.ts` - 設定データ型
`types/api.ts` - API型
`types/store.ts` - Store型
`types/common.ts` - 共通型
`types/index.ts` - エクスポート
React Router設定:
npm install react-router-dom基本ページ作成:
`pages/Dashboard.tsx`
`pages/Analytics.tsx`
`pages/Settings.tsx`
手順6: ビルド＆動作確認（10分）
6-1. 最終ビルド
npm run build結果: ✅ ビルド成功！
> note-dashboard-pro@1.0.0 build
> tsc -b && vite build
vite v7.1.7 building for production...
✓ built in 2.34s6-2. 開発サーバー起動
npm run dev結果:
VITE v7.1.7 ready in 543 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose6-3. ブラウザで確認
表示内容:
Dashboard: "Welcome to the note Dashboard!"
Analytics: "Analytics Page"
Settings: "Settings Page"
見た目: シンプルなテキスト表示のみ（これは正しい状態）
✅ Week 1完了！成果物の確認
プロジェクト構造（最終版）
note-dashboard-pro/
├── .git/ # Gitリポジトリ
├── .husky/ # Gitフック
├── node_modules/ # パッケージ
├── src/
│ ├── components/
│ │ ├── common/
│ │ ├── dashboard/
│ │ └── forms/
│ ├── hooks/
│ ├── store/
│ ├── services/
│ │ ├── api/
│ │ ├── storage/
│ │ └── analytics/
│ ├── types/ # ✅ 7つの型定義ファイル
│ ├── styles/
│ ├── pages/ # ✅ 3つのページ
│ ├── utils/
│ ├── App.tsx
│ ├── main.tsx
│ ├── router.tsx
│ └── index.css
├── ARCHITECTURE.md # PM Claudeが作成
├── REQUIREMENTS.md # PM Claudeが作成
├── TASKS.md # PM Claudeが作成
├── prototype.html # Day85のオリジナル
├── package.json
├── vite.config.ts
├── tailwind.config.js
├── tsconfig.json
└── eslint.config.js完成した機能
基盤（見えない部分）:
✅ TypeScript型システム完備
✅ ESLint + Prettier + Husky
✅ Git pre-commit/commit-msgフック
✅ Tailwind CSS v4対応
✅ Zustand状態管理準備完了
✅ React Router動作確認
UI（見える部分）:
✅ 3ページ（Dashboard、Analytics、Settings）
❌ グラフ、統計カードなし（Week 2で実装予定）
❌ データ連携なし（Week 3で実装予定）
重要: 現状は「家の基礎工事完了」段階。Week 2以降で内装（UI）を作り込みます！
📊 サブエージェント協業の成果
役割分担の効果
PM Claude（タブ1）:
⏱️ 作業時間: 約15分
📄 成果物: 3つの設計書（合計約5,000字）
🎯 品質: 商用レベルの詳細設計
Dev Claude（タブ2）:
⏱️ 作業時間: 約90分
💻 成果物: 完全な開発環境
⚡ 効率: 人間の3倍速で実装
QA Claude（タブ3）:
⏱️ 作業時間: 待機中（Week 2から本格稼働）
🧪 準備: テスト環境整備済み
時間比較
従来の一人開発:
要件定義: 1時間
環境構築: 2時間
実装: 3時間
合計: 6時間
サブエージェント開発:
PM + Dev並行作業
エラー自動解決
合計: 2時間（67%短縮）
⚠️ つまずきポイント実録
ポイント1: Windowsコマンドの違い
問題: `xcopy`コマンドがエラー
原因: パスの扱いがPowerShellと異なる
解決:
Copy-Item -Path temp-project\* -Destination . -Recurse -Forceポイント2: Tailwind CSS v4の変更
問題: `@tailwind`ディレクティブがエラー
原因: v4では構文が変更
解決:
index.cssから`@tailwind`削除
Tailwind v4はPostCSS経由で自動適用
ポイント3: Huskyフック作成失敗
問題: `.husky/pre-commit`作成エラー
原因: Windowsのファイルパス問題
解決:
echo "npx lint-staged" > .husky/pre-commitポイント4: ARM64環境の互換性
結果: 全く問題なし✅
Node.js、npm、Vite、React等はすべてARM64ネイティブ対応済み。
💡 実践から学んだこと
学び1: サブエージェントは本当に有効
メリット:
PM Claudeの設計品質が高い
Dev Claudeは迷わず実装に集中
エラーを自動で検知・解決
デメリット:
初心者には3つのターミナル管理が難しい
コンテキスト共有が必要
学び2: 「基礎が9割」は本当
見た目は地味ですが：
TypeScript型定義 → 後の開発が超楽
ESLint + Prettier → コード品質が自動維持
Git フック → バグを事前に防止
学び3: Week 1だけでも価値がある
この基盤があれば：
✅ すぐに機能追加を開始できる
✅ 他のプロジェクトでも再利用可能
✅ チーム開発への移行も容易
🚀 次のステップ
Week 2で実装予定
UI実装（30時間相当）:
統計カードコンポーネント
グラフコンポーネント（Chart.js）
人気記事カード
記事追加フォーム
レスポンシブデザイン
期待される見た目:
Day85のHTMLに近いリッチなUI
アニメーション付き
データ連携（Mock）
Week 3-4で実装予定
データ管理・永続化（29時間）:
Zustand Store実装
LocalStorage管理
CRUD操作
エラーハンドリング
🔗 関連記事
今回の内容に関連する過去記事もぜひご覧ください：
関連記事: Day85: 10分で作った神アプリ、消えちゃった...→でも大丈夫！Imagine完全ワークフローでは、今回ベースにしたダッシュボードの作成過程を詳しく紹介しています。
関連記事: Day3: 【操作動画あり】VSCode×MCPでExcel作業を自動化！GPT-4、Claude、Gemini徹底比較で見えた「最強の組み合わせ」では、MCPを使った自動化について解説しています。
📝 まとめ
✅ Week 1で達成したこと
基盤構築完了:
React 19 + TypeScript + Vite
Tailwind CSS v4
ESLint + Prettier + Husky
完全なディレクトリ構造
TypeScript型定義7ファイル
React Routerルーティング
サブエージェント協業:
PM Claude: 要件定義・タスク管理
Dev Claude: 実装・エラー解決
QA Claude: 準備完了
実際の成果:
⏱️ 2時間で完成（従来の67%短縮）
💻 本番品質の開発環境
🚀 Week 2へ即移行可能
🎯 重要な発見
基礎が9割: 見た目は地味でも、この基盤が全ての価値を生む
サブエージェントは有効: 役割分担で品質と速度が両立
ARM64でも問題なし: モダンな開発環境は完全対応
💪 次のアクション
今週末に挑戦:
Week 2のUI実装に進む
自分のプロジェクトで基盤構築
来週、さらに深掘り:
Week 3のデータ管理実装
本番環境へのデプロイ
一人で開発しているのに、チームで開発している感覚。
これが、Claude Codeのサブエージェント開発です💪
🚀 次回予告
Day87: Week 2実践！UIコンポーネント実装でダッシュボードに命を吹き込む
基礎工事が終わったので、次は内装（UI）を作り込みます！
統計カード、グラフ、フォーム...Day85のHTMLを超えるリッチなUIを実装します！
🎨 おまけ：見出し画像作成プロンプト
今日の見出し画像のベースはチャッピー（ChatGPT）に下記プロンプトで作成してもらいました！：
柔らかな照明で撮影された超現実的でプロフェッショナルな写真を作成してください。
下記条件のnote見出し画像をサイズは横長で作成してください。サイズは必ず横長で作成してください。
## 🎨 見出し画像案
### デザインコンセプト
- **背景**: ブルーからパープルへのグラデーション（チーム感・協業・未来感）
- **テーマ**: チーム開発 × AI × 役割分担
- **メインビジュアル**: 3人のシルエット、ダッシュボード、コード（イラストベース）
- **目的**: 協業・役割分担・効率化を表現
### メインビジュアル
- **中央**: 3人のシルエット（PM / Dev / QA）をアイコン化
- PM: クリップボード/チェックリストのアイコン
- Dev: コード `{...}` のアイコン
- QA: 虫眼鏡/バグのアイコン
- **左側**: ダッシュボード画面のイメージ
- **右側**: コードエディタのイメージ
- **接続**: 3人を接続線・矢印で繋ぐ
### テキスト要素
- **上部**: 「実践！Claude Code」（白色・太字・28pt）
- **中央上**: 「チーム開発体験」（黄色・48pt・太字・最も目立つ）
- **中央中**: 「PM × Dev × QA」（白色・36pt）
- **下部**: 「サブエージェントで役割分担」（白色・24pt）
### 装飾要素
- 3人のシルエット間の接続線・矢印
- 各役割のアイコン（クリップボード、コード、虫眼鏡）
- キラキラ効果（✨）
- チェックマーク（✅）
- タスク完了のアイコン
- **YaroTechロゴ**（右下・12pt・控えめに）
### カラーパレット
- **背景**: #0066CC → #8B5CF6 （ブルー→パープル）
- **テキスト**: ホワイト（#FFFFFF）、イエロー（#FFD700）
- **アクセント**: パープル（#A78BFA）
### 作成手順
1. スライドサイズ（1536×1024px）
2. ブルー→パープルのグラデーション背景を作成
3. 中央に3人のシルエットをアイコン化して横並びに配置
4. 各シルエットに役割アイコンを追加（PM/Dev/QA）
5. 3人を接続線・矢印で繋ぎ、協業関係を表現
6. 左側にダッシュボード画面のイメージを配置
7. 右側にコードエディタのイメージを配置
8. 「実践！Claude Code」を上部に配置
9. 「チーム開発体験」を中央上部に大きく目立つように配置（黄色）
10. 「PM × Dev × QA」を中央に配置（3人の上）
11. 「サブエージェントで役割分担」を下部に配置
12. 装飾要素を追加（キラキラ ✨、矢印、チェック ✅）
13. タスク完了のアイコンを散りばめる
14. YaroTechロゴを右下に12ptで控えめに配置#YaroTech #ClaudeCode #サブエージェント #チーム開発 #AI開発 #React #TypeScript #Vite #TailwindCSS #基盤構築 #Week1 #働き方を変えるツール
