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
420
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時代のUIはどこへ行く?
yusukebe
17
8.8k
速いWebフレームワークを作る
yusukebe
5
1.7k
Honoアップデート 2025年夏
yusukebe
1
930
パスタの技術
yusukebe
1
580
AI Ramen Fight
yusukebe
0
160
TypeScriptでDXを上げろ! Hono編
yusukebe
4
1k
Honoをフロントエンドで使う 3つのやり方
yusukebe
8
4.9k
MCP with Cloudflare Workers
yusukebe
2
420
Remix on Hono on Cloudflare Workers
yusukebe
3
770
Other Decks in Programming
See All in Programming
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
720
Processing Gem ベースの、2D レトロゲームエンジンの開発
tokujiros
2
120
Ruby Parser progress report 2025
yui_knk
1
430
Testing Trophyは叫ばない
toms74209200
0
850
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1.1k
そのAPI、誰のため? Androidライブラリ設計における利用者目線の実践テクニック
mkeeda
2
260
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
250
ソフトウェアテスト徹底指南書の紹介
goyoki
1
150
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
300
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
400
はじめてのMaterial3 Expressive
ym223
2
250
AI Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
200
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Practical Orchestrator
shlominoach
190
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Producing Creativity
orderedlist
PRO
347
40k
Docker and Python
trallard
45
3.6k
Into the Great Unknown - MozCon
thekraken
40
2k
BBQ
matthewcrist
89
9.8k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Documentation Writing (for coders)
carmenintech
74
5k
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
おしまい