JavaScript のフレームワークを変えると、AI エージェントにアプリを作らせる費用はどれだけ変わるのか。Web ブラウザの性能に詳しい開発者の Nolan Lawson 氏が、同じポケモン図鑑アプリを 12 のフレームワークで Claude Code に作らせ、費用・時間・できあがったページの速さを比べました。1 回あたりの費用は Hono+htmx の 2.67 ドルが最も安く、Angular は 4.97 ドルで約 1.9 倍かかりました。Angular は 5 回中 2 回、仕様を満たさないアプリを作っています。「エージェント向きのフレームワーク」という言葉が根拠なしに使われがちな中で、数字で比べた結果が出ました。
背景と文脈
フレームワーク選びは、昔から好みや評判で決まりがちでした。Lawson 氏はブログでこれを「なんとなくの雰囲気」で決めていると書いています。コードの大半を AI エージェントが書くようになっても、この傾向は変わっていません。「このフレームワークのほうがエージェントと相性がいい」という理由で作り直す話も出ていますが、測った結果を示す例はほとんどありませんでした。
そこで Lawson 氏は、ベンチマーク（同じ条件で性能を比べるための試験）を自分で作りました。題材は、公開 API の PokéAPI からポケモンの一覧・タイプ・技を取ってきて、検索や絞り込みができる小さなアプリです。結果は 10 月 28 日にThe AI cost of JavaScript frameworksとして公開され、Hacker News では 190 点以上を集めました。
比べたのは Angular、Astro、Gracile+Lit、Hono+htmx、Next.js、Nuxt、Qwik、React Router、SolidStart、SvelteKit、TanStack Start と、フレームワークを使わない Vite だけの構成（以下 Vanilla）の 12 種です。htmx と Web Components（ブラウザ標準の部品の仕組み）の代表として、Hono+htmx と Gracile+Lit も入れています。
技術/ビジネス面
エージェントは Claude Code で、モデルは Opus 5.5 です。各フレームワークで 5 回ずつ作らせ、真ん中の値（中央値）を比べています。毎回まっさらな隔離環境で動かし、「最新の安定版を使うこと」とだけ指示しました。Tailwind などの部品ライブラリは禁止で、見た目は共通のデザインの決まりに合わせます。
できあがったアプリは、アクセシビリティツリー（画面読み上げソフトが使う、画面の構造の情報）をもとにした共通のテストで確かめました。事前に静的な HTML を作っておくずるい方法は禁止で、それもテストで見ています。SSR（サーバーで HTML を組み立ててから返す方式）にするか SPA（ブラウザ側の JavaScript で画面を切りかえる方式）にするかは、エージェントに任せました。
費用・時間・トークン（AI が文章を処理するときの単位で、料金はこの量で決まる）の 3 つは、ほぼ同じ順位になりました。安く速かったのは Hono+htmx、Astro、Nuxt で、高く遅かったのは SvelteKit、Gracile+Lit、Angular です。Lawson 氏は理由を個別に挙げています。SvelteKit は新しい版の移行ガイドを毎回読みにいき、Gracile は情報が少ないためエージェントがソースコードまで読んでいました。Angular はコードの量そのものが多く、行数の中央値は 2,009 行でした。最も少ない Hono+htmx は 1,370 行で、Angular の約 7 割です。
できたページの速さを Lighthouse（Google のページ速度の測定ツール）で測ると、性能とアクセシビリティの点数はほぼ全部 97〜100 点でした。差が出たのは細かい数字です。ページを開いたときに送られる JavaScript の量は、Astro が 0 KB、Next.js が 142 KB でした。LCP（ページの一番大きな要素が表示されるまでの時間）も Astro の 0.81 秒に対し、Next.js は 2.09 秒です。ただし Next.js は 5 回中 4 回、画像を遅延読み込みにしていたことが原因でした。
開発者として試すなら
まず、自分のチームが使っているフレームワークの位置を確かめておくと、費用の見積もりに使えます。ブログの数字を表にまとめました（5 回の中央値。Angular だけは成功した 3 回の中央値）。
| フレームワーク | 費用（ドル） | 時間（分） | トークン（百万） | JS の量（KB） |
|---|---|---|---|---|
| Hono+htmx | 2.67 | 8.6 | 4.26 | 18 |
| Astro | 2.76 | 8.2 | 4.13 | 0 |
| Nuxt | 2.82 | 9.0 | 3.85 | 84 |
| Vanilla（Vite） | 2.98 | 10.1 | 5.00 | 7 |
| Next.js | 3.14 | 10.9 | 4.99 | 142 |
| Qwik | 3.27 | 10.7 | 5.64 | 40 |
| TanStack Start | 3.54 | 10.3 | 7.07 | 118 |
| SolidStart | 3.79 | 11.2 | 7.13 | 40 |
| React Router | 3.81 | 12.5 | 7.58 | 115 |
| SvelteKit | 4.28 | 10.8 | 8.53 | 36 |
| Gracile+Lit | 4.65 | 12.1 | 9.04 | 8 |
| Angular | 4.97 | 17.2 | 9.76 | 93 |
費用は API で払った場合の金額で、Claude Code が表示したものです。Lawson 氏自身は月 100 ドルの Max プランで動かしています。トークンには、キャッシュから読んだ分は含めていません。
自分の手元で同じ試験を回すこともできます。コードは GitHub の agent-framework-benchmark にあり、README によると Linux、Podman 4.3 以上、Node 20 以上、15 GB ほどの空きが必要です。1 つのフレームワークを 1 回だけ試すなら、次のように実行します。
nvm install && nvm use
node bench/run.mjs --frameworks=vanilla --iterations=1
# 全部を3回ずつ
node bench/run.mjs --frameworks=all --iterations=3つまずきそうな点が 3 つあります。1 つ目は費用です。ブログの中央値で計算すると、12 種を 3 回ずつ回すと API の料金で 130 ドル前後になります。2 つ目は設定の違いです。README では推論の深さ（effort）の初期値が medium ですが、ブログの結果は high で測っています。ブログに近い数字を出すには --effort high を指定します。3 つ目は鍵の扱いです。エージェントは権限の確認を飛ばすオプションで動くため、中で動くものから API キーを読まれるおそれがあると README に書かれています。使える金額に上限をつけたキーを使うと安心です。
フレームワークが用意している MCP（Model Context Protocol：AI エージェントが外部のツールや資料を呼び出すための共通の決まり）やスキル（手順や知識をまとめたファイルで、エージェントが必要なときに読み込むもの）は、使われたり使われなかったりしました。たとえば Nuxt の MCP は 5 回とも使われず、SvelteKit の MCP は 5 回とも使われています。Lawson 氏は、今の MCP やスキルはかえって足を引っ張っているかもしれない、と書いています。SvelteKit の例から考えると、使う版や書き方を AGENTS.md などに短く書いておけば、エージェントが毎回移行ガイドを読みにいく分のトークンを減らせそうです。
これからどうなるか
この結果は、内容を見せることが中心の小さなアプリでの話です。Hacker News のコメントでは、Aozora7 さんが、複雑な入力フォームが中心のアプリなら順位が変わるのではと書いています。Lighthouse はページを開いた直後の速さを見るため、ページごとに HTML を返す方式（MPA）に有利です。Lawson 氏もこの点を認めていて、画面操作の速さは測っていません。
それでも、エージェントの費用とコードの量がほぼ比例するという結果は、ほかのアプリにも当てはまりそうです。コードが多くなるフレームワークほど、作るときも直すときもトークンを使います。新しいプロジェクトの技術を選ぶとき、試しに同じ小さな機能を 2〜3 種で作らせて、Claude Code が表示する費用を比べてみる価値はあります。
フレームワークの側も動き出しています。Angular、SvelteKit、React Router などはすでに公式の MCP やスキルを出しています。今回の試験では効き方がばらばらだったので、次の版でどこまで費用が下がるかが見どころです。ベンチマークのコードは公開されていて、Lawson 氏は別の人が回した結果もブログで紹介するとしています。
まとめ
Claude Code（Opus 5.5）に同じアプリを 12 のフレームワークで作らせると、費用は 2.67〜4.97 ドルと約 1.9 倍の開きがありました。安く速かったのは Hono+htmx・Astro・Nuxt で、Angular は最も高く、5 回中 2 回は仕様を満たせませんでした。ページの速さの点数はほとんど差がなく、差が出たのは JavaScript の量と表示の速さです。題材が小さなアプリなので、自分のプロジェクトに近い題材で試してから判断するのが確実です。
