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
340
Honoのおもしろいミドルウェアをみてみよう
湘.なんか #2
Yusuke Wada / 2025—02-15
Yusuke Wada
February 15, 2025
Tweet
Share
More Decks by Yusuke Wada
See All by Yusuke Wada
Honoをフロントエンドで使う 3つのやり方
yusukebe
8
4.3k
MCP with Cloudflare Workers
yusukebe
2
390
Remix on Hono on Cloudflare Workers
yusukebe
3
700
僕がつくった48個のWebサービス達
yusukebe
21
18k
Honoの来た道とこれから
yusukebe
20
5.4k
JS RPCを理解する
yusukebe
5
870
Honoとhtmx
yusukebe
6
2k
Cloudflare Workersの環境を再現することについて
yusukebe
7
1.1k
Hono v4
yusukebe
11
5.5k
Other Decks in Programming
See All in Programming
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
130
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
700
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
shimabox
2
370
童醫院敏捷轉型的實踐經驗
cclai999
0
200
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
2
280
Rubyでやりたい駆動開発 / Ruby driven development
chobishiba
1
460
関数型まつり2025登壇資料「関数プログラミングと再帰」
taisontsukada
2
850
WebViewの現在地 - SwiftUI時代のWebKit - / The Current State Of WebView
marcy731
0
100
AIプログラマーDevinは PHPerの夢を見るか?
shinyasaita
1
170
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
240
Cursor AI Agentと伴走する アプリケーションの高速リプレイス
daisuketakeda
1
130
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.3k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Become a Pro
speakerdeck
PRO
28
5.4k
Automating Front-end Workflow
addyosmani
1370
200k
Site-Speed That Sticks
csswizardry
10
660
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
940
Build your cross-platform service in a week with App Engine
jlugia
231
18k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
KATA
mclloyd
29
14k
Statistics for Hackers
jakevdp
799
220k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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
おしまい