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
390
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アップデート 2025年夏
yusukebe
1
870
パスタの技術
yusukebe
1
530
AI Ramen Fight
yusukebe
0
140
TypeScriptでDXを上げろ! Hono編
yusukebe
4
990
Honoをフロントエンドで使う 3つのやり方
yusukebe
8
4.8k
MCP with Cloudflare Workers
yusukebe
2
420
Remix on Hono on Cloudflare Workers
yusukebe
3
760
僕がつくった48個のWebサービス達
yusukebe
22
18k
Honoの来た道とこれから
yusukebe
20
7.2k
Other Decks in Programming
See All in Programming
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
3
1.7k
AI OCR API on Lambdaを Datadogで可視化してみた
nealle
0
210
為你自己學 Python - 冷知識篇
eddie
1
280
ソフトウェアテスト徹底指南書の紹介
goyoki
1
120
物語を動かす行動"量" #エンジニアニメ
konifar
14
5.6k
Rancher と Terraform
fufuhu
1
130
rage against annotate_predecessor
junk0612
0
140
AIコーディングAgentとの向き合い方
eycjur
0
240
サーバーサイドのビルド時間87倍高速化
plaidtech
PRO
0
670
Langfuseと歩む生成AI活用推進
licux
3
320
AIエージェント開発、DevOps and LLMOps
ymd65536
1
360
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
150
Featured
See All Featured
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Building Applications with DynamoDB
mza
96
6.6k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
284
13k
Bash Introduction
62gerente
614
210k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Embracing the Ebb and Flow
colly
87
4.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
How GitHub (no longer) Works
holman
315
140k
Why Our Code Smells
bkeepers
PRO
339
57k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
A Tale of Four Properties
chriscoyier
160
23k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.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
おしまい