はじめに
システムエンジニアとして働いていますが、業務外でも継続的に勉強しています。
その中で「勉強時間をきちんと記録・分析したい」という個人的な課題があり、自分用のツールとして学習記録アプリを開発することにしました。
開発ツールとして今回初めて Claude Code を使ったところ、開発体験が大きく変わりました。
わずか約20分のユーザー対話で、プロトタイプとして動作するレベルまで実装できました。
この記事では、以下について記録します：
- Claude Code を使った実際の開発プロセス
- 以前に Google Gemini（思考モード）で開発した時との比較
- 実装中に発生した仕様変更とその対応
作ったもの
「学習記録アプリ」
- 科目選択 → タイマー開始・一時停止・再開・終了
- 日別・週別グラフで学習時間を可視化
- AI（DeepSeek）が学習パターンを分析してアドバイスを提供
- データはブラウザのローカルストレージに自動保存
- 学習内容・備考も記録可能
- AI分析結果も自動保存・履歴管理
開発プロセス：私とClaude Codeの会話
フェーズ 0: 要件定義と計画（3分）
私の説明
「勉強時間を記録するWebアプリを作りたい。タイマー機能、学習データの保存、グラフ表示、そしてAI分析機能が必要」
Claude Codeの提案
Claude Codeは計画案を提示しました：
- 🎯 プロジェクト構成（6フェーズに分割）
- ❓ 不明な点を確認（どのAI使う？ローカル保存？など）
- 📋 技術スタック案（React + Vite + Tailwind CSS）
重要な学び: Gemini の思考モード（対話で「修正して」と繰り返す）とは違い、Claude Codeは「計画を提案 → 承認待ち → 実装」という3段階で進む。これが修正ループを大幅に減少させる秘訣。
フェーズ 1: プロジェクト初期化（自動実行 30秒、観察 2分）
Claude Codeが自動実施（ユーザーは見守るだけ）：
✅ npm create vite
✅ React + TypeScript セットアップ
✅ Tailwind CSS v4 設定（エラー対応含む）
✅ ファイル構造自動生成
✅ ビルド確認
ユーザーの実際の作業: 「プロジェクト初期化してください」と言って、完了を確認する（2分）
発生した問題と自動解決
問題: Tailwind CSS v4の設定ファイル形式が古い方式だった
Error: Cannot apply unknown utility class `bg-white`
Claude Codeでの対応：エラーを検出 → 原因特定 → @tailwindcss/postcss をインストール → 自動修正
所要時間: 数十秒〜数分程度
フェーズ 2-4: コア機能実装（自動実行 5分、確認指示 2分）
実装順序（Claude Codeが自動で実施）：
- タイマー状態管理 (
useTimer.ts) - 学習セッション管理 (
useStudySessions.ts) - 統計計算 (
useStudyStats.ts) - UIコンポーネント
- ページレイアウト
各ファイルが自動生成され、ビルドエラーもリアルタイムで修正される。
ユーザーの実際の作業: 「コア機能実装してください」と言って、ビルド完了を確認する（2分）
ターニングポイント：型定義の拡張
開発途中で新しい要件が出ました：
私の指示:
「学習記録には、科目・時間だけでなく『学習内容』と『備考』も記録したい」
Claude Codeでの対応:
「型定義に content と notes を追加してください」
↓
型定義自動更新 → 関連ファイル自動更新 → ビルド確認
↓
「完了しました」（2分）
フェーズ 5: AI分析機能実装（自動実行 3分、指示・確認 2分）
初期計画：Gemini APIを使用
const client = new GoogleGenerativeAI(apiKey)
const model = client.getGenerativeModel({ model: 'gemini-2.0-flash' })
途中変更：DeepSeek APIへの切り替え
私の指示:
「APIはDeepSeekに変更します」
理由: DeepSeekはAPIコストが低く、日本語生成精度も十分であったため採用しました。学習記録分析という用途では、高度な推論能力よりも「低コスト + 十分な精度」が優先されました。
Claude Codeでの対応:
「Gemini APIをDeepSeek APIに変更してください」
↓
geminiApi.ts を deepseekApi.ts に自動変更
↓
import文も自動修正
↓
ビルド確認 → 完成
↓
（数十秒〜数分で完了）
フェーズ 6: デモ機能と自動保存（自動実行 4分、指示・確認 3分）
モックデータの自動生成
要件：「アプリ起動時に1週間分のモックデータを自動生成したい」
実装の流れ:
私：「起動時に自動でモックデータを生成し、localStorageに保存してください」
Claude Code：
1️⃣ mockData.ts を自動生成
2️⃣ 科目別に適切な学習内容を生成
3️⃣ useStudySessions.ts に初期化ロジック追加
4️⃣ ビルド確認
5️⃣ 「完了しました」
結果：すべて自動で完成（1.5分）
AI分析の自動保存
新要件：「AI分析が完了したら、自動的にlocalStorageに保存したい」
私：「分析結果をlocalStorageに保存してください」
Claude Code の対応：
✅ AiAnalysis 型を新規定義
✅ saveAiAnalysis() 関数を追加
✅ AiAdviceModal.tsx に保存ロジック追加
✅ HistoryPage.tsx に履歴表示機能追加
✅ ビルド確認
所要時間：2分で完了
Claude Code vs Google Gemini（思考モード）
実際に比較対象として、以前 Gemini で開発した同等のアプリ があります。この2つの方法での実装データです。
1. 開発時間の実際
【Gemini での開発】（Flask + Python + CSV）
実際に以前開発した簡易版勉強時間記録アプリ
├── 初回プロンプト作成 10分
├── app.py 実装 40分
├── エラー修正・調整 30分
│ └── 「このエラー修正して」×4回
│ └── 「別の方法で実装」×2回
├── HTMLテンプレート修正 20分
├── APIキー設定・テスト 10分
├── 動作確認・デバッグ 10分
└── 合計 120分（2時間）
【Claude Code での開発】（React + TypeScript + Vite）
【ユーザー実際の対話時間】
├── 要件説明 3分
├── 計画策定・確認 2分
├── コア機能指示 2分
├── 型拡張指示 2分
├── API変更指示 2分
├── デモ機能指示 2分
└── 確認・調整 5分
──────────────────────
┤ ユーザー実際の作業 18分
│
【自動実行時間（バックグラウンド）】
├── プロジェクト初期化 30秒
├── コア機能自動実装 5分
├── エラー自動修正 数十秒程度
├── AI機能実装 3分
├── デモデータ生成 1.5分
├── 全体ビルド 2分
└── 合計（見守るだけ） 12分
【総経過時間】 約30分
※ ユーザー実際の作業：約18分
※ Claude Codeが自動実行：約12分
時間短縮の実績
| 項目 | 開発時間 |
|---|---|
| Gemini | 120分（2時間） |
| Claude Code | 30分 |
| 短縮率 | 75% 削減 |
重要: Gemini での開発では修正ループが複数回発生し、最終的に2時間かかったのに対し、Claude Code は約20分の対話でプロトタイプが完成しました。
2. コード品質の実際
| 項目 | Gemini | Claude Code |
|---|---|---|
| 型安全性 | △ エラー修正必要 | ◎◎◎ 自動修正 |
| ファイル構成 | △ Flask + テンプレート | ◎◎ 階層化・最適 |
| エラーハンドリング | △ 基本的な実装 | ◎◎ 実装済み |
| テンプレート管理 | △ HTML修正が必要 | ◎◎ コンポーネント化 |
| 仕様変更への対応 | △ 複数往復必要 | ◎◎◎ 数分で対応 |
実績データ: Gemini での「エラー修正・調整（30分）」では、型エラーや日付フォーマット関連のバグ修正に複数回の往復が発生しました。
3. 仕様変更への対応力
開発中の仕様変更 3 つ（Claude Code での実装）：
① 学習記録の型拡張
要件：学習内容と備考を追加したい
Claude Code：修正時間 2分
- 型定義変更を指示
- 関連ファイル自動更新
- ビルドエラーなし
② APIの変更
要件：Gemini → DeepSeek APIに変更
Claude Code：修正時間 2分
- 既存コード理解したまま、DeepSeekに置き換え
- 型定義も自動更新
- 呼び出し側も自動修正
③ AI分析の自動保存機能追加
要件：分析結果をlocalStorageに自動保存し、履歴表示
Claude Code：修正時間 2分
- 自動生成 → 完成
重要な気づき: 仕様変更が 3 つ同時 に発生しても、Claude Code なら数分で対応できた。
4. エラー対応の速さ
実際に起きたエラー：Tailwind CSS v4 の設定
エラーメッセージ：
Cannot apply unknown utility class `bg-white`
Claude Code での対応:
ビルドエラー検出
↓
Claude Code：「Tailwind v4 の設定ですね」
↓
自動修正：@tailwindcss/postcss をインストール
↓
postcss.config.js 自動修正
↓
ビルド再実行 → 成功
↓
（時間：数十秒〜数分）
実装でハマりやすいポイント（技術的な学び）
Claude Codeで自動実装していても、以下のポイントは事前に考慮するとスムーズです：
1. localStorage の初期化タイミング
// ❌ よくある間違い
const [sessions, setSessions] = useState<StudySession[]>([])
useEffect(() => {
const saved = localStorage.getItem('sessions')
setSessions(JSON.parse(saved || '[]'))
}, []) // 初回のみ実行（保存後の更新が反映されない問題あり）
// ✅ 推奨
const [sessions, setSessions] = useState<StudySession[]>(() => {
const saved = localStorage.getItem('sessions')
return JSON.parse(saved || '[]')
})
ポイント: useState の初期化関数を使うと、不要なレンダリングが減ります。
2. useEffect の依存配列管理
// ❌ 依存配列忘れ → 無限ループ
useEffect(() => {
const analyses = getAiAnalyses()
setAiAnalyses(analyses)
}) // ← 依存配列なし = 毎レンダリング実行
// ✅ 明示的に依存配列指定
useEffect(() => {
const analyses = getAiAnalyses()
setAiAnalyses(analyses)
}, [showAiAdvice]) // showAiAdviceが変わった時だけ再実行
3. setInterval と Date.now() の組み合わせ
// ❌ カウンター方式（バックグラウンドでスロットル）
const [seconds, setSeconds] = useState(0)
setInterval(() => setSeconds(s => s + 1), 1000) // 正確度が低い
// ✅ Date.now() ベース（推奨）
const [startTime, setStartTime] = useState<Date | null>(null)
const elapsed = startTime ? Math.floor((Date.now() - startTime.getTime()) / 1000) : 0
ポイント: タイマー機能は、カウンター方式より時刻ベースの方が精度が高いです。
4. localStorage の型安全性
// ❌ any を使わない
const data: any = JSON.parse(localStorage.getItem('data') || '{}')
// ✅ 型定義してチェック
interface StudySession {
id: string
subject: string
durationSeconds: number
}
const data: StudySession[] = JSON.parse(localStorage.getItem('data') || '[]')
ポイント: 型定義があると、ビルド時にエラーを検出でき、バグが減ります。
こういう時は何を使う？
🟢 Claude Code向き
- ✅ 「本格的なアプリを作りたい」
- ✅ 「複数ファイル、複雑なロジック」
- ✅ 「デバッグなしで動かしたい」
- ✅ 「プロトタイプを素早く作る」
- ✅ 「既存プロジェクトに機能追加」
- ✅ 「開発途中で仕様が変わる」（特にこれ！）
🟡 Gemini向き
- △ 「簡単なコードスニペット欲しい」
- △ 「ライブラリの使い方知りたい」
- △ 「エラーメッセージの意味を説明してほしい」
- △ 「学習・理解目的でコードを作る」
- △ 「対話型での開発経験を積みたい」
実績: Flask + Python でのバックエンド開発では2時間かかりましたが、対話型の開発フローには向いていました。ただし修正ループが複数回発生
コスト比較：Claude Pro vs Google Gemini（思考モード）
開発に使用したコストを整理しました：
今回の開発にかかった実際のコスト
【Claude Pro による開発】
- モデル : Claude Haiku 4.5
- 使用形式 : Claude Pro 月額料金
- 月額コスト : ¥3,400
- 推定Token使用量 : 約 80,000 tokens程度
（アプリ実装 + 記事執筆含む）
- 開発時間 : 約20分のユーザー対話
- 総コスト : 月額 ¥3,400（月10～20プロジェクト分の開発可能）
【Gemini による開発の場合】（簡易版勉強時間記録アプリ）
- 使用形式 : Google Gemini Web（gemini.google.com/app）※ブラウザ上の対話形式
- 開発時間 : 2時間（修正ループ複数回含む）
- 修正リクエスト : 「エラー修正して」×4回、「別の方法で」×2回
- 総開発コスト : 約 ¥0（Webサービス、無料枠利用）
- Flask + Python で実装、CSV保存機能
- ※ アプリのAI分析機能には google-generativeai を使用（開発ツールとしてではなく、アプリ機能として）
コスト効率の比較
| 項目 | Claude Code | Gemini |
|---|---|---|
| 1プロジェクトのコスト（概算） | ¥100～¥500 | ¥300～¥500 |
| 開発時間 | 30分 | 2時間 |
| 修正サイクル | ほぼなし | 複数往復あり |
| 品質 | ◎◎ | ◎ |
備考:
- コスト計算はあくまで概算です。実際の token 使用量、プロンプト品質で大きく変動します
- Claude Pro（月¥3,400）で複数プロジェクト開発可能と想定
- Google Gemini Web は対話形式のWebサービスです（無料枠あり）。アプリ内のAI分析機能には別途 API を利用
実感した違い
Gemini での開発の特徴（実体験）
- コードは提示されるが、ファイルへの適用はユーザーが手動で行う
- エラーが出ると「修正して」のループが発生する
- 今回の比較対象では修正リクエストが6回（エラー修正×4、別方法×2）発生した
- コピペ・テスト・再修正の繰り返しが必要で、合計2時間かかった
「対話型のコード提供」であり、実装の主体はあくまでユーザー側にある
Claude Code での開発の特徴
- エラー検出 → 該当ファイルの自動修正 → ビルド確認 まで自動
- 仕様変更3回を、それぞれ2分以内で対応
- ユーザーは要件を指示するだけで、修正・確認作業は不要
「実装の主体がAIに移った」ことを実感した
開発体験の変化
Gemini での開発では、「AIがコード提示 → エンジニアが修正」というループが発生していました。
Claude Code はそこを大きく改善している：
Gemini での開発：
AIがコード提示
→ エンジニアが修正する（手作業・複数回）
→ テストして確認
→ エラーが出たら→また修正
→ 総2時間
Claude Code での開発：
エンジニアが要件を指示
→ AIがコード実装・自動修正
→ 自動ビルド・テスト
→ 完成
→ 総30分
エンジニアの仕事が「コード修正」から「何を作るか指示する」へシフト する可能性が見えています。
他のClaude Code事例から学んだこと
Qiita の他のClaude Code記事を参照すると、さらに高度な実践が見えてきました：
仕様駆動開発（notefolderさんの記事）
従来：「作って」→ コード生成 → エラー修正 ループ
仕様駆動：「要件定義書」を作成 → Claude Code に渡す
→ 設計書も自動生成（Mermaid図含む）
→ コード生成
→ ビルド確認で完了
時間：約40～60分で動作するアプリが完成
ドキュメント戦略（tomadaさんの記事）
開発前に「CLAUDE.md」という司令塔ファイルを用意
→ Claude Code がそれを参照
→ 一貫性のある実装
ドキュメント項目：24個
- 技術設計（15個）
- デザインシステム（5個）
- ライブラリ対策（4個）
結果：拡張・保守が楽になる
UI/UX重視の開発（chatrateさんの記事）
コード実装よりもUI改善に時間を使う
→ 「親指フレンドリー」な設計
→ ユーザビリティ優先
リリース後も改善サイクルを回す
→ 33ダウンロード達成
次のステップ
このアプリは以下への拡張を考えています：
- 📱 モバイル版 — スマートフォンで常に記録できるように
- ☁️ クラウド同期 — 複数デバイス間でデータ同期（Supabase）
- 🎯 グループ機能 — 友人と学習進捗を競う
これらも、Claude Code なら 数時間で実装できそう な気がします。
この記事も Claude Code と一緒に作られました
重要な補足: この記事自体も、アプリ開発と 全く同じフローで Claude Code の支援を受けながら作成 されました。
記事執筆の流れ
開発中（アプリ実装と並行）：
├─ 私：「開発プロセスを記事に整理してください」
├─ Claude Code：「こういう構成で記事を作成します」と提案
├─ 私：「いいですね」と承認
└─ 自動生成：記事の骨組み → セクション作成 → 内容充実
さらに：
├─ 私：「Gemini との比較を追加してください」
├─ Claude Code：比較表やフローチャートを自動生成
├─ 私：「Qiita の他記事も参照して改善点を教えてください」
├─ Claude Code：参考記事を検索 → 記事に反映
└─ 数回の修正・改善を経て完成
メリット
- ✅ 記事と実装が一貫性を保つ — 会話履歴そのものが記事になるので、齟齬がない
- ✅ 開発ストーリーがリアル — 「〇〇という課題が出た → Claude Codeがこう対応した」という実体験が反映される
- ✅ 記事執筆時間も短い — 開発と並行するので、別途「記事書き」の時間が不要
- ✅ 修正が楽 — 「この部分をもっと詳しく」→ 自動生成 → 完成
以下のように修正すると、背景の明確化とモデル差分の説明が整理されます。
Claude Pro の制限事項
重要な注記: Claude Pro では Claude Code で Opus / Sonnet / Haiku が利用可能です。
ただし本記事の開発では、初回利用時の設定ミスにより一時的に Haiku のみ使用可能な状態となり、そのままアプリ開発を実施しました。
モデルの違い（概要）
| モデル | 特徴 | 向いている用途 |
|---|---|---|
| Haiku | 高速・軽量、コスト効率が高いが推論力は控えめ | シンプルな実装、反復作業、小規模開発 |
| Sonnet | バランス型、精度と速度の両立 | 記事作成、設計、一般的な開発タスク |
| Opus | 高精度・高推論力、複雑処理に強い | 高度な設計、複雑ロジック、分析 |
今回の制約と影響
-
✅ 簡単なアプリ開発には影響なし
小～中規模のフロントエンド開発であれば、Haiku でも十分対応可能 -
△ 記事作成にはやや不利
高度な分析や複雑なリライトでは Sonnet / Opus の方が効率的 -
△ 複雑なロジックやバックエンド開発
推論力が必要な場面では制約を感じる可能性あり -
⚠️ 開発は実質 Haiku のみで実施
設定ミスにより途中で Sonnet へ切り替えできず、
最終的な記事の仕上げのみ Sonnet を使用
補足
今回の記事は、Haiku の制約下でも
「対話による段階的な改善」 を繰り返すことで実装・執筆が可能でした。
つまり本記事は、Claude Code の実用性と生産性を示す一例です。
アプリ開発だけでなく、技術記事の執筆においても Claude Code は有効に活用できます。
まとめ
Claude Code を使うと、わずか約20分の会話で、従来のAI開発手法の数倍高速にプロトタイプを実装できる
修正ループが少なく、エラー修正が自動化され、中途での仕様変更に素早く対応できる
エンジニアの仕事は「コードを書く」から「何を作るかを考える」へシフトする
これが僕の結論です。
ただし、以下の点は重要です：
- ✅ 小規模アプリ（フロント中心）であることが前提
- ✅ 要件が明確であること
- ✅ 大規模プロジェクトやチーム開発では結果が異なる可能性
特にSIER業界のように「納期が短い」「試作が多い」「仕様変更が頻繁」という環境では、Claude Code は有力な選択肢になります。
次のプロジェクトからは、Claude Code を試してみる価値があると思います。
最後に
Claude Code と Gemini—どちらを選ぶかは、プロジェクトの性質や目的によって異なります。
- 🚀 プロトタイプを素早く作りたい → Claude Code（30分で完成）
- 🤔 学習しながら開発したい → Gemini（2時間かかるが、対話的）
ただし、「本気でアプリを作りたい」「仕様が変わる可能性がある」「品質を保ちたい」「開発時間を短縮したい」なら、Claude Code を試す価値は十分にあります。
参考記事
注記: 本記事は個人の見解であり、所属企業とは関係ありません。小規模フロントエンドアプリ・個人開発での検証結果です。大規模プロジェクトやチーム開発では結果が異なる場合があります。
この記事を執筆する際に参考にさせていただいた、他のClaude Code実践記事です：
仕様駆動開発の実践
コードが読めなくてもAIで品質の高いソフトウェアが作れる：仕様駆動開発【Claude Code実践例】
- 著者: notfolder さん
- 学んだ点: 要件定義書 → 設計書自動生成 → コード実装という3段階プロセスの有効性、レビュー対象の最適化
ドキュメント戦略とプロジェクト管理
【Claude Code】マネできる！個人開発するときに最初に用意したドキュメント24種と機能要件書を全公開
- 著者: tomada さん
- 学んだ点: 開発前の「CLAUDE.md」という司令塔ファイルの重要性、24個のドキュメント戦略
実装と試行錯誤のバランス
iOSアプリ開発未経験者がClaudeCodeを使って1週間でリリースしたお話
- 著者: chatrate さん
- 学んだ点: UI/UX改善に時間を使うこと、デフォルト値の落とし穴、リリース後の改善サイクルの重要性
その他の参考資料
- Claude Codeで始めるVue開発入門 — AIと一緒に爆速でWebアプリを作る方法 - Vue.jsでのアプローチ
- 非エンジニアがClaude Codeを使って1ヶ月でできたこと - 非エンジニアの視点
- Claude Codeと5日間で同人イベント検索iOSアプリを開発した話 - 短期集中開発
- Claude CodeとExpoによるとにかくライトなアプリ開発フローを試した話 - ライト開発フロー
記事作成: 2026年3月31日
開発環境（今回）: Claude Code + Vite + React + TypeScript + Tailwind CSS + DeepSeek API
使用モデル: Claude Pro（Haiku 4.5） — ユーザー対話約20分 / 自動実行含む総経過約30分
比較対象: Google Gemini Web + Flask + Python — 簡易版勉強時間記録アプリ（約2時間）
結果: Claude Code は Gemini 対比 75% の時間削減を実現
本アプリの一部スクリーンショットを添付します。
同様の環境でAI開発ツールの選択に悩んでいる方の参考になれば幸いです。
