Honoのおもしろいミドルウェアをみてみよう

湘.なんか #2
Yusuke Wada / 2025—02-15

Transcript

1. Yusuke Wada / 2025 — 02-15 Honoのおもしろいミドルウェア をみてみよう 湘.なんか #2
2. Honoのおもしろいミドルウェアをみてみよう • その名の通りHonoのおもしろいミドルウェアをピックアップしてみます • おもしろいは個 人 的主観です
3. Honoのミドルウェア • Custom Middleware - 自 分で定義する • Built-in Middleware - `hono`パッケージに同封されている • 外部のライブラリに依存しない • 3rd-party Middleware - `hono`パッケージには 入 っていない • 外部のライブラリに依存していい • `@hono`ネームスペース(例:`@hono/hello`)に置かれる場合がある
4. 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
5. 3rd-party Middleware Webサイトに掲載されているものだけで34個ある
6. ミドルウェアの使い 方
7. ではいってみよう
8. Standard Scheme Validator Middleware
9. Standard Scheme Validator Middleware • 3rd-party Middleware • Standard Schema Specに準拠したバリデータ • Standard Schema？ • TypeScript/JavaScriptのいくつかあるバリデータの標準インター フェースをつくるプロジェクト • Zod / Valibot / ArkType などが対応している • これまであったZod Validator / Valibot Validator / ArkType Validatorの代わりになり、ひとつのミドルウェアで全バリデータに対応で きる
10. 使い 方 Zodの場合
11. 使い 方 全部使ってみる ぜんぶsValidatorでいい！
12. JSX Renderer Middleware
13. JSX Renderer Middleware • 個 人 的に好きなミドルウェア • JSXを扱う時に`c.render`の挙動を簡単に定義できる
14. c.render / c.setRenderer 「コンテンツを受け取ってResponseを返す」を定義する c.renderでコンテンツを渡す Responseなんで直接返せる
15. JSX Renderer MiddlewareはJSXをコンテンツとして扱うのに便利
16. `children`以外にも渡せる
17. Context Storage Middleware
18. Context Storage Middleware • `Context`オブジェクトにグローバルでアクセスすることができるようになる • `AsyncLocalStorage`ってのを使っている • `Context`へはハンドラかミドルウェア内じゃないアクセスできなかった • グローバルに定義するのは基本的にしない • Request => Handler => Responseの中で`Context`を扱うのが基本 • AsyncLocalStorageはそこで使えるストレージを提供する
19. `Context`へのアクセス
20. `Context`にグローバルでアクセスできる
21. Server-Timing Middleware
22. Server-Timing Middleware • パフォーマンスをServer-Timingレスポンスヘッダに書き出す
24. ChromeのDevToolsで 見 れるの便利
25. esbuild Transpiler Middleware
26. esbuild Transpiler Middleware • 3rd-party • TypeScript/TSXなどをアクセスが来たらビルドして返却する • バンドルしなくて済む！ • 毎回ビルドしなくてはいけないがうまくキャッシュさせることもできそう • wasmのesbuildを使っている
28. 以上！
29. おもしろいミドルウェアでした • Standard Schema Validator Middleware • JSX Renderer Middleware • Context Storage Middleware • Server-Timing Middleware • esbuild Transpiler Middleware
30. おしまい