::title::

AI時代のWebフレームワークはどこへ行く？

Yusuke Wada

フロントエンドカンファレンス福岡 2026 ・ September 12, 2026

::center bg=blue::

マジで

::center bg=blue::

喉（声帯）がやられて

::center bg=blue::

声がでない

::center bg=blue size=2::

😱

::center bg=blue::

お聞き苦しいところありますがご了承ください

::center bg=blue size=2::

🙇

::center bg=blue::

ぶっつけ本番なので、尺が合うかわかりません！

-# （たぶん早く終わると思います）

::center bg=blue::

あ、あとAIに助けてもらいます！

::center bg=blue size=2::

ではいきます！

::title::

AI時代のWebフレームワークはどこへ行く？

Yusuke Wada

フロントエンドカンファレンス福岡 2026 ・ September 12, 2026

Yusuke Wada

::right::

me

::center size=1.5 bg=white::

問い

::center::

「AIがどんなライブラリ使ってるか知っているか！？」

::center::

AIがコードを書くようになって

::center::

ライブラリもAIが選定

::center::

人間はライブラリを気にしなくなった

::center::

package.jsonのdependenciesにこだわっていた僕らは⋯

::center::

AIのみがライブラリのことを知り

::center::

人間はライブラリのことを忘れてしまうかもしれない

::center::

Honoのことを人間が忘れてしまうかもしれない⋯

::center::

((((;ﾟДﾟ))))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

::center::

結構マジな話だと思う！

::center::

ならば

::center::

AIにちゃんと向き合って「Webフレームワークはどこへ行く？」かを考えてみよう！

::center size=1.5 bg=white::

アジェンダ

::center::

AI時代のWebフレームワークについて考える

::center::

HonoをAIにとって使いやすいフレームワークにしていく！

アジェンダ

::center bg=blue::

水を飲む

::center size=1.5 bg=white::

前提

::center::

実はHonoには

もうAI向けのプロジェクトがある

Skills

::right::

honojs/skills

Hono CLI

::right::

Hono Conference 2025 Findyレポート

5つのコマンド

AI向けのコマンド

::center::

好きなコマンド

hono request

::center::

AIによくある問題

::center::

「開発サーバー立ち上げまくってポート衝突・乱立する」

hono request が解決

$ hono request -P /users/123
{"id":"123","name":"Alice"}

$ hono request -P /api/users -X POST -d '{"name":"Alice"}'
{"ok":true,"id":"124"}

これを実現しているのが app.request()

const res = await app.request('/users/123')
res.status // 200

::wide::

Request → Hono app → Response

::center bg=orange::

デモ

::center::

hono request便利！

::center::

「Hono CLIよさそう」

::center::

あれから半年以上⋯

Hono CLIはわりと放置してた⋯

::center::

2026年6月27日にIssue #77を立てる

::wide::

New concept（honojs/cli#77）

New concept issue

::center::

AIに振り切る

::center::

ただし

::center::

本当にAIに効果があるかは分からなかった

::center size=1.5 bg=white::

Agent DX

::center::

「ちゃんと」効果を測ろう！

::center::

そして、改善していこう！

::center size=2::

Agent DX

Agent DX

::right::

agent-dx.hono.dev

::center::

AI Evalsを使う

AI Evalsとは⋯

AI Evals（評価）とは、確率的に動作する生成AIや大規模言語モデル（LLM）の出力品質を、定義された基準・データ・採点ロジックに基づいて再現可能な形で測定し、継続的に改善する仕組みです。

Google「ai evalsの検索結果」より

Evalsをフレームワークに取り入れた例

FlueでEvalsを実装

::right::

Flue

Evalsの実装

::right::

Evalsの流れ

::center bg=blue::

水を飲む

::center size=1.5 bg=white::

3つの実験

3つの実験

::center::

1つずつみていこう

::center size=1.5::

1. Adoption

::center::

そもそもAIはHonoを使うのか？

::wide::

Adoptionのやり方

Adoptionの流れ

シナリオとランタイム

プロンプトの例

Create a Cloudflare Workers application in TypeScript.
It should respond to GET /health with the JSON {"ok":true}.

使ったモデル

::wide::

Adoptionの結果（claude-haiku-4-5）

Adoptionの結果 claude-haiku-4-5

::wide::

Adoptionの結果（claude-opus-5）

Adoptionの結果 claude-opus-5

Adoptionでわかったこと

::center::

さらに分かったのは⋯

::center::

package.jsonを追加してdependenciesにhonoを入れると100% Honoを使う

::center bg=mustard::

面白い

::center size=1.5::

2. Value

::center::

そもそもHonoは必要なのか？

::center::

「AIが全部手で書くなら、ライブラリ要らなくない？」論争

::wide::

Valueのやり方

Valueの流れ

2つのタスク

::wide::

Valueの結果

Valueの結果

Valueの結果

Valueでわかったこと

::center bg=mustard::

面白い

::center bg=blue::

水を飲む

::center size=1.5::

3. Practical

ここまででわかったこと

::center::

何を足せばAIはうまくやれるのか？

::wide::

Practicalのやり方

Practicalの流れ

2つのタスクで見てみる

::wide::

Practicalの結果

Practicalの結果（改善前）

::center::

差が出ない⋯

::center::

どころか悪化してる

::center::

なぜ？

敗因1 - AIが書き捨てスクリプトを書く

// verify.mjs
import app from './src/index.ts'

let res = await app.request('/users')
console.log(res.status, await res.json())

res = await app.request('/users', { method: 'POST', ... })
console.log(res.status, await res.json())

書き捨てスクリプトでも

敗因2 - AIがコマンドを間違える

# 正しいコマンド
$ hono request -P /api/orders src/index.ts

# 間違ったコマンド（curl風構文）
$ hono request GET /api/orders    → エラー
$ hono request "/api/orders"      → エラー
$ hono request --app src/index.ts → エラー

（諦めて書き捨てスクリプトを書き始める）

::center size=1.5::

CLI不要説！？

::center bg=blue::

水を飲む

::center size=1.5 bg=white::

改善

改善のループを回そう

::right::

改善のループ

::center::

敗因1 - 「AIが書き捨てスクリプトを書く」に対抗する

書き捨てスクリプトがつらい時

::right::

書き捨てスクリプトの悪循環

2つのコマンドを追加

hono batch

hono batch - <<'EOF'
{"path":"/users","expect":{"status":200}}
{"method":"POST","path":"/users","body":{"name":"Momo"},"expect":{"status":201}}
EOF

{"path":"/users","status":200,"pass":true}
{"path":"/users","status":201,"pass":true}
{"summary":{"total":2,"passed":2,"failed":0}}

hono snapshot

$ hono snapshot
{"path":"/health","expect":{"status":200,"body":{"ok":true}}}
{"path":"/users","expect":{"status":200,"body":[{"id":"1"}]}}
{"path":"/users/:id"}

::center::

敗因2 - 「AIがコマンドを間違える」に対抗する

構文を修正

$ hono request GET /api/orders
{
  "ok": false,
  "error": {
    "code": "INVALID_ARGUMENTS",
    "message": "The method goes in -X, like curl",
    "suggestions": ["hono request /api/orders -X GET"]
  }
}

::center::

効果は？

::wide::

改善後の結果（同じ2タスク）

改善後の結果（同じ2タスク）

追加タスク

::wide::

改善後の結果（追加2タスク）

差が出た2タスクの結果

::center size=1.5::

いい感じ 😊

改善でわかったこと

::center bg=mustard::

面白い

::center bg=blue::

水を飲む

::center size=1.5 bg=white::

最後の実験

::center::

そもそも、なぜ hono request を作ったか？

::center size=0.8::

AIが「開発サーバー立ち上げまくってポート衝突・乱立する」問題に対処したい

::center::

実はその検証ができてなかった！

::center::

baselineでも開発サーバーを立ててなかった

これまでの実験

開発サーバーを立ち上げるようにした

::center::

結果

開発サーバーを立ち上げた！

::center::

一方

CLI + Skills

::center::

モデルごとの結果のグラフ

::wide::

Haiku 4.5

build-endpoints-workers / Haiku 4.5

::wide::

Sonnet 5

build-endpoints-workers / Sonnet 5

::wide::

Opus 5

build-endpoints-workers / Opus 5

::center size=1.5::

いい感じ 😊

::center::

なぜ開発サーバーを立てたり、立てなかったりするのか？

開発サーバーを立てるきっかけがある

::center::

で、よく考えると

devコマンドは人間にとってのDX

# コマンドへのショートカット、打ちやすい・みんなが知ってる
# → 人間にとってのDX
pnpm dev

::center::

さらに⋯

::center::

人間は開発サーバーで結果を確認する

AIは開発サーバーなしでも確認できる

::center::

開発サーバーは人間のためのDX

::center::

最後の実験では

人間にとってのDXを向上させるもの → AIにとっては裏目に出た

::center::

だからこそ、CLI + Skills、AGENTS.mdは大事

::center::

人間向けのDXとAI向けのDXがある

::center bg=mustard::

面白い

::center size=1.5 bg=white::

実験まとめ

実験まとめ

::center size=1.5 bg=white::

おまけ

おまけ

::center size=1.5 bg=white::

まとめ

まとめ

::center::

AI時代でもWebフレームワークはあった方がいいし、

::center::

AI向けのDXを改善できる！

::center size=1.5::

AI時代のWebフレームワークはどこへ行く？

::center::

おわり

← → / space ・ o: overview ・ f: fullscreen ・ t: telop ・ v: voice