AIにWebアプリを作らせると、何が高くつく？12構成の比較が示した二つのコスト

AIにWebアプリを作らせるとき、「どのフレームワークが書きやすいか」という問いは少し変わる。人が手で入力する時間の代わりに、エージェントが読み、試し、直すための時間とトークンがかかる。そして完成した画面の重さは、利用者が引き受ける。

Web開発者のNolan Lawson氏は、この二つのコストを同じ実験で測った。Pokémonの情報を検索・絞り込みできる小規模アプリを、Claude Codeのエージェントに12種類の構成で実装させた。各構成は原則5回。共通仕様とテストを与え、隔離した環境で作らせた後、開発にかかった推定API料金、時間、生成コード量、モバイル環境での表示性能を比べている。

「AIにとって安い」と「利用者にとって軽い」

実験での開発費用の中央値は、Hono＋htmxが2.67ドル、Astroが2.76ドル、Next.jsが3.14ドル、Angularが4.97ドルだった。これはClaude Codeが表示したAPI換算額で、著者が実際にその額を従量課金で支払ったという意味ではない。作業時間の中央値もAstroの8.2分からAngularの17.2分まで幅があった。

一方、完成したトップページで転送されたJavaScriptの中央値はAstroが0KiB、Hono＋htmxが18KiB、Next.jsが142KiB。Lighthouseのモバイル測定では、総ブロック時間の中央値はAstroが0ミリ秒、Next.jsが71ミリ秒、Angularが103ミリ秒だった。単にエージェントが早く作れるかだけでなく、その成果物が端末に何を要求するかも、選定の対象になる。

ただし、この数字を「フレームワークの総合順位」と読んではいけない。実験の対象は情報表示が中心の一つのアプリで、複雑な共同編集画面や高度な操作を伴う製品ではない。モデルは一種類で、試行回数も少ない。著者自身、エージェントの挙動やLighthouseの測定には揺れがあると説明する。Angularでは2回、動くアプリを完成できなかったため、費用の中央値は3回分である。

開発の「標準」は、AIが読める資料まで含む

興味深いのは、公式のAI向けツールを用意しても、エージェントが必ず使うわけではなかった点だ。著者の記録では、Next.js向けのスキルファイルを読んだのは5回中1回、NuxtのMCPを利用したのは0回。SvelteKitは新しい移行ガイドを毎回読んだことが、トークン増加の一因かもしれないと著者は推測している。ツールの有無だけでなく、必要な手引きへ迷わず到達できるかが作業量を左右する。

日本の開発チームがここから持ち帰れるのは、特定の構成への乗り換え指示ではない。自社の典型的な画面を一つ選び、同じ仕様・同じテスト・同じモデルで数回作らせる。開発時のトークンと手戻りに加え、完成後のJavaScript量、表示速度、アクセシビリティ、保守するコード量を見る。エージェントが作業する時代ほど、選定理由を「慣れているから」だけで終わらせない測定が必要になる。

出典

• Nolan Lawson氏の検証記事（2026年10月28日）
• 検証用コードと再現手順