AIエージェントが作ったJavaScriptフレームワーク別アプリのコストを比較
Nolan Lawsonは、PokeAPIを用いたPokemonアプリを複数のJavaScriptフレームワークでAIコーディングエージェントに作成させ、コスト、所要時間、トークン数、コード行数、Lighthouseスコアを計測した。
Nolan Lawsonは、AIコーディングエージェントに複数のJavaScriptフレームワークおよびメタフレームワークでPokemonアプリを作成させ、その結果を公開した。出力は、フレームワークごとにspec適合テストで検証された。
ベンチマークの概要
各エージェントには、specとOpus 5.5（highの設定）が与えられ、指定されたフレームワークの最新版を使うよう指示された。各フレームワークは、利用可能な場合は公式のMCPやskillsを使用した。
出力は、アクセシビリティツリーに基づくspec適合テストスイートで検証された。各フレームワークの結果は5回実行の中央値とされたが、Angularは動作するアプリを2回作成できなかったため、3回の反復で実行された。
「Frameworks are not tools for organizing your code; they are tools for organizing your mind.」
— Rich Harris
コストとコード量
コストの中央値は、Hono+htmxが1回あたり$2.67 (2.23–3.19)、Angularが1回あたり$4.97 (3.19–6.82)だった。これらの数値はClaude Codeで示されたAPI価格であり、著者はMaxプランを利用しているため、実際に支払った金額ではない。
ソースコード行数（空行を除く）の中央値は、Hono+htmxが1370 (1264–1489)、Angularが2009 (2003–2051)だった。
| フレームワーク | コスト（1回あたり中央値） | ソースコード行数（中央値） |
|---|---|---|
| Hono+htmx | $2.67 (2.23–3.19) | 1370 (1264–1489) |
| Angular | $4.97 (3.19–6.82) | 2009 (2003–2051) |
Angularの2回の実行では、エージェントがlocalhost以外のリクエストを拒否するSSRアプリを作成した。Vanilla（UIフレームワークを使わないVite）は、いくつかのフレームワークよりコストで劣った。
SvelteKitの高いコストは、エージェントが毎回の実行でSvelteKit v3の移行ガイドを読んだことに起因する可能性がある。Gracile+Litの高いコストは、エージェントがそのフレームワークに十分に習熟していなかったためとみられる。Gracileのエージェントは2回の実行でLitを使用しなかった。Angularの高いコストは、コード全体の量に起因するとみられる。
Lighthouseの計測結果
- Lighthouseのパフォーマンス、アクセシビリティ、CLSのスコアはほぼ上限に達しており、フレームワーク間の差は小さかった。
- Lighthouseが報告した転送JavaScriptの中央値は、Next.jsが142 KiB (136–143)、Astroが0 KiB (0–1)だった。
- Next.jsのLCPのばらつきが大きかったのは、5つのアプリのうち1つだけが画像の遅延読み込みを避けていたためである。
筆者の見立て
- Jonathan Haidtは、この評価に同意するだろうと論じている。
- 現在のMCPやskillsは、有益である以上に害をもたらしている可能性があると論じている。
- Hono+htmxは、約70%のコードでAngularとほぼ同じことを、しかもより速く行えると解釈している。
- エージェント時代には、コード量がトークン数や将来の編集、コードベースの保守コストに影響するため、その影響はさらに大きくなると示唆している。
- MPAはこのベンチマークでSPAを上回ると予想している。
この記事は元記事の事実のみに基づいて自動生成されました。
出典
- Read the Tea Leaves「The AI cost of JavaScript frameworks」
- https://nolanlawson.com/2026/10/28/the-ai-cost-of-javascript-frameworks/
- （Rethinking reactivity の報道による）