Claude CodeでWeb Appを作る方法をお探しですね。
広告
Claude Codeだけで本当にアプリが作れるのか？実際に試してみた結果
最近、エンジニア界隈で「Claude Code」というツールがめちゃくちゃ話題になっています。
これまでのAIコーディングツールとは全然違って、ターミナル上で勝手にファイルを作ったりコマンドを実行したりして、まるで優秀な後輩エンジニアが隣で手を動かしてくれているような感覚で開発が進むんです。
でも、気になるのは「本当にAIだけでちゃんとしたアプリが完成するの？」「途中で結局自分で直さないといけなくて、かえって時間かかるんじゃないの？」ってところですよね。
そこで今回、実際にClaude Codeだけを使ってReact/Next.jsのアプリをゼロから作ってみました。
どんな手順で進んだのか、何時間かかったのか、お金はいくらかかったのか、すべて包み隠さずお伝えします。
Claude Codeって何？CursorやCopilotとどう違うの？
Claude Codeは、Anthropic社が作った高性能AI「Claude」をベースにした開発ツールです。
ターミナル（黒い画面のやつ）で動きます。
GitHub CopilotやCursorみたいな既存のAIツールは、エディタの中でコードを補完してくれたり、チャットで質問に答えてくれたりするのがメインですよね。
でもClaude Codeは、**エンジニアの代わりに実際に手を動かしてくれる**んです。
具体的には、自然な日本語で「こういう機能作って」って頼むだけで、ファイルを作ったり編集したり、コマンドを実行したり、エラーが出たら自分で調べて直したり、Gitでバージョン管理したりまで、全部やってくれます。
つまり、私たちは細かいコードを書く作業から解放されて、もっと大事な設計とか要件整理に集中できるようになるわけです。
一番すごいのは、その「自分で考えて動く力」と「状況を理解する力」です。
普通、新しい機能を追加するときって、いくつものファイルを修正して、関連するところも直して、テストして…って面倒ですよね。
Claude Codeはプロジェクト全体を読み込んで、どのファイルをどう直せばいいか自分で判断してくれます。
しかも、コマンドを実行してエラーが出たら、そのエラーメッセージを読んで原因を推測して、修正案を出して、さらに実際に修正までやってくれるんです。
この「やってみる→確認する→直す」のループをAI側で回してくれるのが、今までのチャットボット型AIとは全然違うところ。
ターミナルを開きっぱなしにして、チャット感覚で指示を出し続けるだけで開発が進んでいくので、体験としては「コードを書く」というより「部下に指示を出す」感じに近いですね。
もちろん、リスクもあります。
指示があいまいだと変な実装になっちゃうこともあるし、大規模な作り直しを任せると思わぬバグが混入することも。
でも、ちゃんとした指示を出せば、初期構築とか定型的な機能を作るときは驚くほど速いです。
特にReactやNext.jsみたいな、ファイルがたくさんになりがちなモダンなフロントエンド開発では、お決まりのファイル作成とかコンポーネント分割みたいな作業をAIに任せることで、開発効率が劇的に上がります。
【実録】React/Next.jsアプリが完成するまで
今回は検証として、「タスク管理アプリ（Todoアプリ）」を作ってみました。
技術スタックは、Next.js（App Router）、TypeScript、Tailwind CSSという、今どきのWeb開発では定番の組み合わせです。
ルールとして、**私は一切コードエディタを開かない**ことにしました。
すべての操作をターミナル上のClaude Codeへの指示だけで完結させます。
プロジェクト立ち上げ
まず最初に「Next.jsの最新版で、TypeScriptとTailwind CSSを含むプロジェクトを作って」と伝えました。
すると、Claude Codeは即座に `npx create-next-app` コマンドを実行して、セットアップの質問にも適切な答えを選んで進めてくれました。
ここで驚いたのは、**私がコマンドを一切打ってない**ってこと。
AIが自分でコマンドを作って、「これ実行していい？」って聞いてくるので、私はEnterキーを押して承認するだけ。
環境構築が終わると、ディレクトリ構造を確認して、主要なファイルの中身をチェックする動きが見られました。
まるで新しいプロジェクトに参加した人がキャッチアップしてる感じで、すごく頼もしかったです。
機能実装スタート
次に、具体的な機能を作ってもらいました。
「タスクの追加、編集、削除ができるシンプルなUIを作って。
データはとりあえずローカルストレージに保存する形で」と指示。
すると、Claude Codeは `components` フォルダを作って、その中に `TodoList.tsx`、`TodoItem.tsx`、`TodoInput.tsx` といったコンポーネントファイルを次々に生成。
さらに `page.tsx` を修正してこれらを読み込む処理まで、一気にやってくれました。
ここで感動したのが、**デザインの品質**です。
Tailwind CSSのクラスを上手に使って、最初からモダンで見やすいUIになってました。
普通だとロジックを書いた後にCSSを調整する手間があるんですが、AIは最初から「完成形のイメージ」を持ってコードを書いてくれるので、手戻りがめちゃくちゃ少ないんです。
エラー発生からの自動修正
もちろん、すべてが順調だったわけじゃありません。
途中でTypeScriptの型エラーが出て、ビルドが通らなくなりました。
でも、ここからがClaude Codeのすごいところ。
エラーログが出ると、AIは即座に「型 ‘string’ を型 ‘number’ に割り当てられないってエラーが出てます。
インターフェース定義を修正しますね」って宣言して、該当ファイルを自動で直してくれました。
**私が原因を調べる前に修正完了してたんです。
**
こういう小さなエラー解決をAIが肩代わりしてくれることで、思考が中断されず、集中したまま開発を続けられました。
最終的には、データの永続化やフィルタリング機能の追加まで完了して、ちゃんと動くアプリとして完成しました。
実際にかかった時間とお金はどれくらい？
一番気になる「時間」と「コスト」について、具体的な数字をお伝えします。
結論から言うと、プロジェクトの立ち上げから基本的なCRUD機能（作成・読み取り・更新・削除）が動くまでにかかった時間は、**わずか45分**でした。
普通、同じ規模のアプリを手動で作ろうとすると、環境構築、コンポーネント設計、コーディング、スタイリング、デバッグを含めて、慣れてる人でも2〜3時間はかかります。
それが1時間未満になったのは、圧倒的な生産性向上ですよね。
特に、お決まりのコードを書いたり、CSSのクラス名を考えたりみたいな「考える必要はあるけど創造的じゃない作業」がゼロになったのが、時短の大きな理由です。
コストは？
一方で、お金の話もしておきましょう。
Claude Codeを使うには、AnthropicのAPI利用料がかかります。
今回の45分間の開発で使ったトークン量を日本円に換算すると、だいたい**300円〜500円くらい**でした。
これを高いと見るか安いと見るかは人それぞれですが、エンジニアの時給を考えたら、数時間の作業を数百円で圧縮できたわけなので、コスパはめちゃくちゃ良いと思います。
ただし注意が必要なのは、AIに「大規模なリファクタリング」とか「プロジェクト全体のコード読み込み」を頻繁に指示した場合です。
読み込むコンテキスト量が増えれば増えるほどトークン消費量も増えるので、無計画に使い続けると思わぬ高額請求につながる可能性もあります。
「速さ」の質について
45分で完成したとはいえ、生成されたコードはあくまで「動くもの」であって、長期的な保守性とか複雑なケースへの対応が完璧とは限りません。
実際、生成されたコードの一部には、もっと良い書き方があるなって部分もありました。
プロトタイピングとかハッカソン、個人開発の初期段階では最強のツールですが、ちゃんとした品質が求められる本番環境では、人間によるコードレビューとか、LintやTestによる自動チェックを併用することが必須です。
完全に「楽できる」というより、「面倒な下準備を爆速で終わらせて、人間はもっと高度な判断に時間を使えるようになった」って捉えるのが正確ですね。
Claude Codeを使いこなすためのコツと注意点
Claude Codeを単なる便利ツールで終わらせず、開発パートナーとして最大限に活用するには、いくつかコツがあります。
具体的で段階的な指示を出す
一番大事なのは、**具体的で段階的な指示出し**です。
AIは優秀ですが、テレパシーは使えません。
「いい感じのアプリ作って」みたいな抽象的な指示だと、期待と違うものができるだけじゃなく、修正のために余計な時間とお金を使うことになります。
「まずはヘッダーコンポーネントを作って」「次にTodoリストの表示機能を実装して」みたいに、タスクを小さな単位に分けて依頼することで、AIの迷走を防いで、確実な成果を得られます。
品質を守る仕組みを作る
品質を守るための仕組み作りも重要です。
Claude Codeは「動くコード」を書くことを優先する傾向があるので、放っておくと型の安全性が損なわれたり、古いメソッドが使われたりすることがあります。
これを防ぐために、プロジェクトの最初に `ESLint` や `Prettier`、`Jest` などのテストツールを入れて、AIに対して「コードを修正するたびにLintとテストを実行すること」をルールにするのが効果的です。
自動テストがガードレールになって、AIが間違ってバグを混入させた時も即座に気づけるようになります。
人間の役割が変わることを理解する
最後に、人間が果たすべき役割の変化について意識する必要があります。
Claude Codeみたいなエージェント型AIの登場で、エンジニアの仕事は「コードを書くこと」から「コードをレビューして、アーキテクチャを決めること」へと変わっていきます。
AIが生成したコードに対して、「なぜこの実装にしたの？」「セキュリティリスクはない？」って視点で監視・監督する能力が、これまで以上に求められることになります。
AIにすべてを丸投げするんじゃなくて、あくまで「優秀な部下」として扱って、最終的な品質責任は人間が持つ。
このマインドセットを持つことで、Claude Codeはあなたの開発スピードを何倍にも加速させる最強の武器になるはずです。
広告
