---
source_url: https://nolanlawson.com/2026/10/28/the-ai-cost-of-javascript-frameworks/
source_title: "The AI cost of JavaScript frameworks"
source_site: "Read the Tea Leaves"
source_published_at: 2026-10-28T07:31:03-07:00
hero_image: https://nolanlawson.com/_astro/frameworks.B14_z7MF_2lv3q1.webp
tags: javascript,frameworks,ai-coding,benchmarks,web-performance
generated_at: 2026-11-01T12:01:29.678Z
model: claude-haiku-5-5
---
# 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回の反復で実行された。

![ベンチマーク対象のPokemonアプリ](https://nolanlawson.com/_astro/pokemon-app.DUO5bAVN_34jQQ.webp)

> 「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 の報道による）