AIにWebアプリを作らせてみた｜自動開発はローカル動作まで

「AI に Web アプリを作らせる」と聞くと、ボタン1つで完成して公開まで終わる——そんな印象を持つ人も多いはずです。実際には、AI Webアプリ自動開発でどこまで任せられて、どこから人の手が要るのでしょうか。

この記事では、IT Picks の記事制作に使っている AI（Claude Code）に、小さな家計簿アプリを企画から作らせました。範囲は 企画 → 実装 → 自動テスト → ローカルで起動して画面を確認 までです。インターネットへの公開（デプロイ）はしていません。かかった時間、書いたファイルの数、テストの結果、つまずいた所を、記録のとおりに載せます。

あわせて、v0・Bolt・Lovable・Replit などの「作らせる」ツールを公式の料金で比べ、他の人の検証結果も紹介します。AI に任せられる所と、人が決めるべき所の境目をつかむための記事です。

AIにWebアプリを作らせるとは？一言でまとめると

一言でまとめると、「何を作るか」を言葉で伝え、コードを書く・動かす・直すをAIに繰り返させる開発のやり方です。英語圏では「バイブコーディング（vibe coding）」とも呼ばれます。

作らせるツールは、大きく2つの型に分かれます。

どちらの型でも、開発は「企画 → 実装 → テスト → 公開」の順に進みます。違うのは、公開（デプロイ）までをツールの中で済ませるか、自分で別のサービスに載せるかです。

今回の検証は「手元で動かす型」で、④ 公開の手前（ローカルで動く状態）までを AI に任せました。

今回の条件：何を・どこまで作らせたか

条件は次のとおりです。外部のサービスにログインしなくても作れるよう、ブラウザだけで動く家計簿を題材にしました。

人が決めたのは「小さな Web アプリを、外部サービスなしで、テストとローカル起動まで」という範囲だけです。何のアプリにするか（家計簿）と、機能・技術の選び方は AI が決めました。

実際に作らせてみた

2026年11月13日に、テスト用の Linux 環境で、IT Picks の記事制作に使っている AI（Claude Code）に作らせました。作業の時刻は、AI が作業しながら残した記録（build_log.txt）のものです。

① 企画：仕様を1枚に書かせる

最初に、作るものを SPEC.md という1枚のメモに書かせました。できること6つ、入力のルール、使う技術、完成の条件、やらないこと——の5つを決めています。

- できること
  1. 収入・支出を登録する（日付・区分・カテゴリ・金額・メモ）
  2. 月を選ぶと、その月の明細・収入合計・支出合計・差額が出る
  3. 支出のカテゴリ別の内訳（金額と割合のバー）
  4. 明細を削除できる
  5. CSV でダウンロードできる
  6. データはブラウザの localStorage に保存
- 入力チェック: 金額は 1〜99,999,999 の整数、日付は YYYY-MM-DD
- 完成の条件: npm test と npm run test:e2e がすべて通り、npm run build が成功し、ローカルで画面が表示される

ここで「完成の条件」を先に書かせたのがポイントです。AI がどこで作業を止めればいいかがはっきりし、後の工程でも「条件を満たしたか」で判断できます。

② 準備：必要な道具を入れる

次に、開発用の道具を npm で入れました。かかった時間は 約10秒です。

npm install -D vite vitest @playwright/test

vite/8.3.8 linux-x64 node-v22.23.4
vitest/5.1.0 linux-x64 node-v22.23.4
Version 1.65.0
found 0 vulnerabilities

package.json の中身（スクリプトの名前など）も AI が書いています。人が入力したコマンドはありません。

③ 実装：画面とロジックを分けて書く

AI は、計算と入力チェックを budget.js、保存を storage.js、画面の操作を main.js に分けて書きました。こうしておくと、画面を開かなくても計算だけをテストできます。

たとえば入力チェックは、次のように「存在しない日付（2月30日など）」まで見ています。

const [y, m, d] = date.split('-').map(Number);
const dt = new Date(Date.UTC(y, m - 1, d));
if (dt.getUTCMonth() !== m - 1 || dt.getUTCDate() !== d) errors.push('存在しない日付です');

書き始めから画面とロジックがそろうまで、約1分でした。

④ 単体テスト：21件が1回で通った

計算と入力チェックのテストを21件書かせ、実行しました。金額が0・マイナス・小数・空欄のとき、存在しない日付、月をまたぐ集計、CSV のカンマの扱い、壊れた保存データの読み込みなどを確かめています。

npm test

 Test Files  1 passed (1)
      Tests  21 passed (21)
   Duration  241ms

21件すべてが1回目で通りました。

⑤ 画面のテスト：ブラウザが無くて全部失敗した

次に、ブラウザで実際に操作するテスト（登録・削除・月の切り替え・エラー表示・CSV のダウンロード）を5件書かせました。

AI は最初から、この環境に入っているブラウザ（Chromium）を使う設定を書いていたため、その設定では 5件とも1回目で通りました。ところが設定を外して素の状態で実行すると、5件すべてが起動の段階で失敗しました。

npm run test:e2e

✘  1 e2e/app.spec.js:20:1 › 登録すると明細と合計に反映され、再読み込みしても残る (3ms)
Error: browserType.launch: Executable doesn't exist at /opt/pw-browsers/chromium_headless_shell-1254/...
Please run the following command to download new browsers:
    npx playwright install

原因は、Playwright 1.65 が求める版のブラウザが入っていなかったことです。メッセージのとおりブラウザを取得して、やり直しました。

npx playwright install chromium-headless-shell
npm run test:e2e

✓  1 e2e/app.spec.js:20:1 › 登録すると明細と合計に反映され、再読み込みしても残る (915ms)
✓  2 e2e/app.spec.js:34:1 › 金額が不正だとエラーを出して登録しない (514ms)
✓  3 e2e/app.spec.js:40:1 › 削除すると合計から消える (645ms)
✓  4 e2e/app.spec.js:48:1 › 月を切り替えると、その月の明細だけになる (564ms)
✓  5 e2e/app.spec.js:58:1 › CSV をダウンロードできる (564ms)
  5 passed (5.1s)

自分のパソコンで同じことをするときも、画面のテストは「ブラウザ本体を入れる」1手間が要ると覚えておくと、慌てずに済みます。

⑥ ローカルで起動して画面を見る：テストは通ったのに崩れていた

ビルドしてローカルで起動し、明細を7件入れた画面を撮りました。

npm run build
npm run preview

dist/index.html                 2.48 kB │ gzip: 1.06 kB
dist/assets/index-DUUVLFC3.css  2.81 kB │ gzip: 1.03 kB
dist/assets/index-DC4wtFGq.js   5.21 kB │ gzip: 2.52 kB
✓ built in 75ms
  ➜  Local:   http://localhost:4173/

ここで問題が見つかりました。テストは26件すべて通っていたのに、画面を見ると「金額」の入力欄が枠の右にはみ出していたのです。テストは「登録できるか」「合計が合うか」を確かめるもので、見た目の崩れまでは見ていませんでした。

AI はスタイル（CSS）を直しましたが、今度は右上の「表示する月」のラベルが2段に崩れたため、もう一度直しています。また、最初の撮影では日付が「November 2026」と英語で出ました。これはアプリではなく撮影したブラウザの言語設定によるもので、日本語の設定で撮り直しています。

上の画像は、金額に「0」を入れて「登録する」を押したときの画面です。仕様どおり「金額は 1〜99,999,999 の整数で入力してください」と出て、明細は増えませんでした。

⑦ 完成：修正後にもう一度テスト

直したあとに単体テスト21件・画面のテスト5件・ビルドをもう一度実行し、すべて成功しました。完成した画面が次の2枚です。

収入 250,000円、支出 94,680円、差額 155,320円 と、入れた7件の明細どおりに計算されています。支出の内訳は住居が 74% で最も多く、バーの長さも割合に合っています。

スマートフォンの幅（390px）では、合計のカードと入力欄が縦1列に並びます。この並び替えも AI が最初から CSS に書いていました。

結果：どこまで自動で、どこで人の手が要ったか

作業の時刻を並べると、次のとおりです。

工程ごとに「AI だけで済んだか」を整理すると、こうなります。

コードを書く・テストを書く・テストを通すまでは、AI だけで済みました。一方で、次の4つは人の手が要ります。

• 何を・どこまで作るか：今回も「外部サービスなし・ローカルまで」という範囲は人が決めました
• 画面を見て判断する：テストが全部通っても見た目は崩れていました。最後に画面を見る工程は欠かせません
• 公開（デプロイ）：Vercel や Cloudflare のアカウント・ログインが要り、公開してよいかの判断も人がします
• ドメインとお金：独自ドメインの取得・有料プランの契約は人がします

なお、今回のアプリはかなり小さいものです。ログイン・データベース・決済のあるアプリは、決めることも確かめることも一気に増えます。「4分でできた」は、この規模での結果と考えてください。

デプロイの手順：ここから先は公式の手順

ここからは、今回は実行していない、公式ドキュメントに書かれた公開の手順です。Vite で作ったアプリは npm run build で dist フォルダに出力され、これをサービスに載せます。Vite のドキュメントでは、npm run preview はビルド結果を手元で確かめるためのもので、本番用のサーバーではないとされています。

① Vercel に載せる

Vercel の CLI を入れて、プロジェクトのフォルダで vercel を実行します。Vercel は Vite のプロジェクトを自動で見分けて、ビルドの設定をしてくれます。

npm i -g vercel
vercel

Vercel の料金ページには「Hobby は無料で、最初のデプロイにはアカウントが要らない」とあります。ただし、公開してよいか・どのアカウントで管理するかは人が決めることです。Hobby は使用量の上限を超えても追加で買えず、多くの機能は30日待つことになります。

あわせて読みたい

Vercelの高額請求を防ぐには？予算と自動停止の設定【2026年版】

② Cloudflare に載せる

Cloudflare Workers に載せる場合は、Cloudflare の Vite プラグインと Wrangler（Cloudflare の CLI）を入れます。

npm install --save-dev @cloudflare/vite-plugin wrangler

import { defineConfig } from 'vite';
import { cloudflare } from '@cloudflare/vite-plugin';

export default defineConfig({
  plugins: [cloudflare()],
});

npx wrangler login
npm run build
npx wrangler deploy

wrangler login を実行するとブラウザが開き、Cloudflare のアカウントで Wrangler を認可します。ここが、AI だけでは進められない所です。

独自ドメインで公開したい場合は、ドメインの取得も必要です。

あわせて読みたい

Vercel Pro無料ドメインの選び方：2年目の更新料【2026年版】

自動開発ツールの比較：v0・Bolt・Lovable・Replit

今回は手元で動かす型の Claude Code を使いましたが、ブラウザで完結する型なら環境の準備が要りません。主なツールを、2026年11月13日時点の公式ページで比べます（米ドル・税別）。

※ 料金は2026年11月13日時点。Lovable の Pro は月100クレジットの場合で、年払いなら月21ドル相当。Claude の Pro は年払いなら月17ドル相当です。

表から分かるのは、無料で試すならブラウザ型の4つ、作ったコードを手元に置きたいなら Claude Codeという分かれ方です。Replit の無料プランは公開リンクが30日で止まるので、長く使うアプリには向きません。Bolt は無料プランでも公開できますが、Bolt の表示が付きます。

手元で動かす型のツールどうしの比較は、次の記事も参考になります。

あわせて読みたい

ChatGPTとCodexの利用枠が12月から共通に【2026年10月】

他の人の検証ではどうだった？

ブラウザ型のツールは IT Picks ではログインして試していないため、他の人の検証を紹介します。どれも少し前の記事なので、今の版とは結果が違う可能性があります。

• GoPractice 編集部の検証（2025年9月8日）：Slack 風のチャット画面を、同じ順番の指示で7つのツールに作らせました。Lovable・Bolt.new・v0 は無料アカウントでエラーなく作れた一方、Replit と Tempo Labs は無料アカウントでは動く試作品ができなかったと報告しています（出典）
• Google のエンジニア Addy Osmani 氏の比較（2025年1月11日）：v0・Bolt・Lovable を比べ、どれも従来の開発の流れを完全には置き換えないと結論づけています。複雑になると手元でコードを直す必要が出る「70%の問題」にも触れています（出典）
• Zenn の yamamoto44 氏の体験（2025年6月21日）：Claude Code でサブスクの管理アプリを作り、1日でデプロイまでできたそうです。ただし Vercel と Supabase の設定は手作業で、そこが一番時間がかかったと書いています。1回目は設計が足りずにやり直したとのことです（出典）
• Zenn の八神翔大氏の体験（2025年9月30日）：Claude Code で PHP のセミナー管理システムを約3時間で作成。未定だった仕様を決める・細かいバグを直す作業は人が行ったと書いています（出典）

共通しているのは、「何を作るか」と「公開の設定」は人が担っている点です。今回の記録とも一致します。

選び方：どのツールで作らせるか

ここまでの比較から、選び方をチャートにまとめました。

• まず画面を見てみたい・お金をかけたくない：v0・Bolt・Lovable の無料プランから。1日の上限があるので、小さな画面1つから試すのがおすすめです
• ログインやデータベースのあるアプリを作りたい：Lovable や Bolt はデータベースとの連携をうたっています。ただし公開の設定やデータの扱いは、自分で理解しておく必要があります
• コードを手元に置いて、テストや Git まで任せたい：Claude Code や Codex のような手元で動かす型。今回のようにテストを書かせて通るまで直させる使い方ができます
• 長く使うアプリ：Replit の無料プランは公開が30日で止まるので、有料プランか、自分で Vercel・Cloudflare に載せる方法を選びます

Claude Code の権限の設定（どこまで確認なしで任せるか）は、次の記事で解説しています。

あわせて読みたい

Claude Code「auto mode」とは？承認地獄から解放される新モードを解説【2026年3月】

AIに作らせるときの手順とコツ

今回の記録から、AI に作らせるときに効いた手順を順番にまとめます。

AI への最初の頼み方は、たとえば次のような形です。

家計簿の Web アプリを作ってください。
- 外部サービスは使わず、ブラウザだけで動くこと（データは localStorage）
- できること: 収入・支出の登録、月ごとの合計、カテゴリ別の内訳、削除、CSV 出力
- 最初に SPEC.md に仕様と「完成の条件」を書いてから実装すること
- 計算のテストと画面のテストを書き、全部通るまで直すこと
- デプロイはしないこと

「デプロイはしないこと」まで書いておくと、AI が勝手に外部サービスに接続しようとするのを防げます。パスワードや API キーなどの秘密の情報は、AI に渡すファイルに書かないようにしましょう。

ブラウザだけで作らせる別の例として、Google のサービスでの動きは次の記事でまとめています。

あわせて読みたい

Google AI Studioのバイブコーディングがフルスタック対応に。Antigravity＋Firebase統合で何が変わったか【2026年3月】

よくある質問

Q. プログラミングを知らなくても AI にアプリを作らせられますか？ A. 小さなアプリなら作れます。今回も人が入力したコマンドはありません。ただし、画面を見て正しいか判断すること、公開の設定をすることは人の仕事です。ログインや決済のあるアプリは、仕組みを理解していないと安全に運用できません。

Q. 本当に4分で作れるのですか？ A. 今回の家計簿（アプリ296行）では、AI の作業時間は約4分でした。ただし、作業環境の準備は済んでいた状態で、作るものも小さく、範囲もローカルまでです。他の人の記録では1日・約3時間といった例もあり、規模と公開の有無で大きく変わります。

Q. AI が書いたコードはそのまま使って大丈夫ですか？ A. テストが通っていても、見た目や想定外の使い方までは保証されません。今回もテストが全部通ったあとに見た目の崩れが見つかりました。画面を自分で確かめ、テストを増やしてから使うのが安全です。

Q. 無料でどこまで試せますか？ A. v0（1日7メッセージ）・Bolt（1日30万トークン）・Lovable（1日5クレジット）・Replit（Starter）に無料プランがあります。Claude Code は無料プランでは使えず、Pro（月20ドル）からです。公開は Vercel の Hobby（無料）や Cloudflare Workers の Free で始められます。

まとめ

AI Webアプリ自動開発のポイントをまとめます。

• 今回作らせたもの：家計簿アプリ（Vite＋JavaScript、外部サービスなし）
• 範囲：企画 → 実装 → 自動テスト → ローカル起動まで（デプロイはしていない）
• かかった時間：約4分（AI の作業時間）
• AI が書いたファイル：12個（アプリ296行・テスト155行）
• テスト：単体21件・画面5件、すべて成功（ブラウザの取得と見た目の修正2回のあと）
• 人の手が要った所：範囲の決定・画面の確認・公開（アカウント）・ドメイン
• 無料で試せるツール：v0・Bolt・Lovable・Replit（Claude Code は Pro 月20ドルから）

まずは「外部サービスなし・テストつき・デプロイはしない」と範囲を決めて、小さなアプリを1つ AI に作らせてみてください。

IT Picks 編集部

ITツール・Webサービス紹介メディア

IT Picks 編集部。VPS・クラウド・AIツール・SaaSを中心に、実際に検証した情報を届けるITメディアです。「本当に使えるか」を基準に、初心者からエンジニアまで役立つ記事を制作しています。