Mar 18, 2026 by ToolCraft Lab 約19分で読めます

Claude Codeだけで個人開発してみた — AI駆動開発のリアル【2026年体験記】

Claude Codeだけを使って個人開発プロジェクトを完成させた体験記。企画からデプロイまでの全工程をAI駆動で進めた結果、開発時間・品質・学びをリアルに報告します。

#Claude Code#個人開発#AI駆動開発#体験記

はじめに — なぜClaude Codeだけで作ろうと思ったか

「Claude Codeだけで、ゼロからプロダクトを完成させたらどうなるか？」

ふとそう思ったのは、2026年2月末のことだった。普段の業務ではCursorやGitHub Copilotも併用しているが、Claude Codeをターミナルで使うたびに「これ一本でもいけるのでは」と感じる場面が増えていた。ファイルの横断検索、git操作、テスト実行まですべてがターミナル内で完結する。エディタを開かずに開発が成立するなら、それはもう別次元の体験だ。

そこで3月上旬、10日間の検証として「Claude Codeだけで個人開発プロジェクトを1つ完成させる」というチャレンジを始めた。エディタは一切開かない。ブラウザで調べ物をする以外、すべてのコーディング作業をClaude Codeに任せる。

この記事は、その10日間の記録だ。企画、設計、実装、テスト、デプロイまで。AI駆動開発のリアルを包み隠さず書く。

Claude Codeの基本的な使い方はClaude Codeの使い方完全ガイドにまとめてあるので、初めて触る方はそちらも参照してほしい。

作ったもの — URLショートナー with アクセス解析

今回作ったのは、URLショートナー with アクセス解析ダッシュボードだ。

名前は「ShortLens」とした。短縮URLを生成し、クリック数・リファラー・地域・デバイス情報をリアルタイムで可視化できるWebツールだ。

主な機能は以下の通り。

短縮URL生成: 長いURLを入力すると、sho.rt/abc123 のような短縮リンクを発行
アクセス解析ダッシュボード: クリック数の推移、リファラー元、アクセス元の国・デバイス情報をグラフで表示
カスタムスラッグ: 好きな文字列で短縮URLを作成可能
QRコード生成: 短縮URLに対応するQRコードを自動生成
認証: Googleログインによるユーザー管理

なぜURLショートナーを選んだか。理由は、CRUD操作、認証、リアルタイムデータ処理、ダッシュボードUIと、Webアプリの基本要素が一通り含まれているからだ。Claude Codeの実力を測るにはちょうどいいサイズ感だった。

技術スタック — Claude Codeが提案した構成

面白いのは、技術スタックの選定自体をClaude Codeに相談したことだ。

プロジェクトディレクトリを作成して、最初にこう聞いた。

claude "URLショートナー with アクセス解析を個人開発したい。
要件: 認証あり、リアルタイムダッシュボード、無料枠でデプロイ可能。
技術スタックを提案してくれ。理由も含めて。"

Claude Codeは以下の構成を提案してきた。

レイヤー	技術	選定理由
フロントエンド	Next.js 15 (App Router)	SSR/SSG対応、API Routesで統合
バックエンド	Next.js API Routes	フロントと同一リポジトリで管理
データベース	Supabase (PostgreSQL)	無料枠が充実、リアルタイム機能あり
認証	Supabase Auth	Google OAuth設定が容易
デプロイ	Vercel	Next.jsとの相性、無料枠
グラフ描画	Recharts	軽量で柔軟
スタイリング	Tailwind CSS	ユーティリティファーストで高速開発

正直、自分で選んでもほぼ同じ構成になったと思う。ただ、選定理由が明確に言語化されていたのが良かった。「なんとなくNext.js」ではなく、「API RoutesでバックエンドをフロントエンドのリポジトリにまとめたいからNext.js」という具体的な理由があると、後から振り返ったときに判断の根拠が残る。

開発の実際 — 10日間のタイムライン

Day 1-3: 企画・設計フェーズ

Day 1 — プロジェクト初期化とCLAUDE.md

最初にやったのは、CLAUDE.mdの作成だ。これはClaude Codeがプロジェクトのコンテキストを理解するためのファイルで、開発の方針・技術スタック・コーディング規約を記載しておく。

claude "このプロジェクト用のCLAUDE.mdを作成してくれ。
プロジェクト名: ShortLens
技術: Next.js 15, Supabase, Tailwind CSS, Recharts
コーディング規約: TypeScript strict, ESLint flat config, Prettier
テスト: Vitest + Testing Library"

Claude CodeはCLAUDE.mdを生成し、さらにプロジェクトの初期化まで一気に行った。

# Claude Codeが実行した一連のコマンド
npx create-next-app@latest shortlens --typescript --tailwind --app --src-dir
cd shortlens
npm install @supabase/supabase-js recharts qrcode.react
npm install -D vitest @testing-library/react @testing-library/jest-dom

驚いたのは、.env.exampleも自動で生成してくれたことだ。NEXT_PUBLIC_SUPABASE_URLやNEXT_PUBLIC_SUPABASE_ANON_KEYといった環境変数のテンプレートが、適切なコメント付きで用意されていた。

Day 2 — データベース設計

Supabaseのテーブル設計もClaude Codeに依頼した。

claude "ShortLensのデータベーススキーマを設計してくれ。
テーブル: urls(短縮URL管理), clicks(クリックログ), users(Supabase Authと連携)
RLS(Row Level Security)ポリシーも含めて、SQLマイグレーションファイルとして出力してくれ。"

生成されたSQLは、RLSポリシーまできちんと含まれていた。urlsテーブルには作成者のみが編集・削除できるポリシーが、clicksテーブルにはURLの所有者のみがログを閲覧できるポリシーが設定されていた。

ただし、1点修正が必要だった。clicksテーブルのcountryカラムがVARCHAR(2)で定義されていたが、一部のIPジオロケーションAPIは国名をフルネームで返すケースがある。Claude Codeに「VARCHAR(100)に変更して」と伝えたら即座に修正された。

Day 3 — API設計とルーティング

API Routesの設計では、エンドポイント一覧をClaude Codeと対話しながら決めた。

claude "以下のAPIエンドポイントを設計して、各ルートファイルのスケルトンを生成してくれ。
- POST /api/urls — 短縮URL作成
- GET /api/urls — ユーザーのURL一覧
- GET /api/urls/[id]/stats — アクセス統計
- GET /r/[slug] — リダイレクト処理（クリックログも記録）
- DELETE /api/urls/[id] — URL削除"

5つのAPIルートファイルが一度に生成された。スケルトンとはいえ、バリデーション、エラーハンドリング、型定義まで含まれていたので、ほぼそのまま使えた。

Day 4-7: 実装フェーズ

Day 4 — 認証とURL作成機能

認証周りはSupabase Authを使ったが、設定自体はSupabaseのダッシュボードで行う必要がある。Claude Codeができるのは、フロントエンド側の認証フック・プロバイダーの実装だ。

claude "Supabase Authを使ったGoogle OAuth認証を実装してくれ。
- AuthProviderコンポーネント
- useAuthカスタムフック
- ログイン/ログアウトボタンコンポーネント
- ミドルウェアによる認証チェック"

ここでClaude Codeのファイル横断編集が光った。認証プロバイダーをlayout.tsxに組み込み、ミドルウェアファイルを作成し、ダッシュボードページに認証ガードを設定する。これら3ファイルの変更が一貫性を保った状態で提示された。

URL作成機能の実装も同日に完了。フォーム、APIハンドラ、データベース操作のすべてをClaude Codeが書いた。自分がやったのは、生成されたコードを読んで承認するか修正を指示するかの判断だけだ。

Day 5-6 — ダッシュボードとグラフ

最も時間がかかったのがダッシュボードだ。Rechartsを使ったグラフコンポーネントは、「クリック数の日次推移を折れ線グラフで」「リファラー元をパイチャートで」といった指示で生成できた。

claude "ダッシュボードにアクセス解析グラフを追加してくれ。
1. 過去30日間のクリック数推移（折れ線グラフ）
2. リファラー別の内訳（パイチャート）
3. デバイス別の内訳（横棒グラフ）
4. 国別アクセスマップ（テーブルでOK）
すべてRechartsを使い、レスポンシブ対応にすること。"

ただし、初回の生成ではグラフのレスポンシブ対応が不完全だった。ResponsiveContainerのwidthが固定値になっていた。これはClaude Codeに「モバイルで表示が崩れる。ResponsiveContainerのwidth/heightを%指定に変更して」と伝えて修正した。

Day 7 — リダイレクト処理とクリックログ

短縮URLにアクセスしたときのリダイレクト処理では、クリックのメタデータ（IP、User-Agent、Referer）を非同期でログに記録する必要がある。リダイレクトのレスポンス速度に影響を与えないよう、ログ記録はwaitUntilパターンで非同期化した。

この設計判断はClaude Code側から提案された。「リダイレクトとログ記録を同期的に行うとレスポンスタイムが悪化するため、VercelのwaitUntilを使って非同期化することを推奨します」と。こうした実務的な設計判断をAIから受け取れるのは、Claude Codeの大きな強みだ。

Day 8-10: テスト・デプロイフェーズ

Day 8 — テスト作成

テストコードの生成はClaude Codeが最も得意とする領域のひとつだ。

claude "ShortLensの全APIルートに対してVitestのユニットテストを書いてくれ。
- 正常系・異常系をカバー
- Supabaseクライアントはモック化
- エッジケース（重複スラッグ、不正URL、未認証アクセス）も含める"

15個のテストケースが生成された。カバレッジは87%。特に感心したのは、エッジケースの網羅性だ。「すでに使われているスラッグで短縮URLを作成しようとした場合」「URLの形式が不正な場合」「認証トークンが期限切れの場合」など、自分が指示しなかったケースまで含まれていた。

Day 9 — バグ修正とリファクタリング

テストを実行して見つかったバグは3件。すべてClaude Codeに修正を依頼した。

claude "vitestの実行結果を確認して、失敗しているテストを修正してくれ。
テストの修正ではなく、実装側のバグを修正すること。"

Claude Codeはテストのエラーメッセージを読み取り、実装コードの問題箇所を特定して修正した。1つはnullチェックの漏れ、1つは型の不一致、1つはRLSポリシーとの整合性だった。

その後、プロジェクト全体のリファクタリングも依頼した。

claude "プロジェクト全体をレビューして、以下の観点でリファクタしてくれ。
- 重複コードの共通関数化
- 型定義の一元管理
- エラーハンドリングの統一
- 不要なimportの削除"

7ファイルにまたがる変更が提示された。特に、APIルートごとにバラバラだったエラーレスポンスの形式が、共通のヘルパー関数に統一されたのは嬉しかった。

Day 10 — Vercelへのデプロイ

最終日はデプロイだ。VercelへのデプロイはCLI経由で行った。

claude "Vercelにデプロイするための準備をしてくれ。
- vercel.jsonの設定
- 環境変数のリスト
- ビルドが通ることの確認"

ビルドエラーが1件発生した。next.config.tsのリダイレクト設定にタイポがあり、Claude Codeがすぐに修正。その後のデプロイは問題なく完了した。

良かった点 — Claude Codeの強み

1. ファイル横断のリファクタリングが自然

最大の強みはこれだ。型定義の変更が複数ファイルに波及するとき、Claude Codeはすべての影響範囲を把握した上で一括で変更を提示する。人間がファイルを1つずつ開いて修正するのとは次元が違う。

2. git操作の自然言語インターフェース

コミットメッセージの作成、ブランチ操作、差分確認がすべて自然言語で完結する。

claude "今日の変更をfeatureブランチにコミットして。
メッセージは変更内容を要約して作ってくれ。"

コミットメッセージの品質も高い。変更内容を的確に要約した、conventional commits形式のメッセージが自動生成された。

3. CLAUDE.mdによるコンテキスト管理

プロジェクト固有のルール（コーディング規約、ディレクトリ構成、使用ライブラリ）をCLAUDE.mdに書いておけば、セッションを跨いでも一貫した対応をしてくれる。これはCursorの.cursorrulesに相当する機能で、プロジェクトの「記憶」として機能する。

4. 設計判断まで含めた提案

単にコードを生成するだけでなく、「なぜそうするか」の理由まで提示される。先述のwaitUntilパターンの提案がまさにそうだ。ジュニアエンジニアなら見落としそうな実務的な設計判断が、AIから自然に出てくる。

つまずいた点 — 正直に書く

1. コンテキストウィンドウの上限

Day 6あたりで、1回のセッションに詰め込みすぎてコンテキストの上限に近づいた。レスポンスの質が目に見えて落ち、同じ修正を何度も提案されるようになった。

解決策: セッションをこまめに区切り、タスクごとに新しいセッションを開始する。CLAUDE.mdにプロジェクトの状態を書いておけば、新しいセッションでも文脈を失わない。

2. 大きなファイルの扱い

200行を超えるコンポーネントファイルでは、Claude Codeの編集精度がやや落ちた。意図しない箇所が変更されたり、インデントが崩れたりすることがあった。

解決策: ファイルをあらかじめ適切な粒度に分割しておく。コンポーネントは100行以内を目安にする。これは人間の開発でもベストプラクティスなので、AIが教えてくれたとも言える。

3. UIの微調整はエディタが欲しくなる

ピクセル単位のレイアウト調整は、ターミナル上のテキストだけでは限界がある。ブラウザのDevToolsで確認しながら「padding-topを4pxから8pxに変えて」と伝えるワークフローは、正直もどかしかった。

解決策: UI調整だけはCursorやVS Codeを併用するのが現実的だ。Claude Codeは設計・ロジック・テストに集中させ、見た目の微調整はGUIエディタに任せる。

4. サブエージェントの活用で解決した問題

Day 9のリファクタリングでは、Claude Codeのサブエージェント機能（/agents経由のタスク分割）が有効だった。「セキュリティレビュー」「パフォーマンス最適化」「型チェック」を並列で実行し、それぞれの結果を統合できた。複雑なタスクを1回の指示で完結させようとすると品質が落ちるが、分割すれば精度が上がる。

定量データ — 10日間の記録

開発時間

項目	従来の個人開発（推定）	Claude Code駆動	短縮率
企画・設計	3日	2日	33%
実装	7日	4日	43%
テスト	3日	1.5日	50%
デプロイ・修正	2日	1.5日	25%
合計	15日	9日（実質10日）	40%

従来の個人開発と比較して、約40%の時間短縮を達成した。特にテスト作成の効率化が大きい。テストコードの生成はAIが最も得意とする領域であり、50%の短縮は体感とも一致する。

コミットとコード量

総コミット数: 47
AIが直接生成・編集したファイル: 全体の約85%
人間が手動修正したファイル: 全体の約15%（主にUI微調整と環境変数設定）
最終的なコード行数: 約3,200行（TypeScript）
テストカバレッジ: 87%

「AIによるコード比率85%」と聞くと不安に感じるかもしれない。だが重要なのは、すべてのコードを人間がレビューし、承認しているという点だ。AIは書く。人間はレビューする。この役割分担が成立するなら、「誰が書いたか」は問題にならない。

Cursor・Copilotとの使い分け

Claude Codeだけで開発できたとはいえ、すべてのシーンでClaude Codeが最適とは限らない。普段の開発で使い分けている3つのツールを比較する。

観点	Claude Code	Cursor	GitHub Copilot
操作環境	ターミナル	専用エディタ（VS Code系）	VS Code / JetBrains
得意領域	設計・リファクタ・git操作	ファイル横断編集・UI実装	インライン補完・定型コード
コンテキスト理解	プロジェクト全体	プロジェクト全体	開いているファイル中心
学習コスト	中（ターミナル慣れが必要）	低（VS Code経験者なら即戦力）	低（既存エディタに統合）
料金	Claude Pro $20/月	Cursor Pro $20/月	Copilot Business $19/月
最大の強み	思考パートナーとして対話できる	マルチファイル編集のUI	補完速度と精度
弱点	UI微調整がもどかしい	ターミナル操作は別途必要	大きなリファクタは苦手

私の使い分けはこうだ。

企画・設計・アーキテクチャ決定 → Claude Code（対話しながら設計を詰められる）
実装・UIの作り込み → Cursor（GUIでの編集が快適）
日常のコーディング（小さな修正・追加） → GitHub Copilot（タブキーだけで完結）
テスト・リファクタ・デバッグ → Claude Code（ファイル横断の分析が強い）
git操作・CI/CD設定 → Claude Code（ターミナルネイティブの強み）

各ツールの詳細な使い方はCursorの使い方完全ガイドとClaude Codeの使い方完全ガイドを参照してほしい。

まとめ — Claude Codeは「考えるパートナー」

10日間、Claude Codeだけで個人開発をしてみて、最も強く感じたのは「コードを書くツール」ではなく「考えるパートナー」だということだ。

CopilotやCursorが「書く速度」を上げるツールだとすれば、Claude Codeは「考える速度」を上げるツールだ。技術スタックの選定理由を言語化してくれる。設計判断の根拠を示してくれる。「なぜこのパターンを使うべきか」を対話の中で教えてくれる。

もちろん、万能ではない。UIの微調整にはGUIエディタが必要だし、コンテキストウィンドウの制約はある。だがそれらは運用でカバーできる範囲の問題だ。

こんな人にClaude Codeをおすすめする

個人開発で「壁打ち相手」が欲しい人 — 設計の相談相手としてのAIは想像以上に有能
ターミナル操作に慣れているエンジニア — SSH先やCI環境でも同じワークフローが使える
テスト・リファクタリングに時間を取られている人 — 最も効率化の恩恵が大きい領域
複数ファイルにまたがる変更が多い人 — Claude Codeのファイル横断理解力は本物