Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Honoのおもしろいミドルウェアをみてみよう
Search
Yusuke Wada
February 15, 2025
Programming
2
370
Honoのおもしろいミドルウェアをみてみよう
湘.なんか #2
Yusuke Wada / 2025—02-15
Yusuke Wada
February 15, 2025
Tweet
Share
More Decks by Yusuke Wada
See All by Yusuke Wada
AI Ramen Fight
yusukebe
0
130
TypeScriptでDXを上げろ! Hono編
yusukebe
4
950
Honoをフロントエンドで使う 3つのやり方
yusukebe
8
4.7k
MCP with Cloudflare Workers
yusukebe
2
410
Remix on Hono on Cloudflare Workers
yusukebe
3
740
僕がつくった48個のWebサービス達
yusukebe
22
18k
Honoの来た道とこれから
yusukebe
20
7.1k
JS RPCを理解する
yusukebe
5
890
Honoとhtmx
yusukebe
6
2.1k
Other Decks in Programming
See All in Programming
What's new in Adaptive Android development
fornewid
0
140
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
240
構文解析器入門
ydah
7
2k
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
950
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
340
iOS開発スターターキットの作り方
akidon0000
0
240
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
0
500
QA x AIエコシステム段階構築作戦
osu
0
250
新しいモバイルアプリ勉強会(仮)について
uetyo
1
250
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
180
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
330
Featured
See All Featured
Building Adaptive Systems
keathley
43
2.7k
Code Reviewing Like a Champion
maltzj
524
40k
Side Projects
sachag
455
43k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
Making the Leap to Tech Lead
cromwellryan
134
9.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
A designer walks into a library…
pauljervisheath
207
24k
Music & Morning Musume
bryan
46
6.7k
Into the Great Unknown - MozCon
thekraken
40
2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Statistics for Hackers
jakevdp
799
220k
Transcript
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レスポンスヘッダに書き出す
None
ChromeのDevToolsで 見 れるの便利
esbuild Transpiler Middleware
esbuild Transpiler Middleware • 3rd-party • TypeScript/TSXなどをアクセスが来たらビルドして返却する • バンドルしなくて済む! •
毎回ビルドしなくてはいけないがうまくキャッシュさせることもできそう • wasmのesbuildを使っている
None
以上!
おもしろいミドルウェアでした • Standard Schema Validator Middleware • JSX Renderer Middleware
• Context Storage Middleware • Server-Timing Middleware • esbuild Transpiler Middleware
おしまい