基礎から大変身！Claude Code Week 2でUI実装 - リッチダッシュボード完成編

YaroTech｜生成AIの傾奇者

2025年10月5日 15:16

こんにちは！YaroTechです。

先週、Claude CodeのWeek 1で「家の基礎工事」をやりました。

正直、完成したときは「これ、本当に完成するの？」って思いました😅

シンプルなテキスト表示だけ。グラフもカードも何もない...

でも、基礎がしっかりしていれば、内装は一気に進むんです！

今日はWeek 2のUI実装を実践して、地味な基盤をリッチなダッシュボードに大変身させます！

統計カード: 記事数、いいね数、閲覧数を視覚的に表示
グラフ: Chart.jsで美しいビジュアライゼーション
フォーム: インタラクティブな記事追加機能
レスポンシブ: スマホでも完璧に動作

PM Claudeの見積もり30時間を、サブエージェント活用で3時間に短縮！

Week 1の地道な基礎工事が、ここで一気に花開きます💐

※見出し画像のプロンプトは一番下におまけで公開中！

🖥️ 実行環境

OS: Windows 11 Pro 24H2（ARM64版）
ターミナル: Windows Terminal × 3（PM/Dev/QA用）
使用ツール: Claude Code CLI v1.0.83
技術スタック:
- Frontend: React 19 + TypeScript 5.7
- Build: Vite 7.1
- Styling: Tailwind CSS v4
- Charts: Chart.js 4.4
- State: Zustand 5.0
- Router: React Router 7.1
必要なもの:
- Node.js 18以上
- Claude Max サブスクリプション
- Week 1完了済みのプロジェクト（note-dashboard-pro）

重要: この記事はDay86の続きです。Day86を読んでいない方は、先にそちらをチェックしてください！

🎯 この記事で得られること

✅ Week 2のUI実装タスク完全ガイド
✅ Chart.jsを使ったグラフ表示の実装方法
✅ Tailwind CSS v4でのコンポーネントスタイリング
✅ TypeScript型安全性を保ったまま開発する方法
✅ サブエージェント協業でのUI実装体験
✅ Before/Afterの劇的な変化を目撃

🚨 この記事を読む前に

プログラミング初心者の方や、この記事で使われている専門用語（API、Git、Docker、LocalStorageなど）に不安がある方は、先にこちらの用語解説記事を読むことをおすすめします：

「API？Git？なにそれ？」という方も、この記事を読めば安心して実践編に進めます！

📋 Week 2のミッション：UI実装

Week 1の成果（前回のおさらい）

構築したもの:

✅ React 19 + TypeScript + Vite環境
✅ Tailwind CSS v4設定
✅ Zustand状態管理基盤
✅ React Routerルーティング
✅ TypeScript型定義（7ファイル）
✅ 完全なディレクトリ構造

見た目: シンプルなテキスト表示のみ（これは正しい状態）

Week 2の目標

PM Claudeが提案した18週間264時間の開発計画のうち、今回はWeek 2のUI実装（30時間相当）を実践します：

完成させるもの:
| ID | Task | Estimate |
|----|------|----------|
| T101 | ダッシュボードレイアウト実装 | 6h |
| T102 | 統計カードコンポーネント実装 | 4h |
| T103 | プログレスバーコンポーネント実装 | 2h |
| T104 | チャートコンポーネント実装（Chart.js） | 6h |
| T105 | 人気記事カードコンポーネント実装 | 4h |
| T106 | 記事追加フォームコンポーネント実装 | 4h |
| T107 | レスポンシブデザイン調整 | 4h |

Week 2 Total: 30h

実際の所要時間: 約20分（Dev Claude単独で99%短縮）

🚀 実践編：ステップバイステップ

準備: プロジェクト状態確認（5分）

1. プロジェクトディレクトリに移動

cd C:\Users\YourName\Downloads\note\note-dashboard-pro

2. Week 1の成果物確認

npm run dev

http://localhost:5173 を開いて、Week 1の基本ページが表示されることを確認します。

確認内容:

Dashboard、Analytics、Settingsの3ページが存在
シンプルなテキスト表示のみ
ルーティングが動作している

サーバーを停止（Ctrl + C）して、Week 2の実装を開始します。

手順1: サブエージェント起動（5分）

1-1. 3つのターミナルタブを開く

Windows Terminalで`Ctrl + Shift + T`を2回押して、合計3つのタブを作成：

タブ1: PM Claude用
タブ2: Dev Claude用
タブ3: QA Claude用

各タブで`cd C:\Users\YourName\Downloads\note\note-dashboard-pro`を実行

1-2. Claude Code起動

各タブで`claude`コマンドを実行：

claude

手順2: PM Claudeへの指示（5分）

タブ1（PM Claude）:

あなたはこのプロジェクトのプロジェクトマネージャーです。

Week 1の基盤構築が完了しました。
TASKS.mdのWeek 2タスク（T101-T107）を確認し、
開発者に実装指示を出してください。

まずTASKS.mdを読んで、Week 2のタスクを確認してください。

※実践では、Week1の続きで、手順3からはじめてます。

手順3: Dev Claudeへの実装指示（実践内容）

タブ2（Dev Claude）に以下のプロンプトを送信します：

こんにちは！note記事ダッシュボードプロジェクトの開発を担当します。

## 📋 現在の状況
- Week 1完了：React + TypeScript + Vite基盤構築済み
- 現在地：C:\Users\YourName\Downloads\note\note-dashboard-pro

## 🎯 今回のミッション：Week 2 UI実装

TASKS.mdのWeek 2タスク（T101-T107）を順番に実装してください。

まず、T101「ダッシュボードレイアウト実装」から開始してください。

### T101の要件
- 統計カード用のグリッドレイアウト
- チャート表示エリア
- 人気記事リストエリア
- Tailwind CSS v4を使用
- レスポンシブ対応

実装前に、以下を確認してください：
1. TASKS.mdの内容
2. src/types/の型定義
3. 既存のDashboard.tsxの構造

では、T101の実装を開始してください！

Dev Claudeの動き:

TASKS.mdを確認
Dashboard.tsxを開いて現在の構造を把握
レイアウトの実装を開始

重要なポイント:

Claude Codeは自動的にファイルを読み込んで状況を把握します
「shift+tab」で編集の自動承認モードにすると作業がスムーズです

手順4: T101-T103の自動実装（約5分）

T101: ダッシュボードレイアウト実装 ✅

Dev Claudeが自動実装:

// Dashboard.tsxに以下のセクションを追加
- 統計カード用の4カラムグリッド（モバイル1列→タブレット2列→デスクトップ4列）
- チャート表示エリア（2カラムグリッド）
- 人気記事リストエリア
- 記事追加フォームエリア

レスポンシブ設計:

モバイル（< 640px）: 1カラム
タブレット（640px - 1023px）: 2カラム
デスクトップ（≥ 1024px）: 4カラム

T102: StatsCardコンポーネント実装 ✅

自動作成ファイル: `src/components/StatsCard.tsx`（59行）

実装機能:

✅ アイコン付き統計表示
✅ 前月比トレンド（↑↓表示）
✅ 4色カラーバリエーション（blue/green/purple/orange）
✅ ホバーエフェクト

interface StatsCardProps {
  title: string;
  value: string | number;
  icon: React.ReactNode;
  trend?: { value: number; isPositive: boolean };
  color?: 'blue' | 'green' | 'purple' | 'orange';
}

T103: ProgressBarコンポーネント実装 ✅

自動作成ファイル: `src/components/ProgressBar.tsx`（58行）

実装機能:

✅ 進捗率の視覚化
✅ 現在値/目標値表示
✅ 残り数表示
✅ 3サイズ対応（sm/md/lg）
✅ 4色のカラーバリエーション

interface ProgressBarProps {
  current: number;
  target: number;
  label: string;
  color?: 'blue' | 'green' | 'purple' | 'orange';
  size?: 'sm' | 'md' | 'lg';
}

手順5: T104のChart.js実装（約3分）

パッケージインストール

Dev Claudeが自動的に以下のコマンドを提案：

npm install react-chartjs-2 chart.js

承認方法: 「2」を入力して「このフォルダでnpm installを今後自動承認」を選択
※昨日のWeek1では「1」を選択して、毎回確認で時間がかかった（結果的に「1」しか選択しなかった）ので、今回は「2」でスムーズに進めました。

T104: チャートコンポーネント実装 ✅

自動作成ファイル:

`src/components/TrendChart.tsx`（90行）- 折れ線グラフ
`src/components/CategoryChart.tsx`（77行）- 棒グラフ

TrendChart（投稿トレンド）:

// 折れ線グラフで投稿数推移を表示
- Chart.js統合
- レスポンシブ対応
- カスタムカラー（青色）
- グリッド表示

CategoryChart（カテゴリ別分析）:

// 棒グラフでカテゴリ別記事数を表示
- 4カテゴリ対応（Tech/Life/Business/Other）
- カスタムカラー設定
- レスポンシブ対応

手順6: T105-T106の実装（約7分）

T105: PopularPostCardコンポーネント実装 ✅

自動作成ファイル: `src/components/PopularPostCard.tsx`（90行）

実装機能:

✅ ランキング表示（1位、2位、3位...）
✅ いいね数・ビュー数・スコア表示
✅ カテゴリ・タグ・公開日表示
✅ 外部リンク対応
✅ レスポンシブレイアウト（モバイルは縦並び、デスクトップは横並び）

interface PopularPost {
  id: string;
  title: string;
  category: string;
  publishedAt: string;
  likes: number;
  views: number;
  score: number;
  tags: string[];
  url: string;
}

T106: AddArticleFormコンポーネント実装 ✅

自動作成ファイル: `src/components/AddArticleForm.tsx`（215行）

実装機能:

✅ タイトル・URL・カテゴリ入力
✅ タグの追加・削除機能
✅ 必須フィールドバリデーション
✅ URL形式チェック
✅ レスポンシブボタンレイアウト

interface CreateArticleRequest {
  title: string;
  url: string;
  category: string;
  publishedAt: string;
  tags: string[];
}

手順7: T107のレスポンシブ調整＆最終確認（約2分）

T107: レスポンシブデザイン調整 ✅

Dev Claudeが自動で開発サーバーを起動:

npm run dev

承認方法: 「2」を入力して「npm run devを今後自動承認」を選択

実装内容:

✅ すべてのコンポーネントでブレークポイント対応
✅ Tailwind CSS v4のsm:, lg:プレフィックス活用
✅ モバイルファーストデザイン
✅ フレキシブルグリッドレイアウト

レスポンシブブレークポイント:

/* Mobile（< 640px）: 1カラム */
/* Tablet（640px - 1023px）: 2カラム */
/* Desktop（≥ 1024px）: 4カラム */

手順8: 完成確認（約3分）

8-1. 開発サーバーアクセス

ブラウザで http://localhost:5173 を開く

表示内容:

📊 統計カード（上部4枚）:

総投稿数：150（↑15% vs先月）
連続投稿日数：45日
今月の投稿数：23（↑8% vs先月）
平均いいね数：12.5（↓3% vs先月）

📈 目標達成状況（プログレスバー3本）:

今月の投稿目標：23/30（77%）- 青色
年間投稿目標：150/365（41%）- 緑色
連続投稿チャレンジ：45/100（45%）- 紫色

📉 チャート（2つ）:

左：投稿トレンド（直近7日間）- 折れ線グラフ
右：カテゴリ別記事数 - 棒グラフ（Tech、Life、Business、Other）

📝 人気記事トップ10:

React 19の新機能を徹底解説（スコア: 95.5）
TypeScriptでクリーンアーキテクチャを実装する方法（スコア: 88.3）
効率的なリモートワークのコツ10選（スコア: 82.1）
...（10位まで表示）

✍️ 新規記事登録フォーム:

記事タイトル入力欄
記事URL入力欄
カテゴリ選択（ドロップダウン）
公開日（日付ピッカー）
タグ入力＋追加ボタン
「記事を追加」ボタン

8-2. レスポンシブ確認

F12キー → デベロッパーツール → Ctrl+Shift+M でデバイスモード

モバイル表示（375px）:

✅ 統計カードが1列に並ぶ
✅ チャートが縦に配置
✅ フォームが画面幅に最適化

タブレット表示（768px）:

✅ 統計カードが2列に並ぶ
✅ チャートが横に2つ並ぶ

デスクトップ表示（1920px）:

✅ 統計カードが4列に並ぶ
✅ すべての要素が最適配置

8-3. Dev Claudeの評価

画面下部の評価で「3. Good」を選択

Dev Claudeへ実装詳細についてのプロンプト:

Week 2の実装内容をまとめてください。Day87の記事に記載するために、以下の情報をまとめてください：

1. 実行したコマンド
2. 作成したファイル一覧
3. 発生したエラーと解決方法（あれば）
4. 所要時間

Dev Claudeからの回答:
※実際の回答は188行 2,874文字ありましたが下記主要回答のみ抜粋

Week 2の全タスク（T101-T107）が完了しました！
作成したファイル: 6コンポーネント、589行のコード
所要時間: 約15-20分（見積30時間 → 99%短縮）

✅ Week 2完了！成果物の確認

Before/After比較

Before（Week 1完了時）:

シンプルなテキスト表示のみ
「Welcome to the note Dashboard!」
基本的なページ遷移のみ

After（Week 2完了時）:

📊 統計カード（記事数、いいね数、閲覧数、フォロワー数）
📈 Chart.jsによる美しいグラフ
📝 記事追加フォーム
📱 完全レスポンシブ対応
✨ アニメーション効果

視覚的な変化: Day85のHTMLプロトタイプに近いリッチなUIに！

完成した機能

UI（見える部分）:

✅ 統計カード4種類
✅ 折れ線グラフ（投稿数推移）
✅ 棒グラフ（いいね数推移）
✅ 人気記事TOP5表示
✅ 記事追加フォーム
✅ レスポンシブデザイン

技術（見えない部分）:

✅ Chart.js v4統合
✅ TypeScript型安全性維持
✅ Tailwind CSS v4スタイリング
✅ Zustand状態管理準備
✅ コンポーネント分離設計

⚠️ つまずきポイント実録

実は...つまずきポイントがありませんでした！😲

Week 1の基盤構築の威力:

今回のWeek 2実装では、驚くことに大きなエラーや問題が一切発生しませんでした。これは決して偶然ではありません。

Week 1でしっかり準備したこと:

✅ TypeScript型定義を完璧に整備
✅ Tailwind CSS v4の設定を完了
✅ ESLint/Prettierで品質担保
✅ ディレクトリ構造を明確化

Claude Codeの自動解決:

パッケージインストール時の依存関係エラー → 自動検知・自動修正
型定義の不足 → 適切な型を自動推論
レスポンシブデザインの調整 → Tailwind v4の最適な記法を自動選択

唯一の「確認ポイント」

Chart.jsのインストール承認:

npm install react-chartjs-2 chart.js

対応: 「2」を入力して自動承認

これだけ！

学び: 基礎工事の重要性

Week 1で時間をかけて基盤を作ったからこそ、Week 2がスムーズに進みました。

建築に例えると:

Week 1 = 地盤調査＋基礎工事（時間かかる、地味）
Week 2 = 内装工事（早い、華やか）

地味な基礎工事をサボると、内装工事で必ずトラブルが起きます。

Claude Codeは優秀ですが、基盤がしっかりしていないと真価を発揮できません。

📊 サブエージェント協業の成果

今回の実践: シンプル構成で大成功

実は、今回はDev Claude 1人で完結しました！

最初はPM、Dev、QAの3役体制を想定していましたが、Week 1の基盤がしっかりしていたため、Dev Claude単独で全タスクを完璧に実装できました。

Dev Claude（開発担当）の実績:

⏱️ 作業時間: 約15-20分
💻 成果物: 6コンポーネント、589行のコード
🎯 品質: エラーゼロ、完全動作
⚡ 効率: 見積30時間 → 実測20分（99%短縮）

驚異的な効率化の理由

1. Week 1の完璧な基盤:

TypeScript型定義 → 型エラーゼロ
ディレクトリ構造 → 迷わず配置
Tailwind設定 → すぐスタイリング
ESLint/Prettier → 自動整形

2. Claude Codeの自動化能力:

ファイル作成・編集を自動提案
依存関係を自動インストール
コード品質を自動チェック
レスポンシブ対応を自動実装

3. 「shift+tab」の威力:
全編集を自動承認することで、人間の介入が最小限に

時間比較: 驚愕の結果

TASKS.mdの見積（PM Claudeの計算）:

T101: 6時間
T102: 4時間
T103: 2時間
T104: 6時間
T105: 4時間
T106: 4時間
T107: 4時間
合計: 30時間

実測（Dev Claude単独）:

合計: 15-20分

効率化率: 99%短縮！ 🎉

サブエージェントは必要？

今回の教訓:

✅ 基盤がしっかり → Dev単独で十分
✅ 複雑なタスク → PM/QAと協業
✅ 状況に応じて柔軟に構成

Week 3以降で試したいこと:

データ管理の複雑なロジック → PM/Dev協業
テスト実装 → QA Claude活用
大規模リファクタリング → 3役フル稼働

💡 実践から学んだこと

学び1: 「基礎が99%」という真実

Week 1で作った型定義とディレクトリ構造が、Week 2の開発速度を決定しました。

Week 1の投資がすべて:

TypeScript型定義 → 型エラーゼロ
ESLint/Prettier → コード品質保証
Tailwind設定 → 即座にスタイリング
ディレクトリ構造 → 迷わず配置

建築での比率:

基礎工事: 全体の70-80%の時間
内装工事: 全体の20-30%の時間

プログラミングも同じ:

Week 1（基盤）: 19時間
Week 2（UI）: 20分 ← 基盤のおかげ！

学び2: Claude Codeは「優秀なアシスタント」

Claude Codeは魔法のツールではありません。基盤があって初めて威力を発揮します。

基盤がある場合:

✅ 自動で正しいファイルにコードを追加
✅ 適切な型を使って実装
✅ ベストプラクティスに沿ったコード

基盤がない場合:

❌ どこにファイルを作るか迷う
❌ 型エラーが頻発
❌ 一貫性のないコード

学び3: 「shift+tab」の魔法

自動承認モードを使うことで、人間は方向性だけ決めればOK。

今回の作業フロー:

プロンプトを送信 → 5秒
「2」で自動承認 → 1秒
Claudeが全タスク実装 → 15分
完成確認 → 3分

合計: 20分でWeek 2完了！

学び4: UI実装は楽しい！

Week 1は地味でしたが、Week 2は目に見えて楽しい！

Before/Afterのインパクト:

Before: 「Welcome to the note Dashboard!」だけ
After: グラフ、カード、フォームのリッチUI

視覚的な変化があると、やる気がさらに上がります！

🚀 次のステップ

Week 3で実装予定

データ管理・永続化（29時間相当）:

Zustand Store本格実装
LocalStorage管理
note_daily_log.txtからのデータ読み込み
CRUD操作の完成
エラーハンドリング強化

期待される機能:

実際のnote記事データを表示
データの追加・編集・削除
永続化による状態保持

Week 4以降の予定

品質向上・テスト（36時間）:

単体テスト実装
E2Eテスト（Playwright）
アクセシビリティ対応
パフォーマンス最適化

🔗 関連記事

今回の内容に関連する過去記事もぜひご覧ください：

関連記事: Day86: Imagine終了でも大丈夫！実践🚀Claude Codeでチーム開発 - Week 1基盤構築編では、今回の基盤となるWeek 1の実装過程を詳しく紹介しています。

関連記事: Day85: 10分で作った神アプリ、消えちゃった...→でも大丈夫！Imagine完全ワークフローでは、今回ベースにしたダッシュボードの作成過程を詳しく紹介しています。

関連記事: Day3: 【操作動画あり】VSCode×MCPでExcel作業を自動化！GPT-4、Claude、Gemini徹底比較で見えた「最強の組み合わせ」では、MCPを使った自動化について解説しています。

📝 まとめ

✅ Week 2で達成したこと

UI実装完了:

統計カード4種類
Chart.jsグラフ2種類
記事追加フォーム
人気記事カード
レスポンシブデザイン

サブエージェント協業:

PM Claude: タスク管理
Dev Claude: コード実装
QA Claude: 品質保証

実際の成果:

⏱️ 3時間で完成（従来の87%短縮）
💻 本番品質のUI
🚀 Week 3へ即移行可能

🎯 重要な発見

基礎がすべて: Week 1の投資が、Week 2の爆速開発を実現
UI実装は楽しい: 視覚的な変化があると、やる気がさらに上がる
サブエージェントは本物: チーム開発の疑似体験が可能

💪 次のアクション

今週末に挑戦:

Week 3のデータ管理実装に進む
自分のプロジェクトでUI実装

来週、さらに深掘り:

Week 4の品質向上・テスト
本番環境へのデプロイ準備

地味な基礎から、リッチなダッシュボードに大変身。

これが、Claude CodeのWeek 2 UI実装です💪

🚀 次回予告

Day88: Week 3実践！データ管理・永続化でダッシュボードに命を吹き込む

UIはできた。次は「魂」を入れます！

note_daily_log.txtから実際のデータを読み込んで、リアルな統計を表示します！
※「note_daily_log.txt」に記事投稿後、記事タイトル、URLなど記事情報をクロ助（ClaudeDesktop）に記録してもらっています。

🎨 おまけ：見出し画像作成プロンプト

今日の見出し画像のベースはチャッピー（ChatGPT）に下記プロンプトで作成してもらいました！：

柔らかな照明で撮影された超現実的でプロフェッショナルな写真を作成してください。
下記条件のnote見出し画像をサイズは横長で作成してください。サイズは必ず横長で作成してください。

## 🎨 見出し画像案

### デザインコンセプト
- **背景**: ダークブルーから明るいパープルへの美しいグラデーション
- **メインビジュアル**: Before/After比較
  - 左側: シンプルなテキストベースのUI（Week 1）
  - 右側: リッチなダッシュボードUI（Week 2）
  - 中央: 大きな変化の矢印（→）
- **テーマ**: 変化・進化・UI実装の成果
- **先進感**: モダンなダッシュボードデザイン

### テキスト要素
- 上部: 「実践！Claude Code」（白色・太字・28pt）
- 中央上: 「Week 2 UI実装」（黄色・48pt・太字）
- 中央中: 「基礎から大変身」（白色・36pt）
- 下部: 「リッチダッシュボード完成」（白色・24pt）

### 装飾
- Before: シンプルなテキスト画面（左側）
- After: グラフ、カード、アイコン満載のUI（右側）
- 変化の矢印（→）を中央に大きく配置
- キラキラ効果（✨）で進化を表現
- グラフ・チャート・カードのアイコン
- YaroTechロゴ（右下・12pt・控えめ）

### 作成手順
1. スライドサイズ（1536×1024px）
2. ダークブルー→明るいパープルのグラデーション背景
3. 左側にシンプルなテキストUI画面を配置
4. 右側にリッチなダッシュボードUI画面を配置
5. 中央に大きな変化の矢印（→）を配置
6. 「実践！Claude Code」を上部に配置
7. 「Week 2 UI実装」を中央上部に大きく配置（黄色）
8. 「基礎から大変身」を中央に配置
9. 「リッチダッシュボード完成」を下部に配置
10. 装飾要素を追加（キラキラ、グラフアイコン等）
11. YaroTechロゴを右下に控えめに配置

#YaroTech #ClaudeCode #React #TypeScript #UI実装 #ChartJS #TailwindCSS #サブエージェント #週末プロジェクト #効率化

いいなと思ったら応援しよう！

記事がお役に立てたなら嬉しいです！いただいたチップは、新しいMCPツールの検証や、より深い実践実験の資金として大切に使わせていただきます。あなたの応援が次の「AI活用の感動」を生み出す原動力になります✨ 一緒に羽ばたき続けましょう！

この記事が参加している募集

週末プロジェクト

6,081件