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
360
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
93
TypeScriptでDXを上げろ! Hono編
yusukebe
3
830
Honoをフロントエンドで使う 3つのやり方
yusukebe
8
4.5k
MCP with Cloudflare Workers
yusukebe
2
410
Remix on Hono on Cloudflare Workers
yusukebe
3
730
僕がつくった48個のWebサービス達
yusukebe
21
18k
Honoの来た道とこれから
yusukebe
20
7.1k
JS RPCを理解する
yusukebe
5
880
Honoとhtmx
yusukebe
6
2k
Other Decks in Programming
See All in Programming
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
1
210
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
2
230
コーディングエージェント概観(2025/07)
itsuki_t88
0
100
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1k
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
37
13k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
130
Android 16KBページサイズ対応をはじめからていねいに
mine2424
0
530
PipeCDのプラグイン化で目指すところ
warashi
1
310
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
180
おやつのお供はお決まりですか?@WWDC25 Recap -Japan-\(region).swift
shingangan
0
150
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
12
7.3k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
marcoroth
2
750
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Bash Introduction
62gerente
613
210k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Balancing Empowerment & Direction
lara
1
480
Making the Leap to Tech Lead
cromwellryan
134
9.4k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Git: the NoSQL Database
bkeepers
PRO
431
65k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
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
おしまい