Yusuke Wada / 2025 — 02-15 Honoのおもしろいミドルウェア をみてみよう 湘.なんか #2

Honoのおもしろいミドルウェアをみてみよう • その名の通りHonoのおもしろいミドルウェアをピックアップしてみます • おもしろいは個 人 的主観です

Honoのミドルウェア • Custom Middleware - 自 分で定義する • Built-in Middleware - `hono`パッケージに同封されている • 外部のライブラリに依存しない • 3rd-party Middleware - `hono`パッケージには 入 っていない • 外部のライブラリに依存していい • `@hono`ネームスペース(例:`@hono/hello`)に置かれる場合がある

Built-in Middleware 23個ある 1.Basic Authentication 2.Bearer Authentication 3.Body Limit 4.Cache 5.Combine 6.Compress 7.Context Storage 8.CORS 9.CSRF Protection 10.ETag 11.IP Restriction 12.JSX Renderer 13.JWK 14.JWT 15.Logger 16.Language 17.Method Override 18.Pretty JSON 19.Request ID 20.Secure Headers 21.Timeout 22.Timing 23.Trailing Slash

3rd-party Middleware Webサイトに掲載されているものだけで34個ある

ミドルウェアの使い 方

ではいってみよう

Standard Scheme Validator Middleware

Standard Scheme Validator Middleware • 3rd-party Middleware • Standard Schema Specに準拠したバリデータ • Standard Schema？ • TypeScript/JavaScriptのいくつかあるバリデータの標準インター フェースをつくるプロジェクト • Zod / Valibot / ArkType などが対応している • これまであったZod Validator / Valibot Validator / ArkType Validatorの代わりになり、ひとつのミドルウェアで全バリデータに対応で きる

使い 方 Zodの場合

使い 方 全部使ってみる ぜんぶsValidatorでいい！

JSX Renderer Middleware

JSX Renderer Middleware • 個 人 的に好きなミドルウェア • JSXを扱う時に`c.render`の挙動を簡単に定義できる

c.render / c.setRenderer 「コンテンツを受け取ってResponseを返す」を定義する c.renderでコンテンツを渡す Responseなんで直接返せる

JSX Renderer MiddlewareはJSXをコンテンツとして扱うのに便利

`children`以外にも渡せる

Context Storage Middleware

Context Storage Middleware • `Context`オブジェクトにグローバルでアクセスすることができるようになる • `AsyncLocalStorage`ってのを使っている • `Context`へはハンドラかミドルウェア内じゃないアクセスできなかった • グローバルに定義するのは基本的にしない • Request => Handler => Responseの中で`Context`を扱うのが基本 • AsyncLocalStorageはそこで使えるストレージを提供する

`Context`へのアクセス

`Context`にグローバルでアクセスできる

Server-Timing Middleware

Server-Timing Middleware • パフォーマンスをServer-Timingレスポンスヘッダに書き出す

No content

ChromeのDevToolsで 見 れるの便利

esbuild Transpiler Middleware

esbuild Transpiler Middleware • 3rd-party • TypeScript/TSXなどをアクセスが来たらビルドして返却する • バンドルしなくて済む！ • 毎回ビルドしなくてはいけないがうまくキャッシュさせることもできそう • wasmのesbuildを使っている

No content

以上！

おもしろいミドルウェアでした • Standard Schema Validator Middleware • JSX Renderer Middleware • Context Storage Middleware • Server-Timing Middleware • esbuild Transpiler Middleware

おしまい