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とhtmx
Search
Yusuke Wada
March 15, 2024
Programming
6
2.1k
Honoとhtmx
Yusuke Wada - 2024/3/15
Ya8 2024 - ヤパチー 令和六年最新版(仮)
Yusuke Wada
March 15, 2024
Tweet
Share
More Decks by Yusuke Wada
See All by Yusuke Wada
AI Ramen Fight
yusukebe
0
120
TypeScriptでDXを上げろ! Hono編
yusukebe
3
870
Honoをフロントエンドで使う 3つのやり方
yusukebe
8
4.6k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
2
360
MCP with Cloudflare Workers
yusukebe
2
410
Remix on Hono on Cloudflare Workers
yusukebe
3
730
僕がつくった48個のWebサービス達
yusukebe
22
18k
Honoの来た道とこれから
yusukebe
20
7.1k
JS RPCを理解する
yusukebe
5
880
Other Decks in Programming
See All in Programming
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
4
1.3k
[DevinMeetupTokyo2025] コード書かせないDevinの使い方
takumiyoshikawa
2
210
「次に何を学べばいいか分からない」あなたへ──若手エンジニアのための学習地図
panda_program
3
660
Strands Agents で実現する名刺解析アーキテクチャ
omiya0555
1
110
NEWT Backend Evolution
xpromx
1
160
What's new in Adaptive Android development
fornewid
0
120
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
710
[SRE NEXT] 複雑なシステムにおけるUser Journey SLOの導入
yakenji
0
810
AIともっと楽するE2Eテスト
myohei
9
3.2k
Streamlitで実現できるようになったこと、実現してくれたこと
ayumu_yamaguchi
2
230
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
CDK引数設計道場100本ノック
badmintoncryer
2
580
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
4 Signs Your Business is Dying
shpigford
184
22k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
720
How GitHub (no longer) Works
holman
314
140k
Designing for humans not robots
tammielis
253
25k
Thoughts on Productivity
jonyablonski
69
4.8k
Making Projects Easy
brettharned
117
6.3k
Adopting Sorbet at Scale
ufuk
77
9.5k
Rails Girls Zürich Keynote
gr2m
95
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Transcript
Honoͱhtmx Yusuke Wada - 2024/3/15 Ya8 2024 - Ϡύνʔ ྩ࠷৽൛(Ծ)
Honoͱhtmxʹ͍ͭͯ͠·͢ 1. αʔόʔαΠυJSXʹ͍ͭͯ 2. Hono+htmxελοΫʹ͍ͭͯ 3. HonoͷClient Componentsʹ͍ͭͯ
1. αʔόʔαΠυJSXʹ͍ͭͯ
HonoʹϏϧυΠϯͷJSX͕͋Δ • `hono/jsx` • ࠷ۙ·ͰαʔόʔαΠυͷΈͩͬͨ • React͕ϑϩϯτΤϯυ͔ΒͰ͖ͯͨͷͰαʔόʔαΠυ͚͍ͩ͠ͱࢥ͏ • ͜ͷJSX͕htmxͱ૬ੑ͕͍͍ͱऔΓࠫଡ͞Ε͍ͯΔ
hono/jsxͷྺ࢙1 • ࠷ॳHTMLग़ྗͰMustache͕͋ͬͨ
hono/jsxͷྺ࢙2 • ଞͷςϯϓϨʔτΤϯδϯʢHandlebarsɺejsͱ͔ʣΛೖΕ͔ͨͬͨ • ͔͠͠eval͕͑ͳ͍ ← Τοδɺͱ͍͏͔Cloud fl are Workersͱ૬ੑ͕ѱ͍
• micro-template.js Λ͏ͱ͢Δ…
hono/jsxͷྺ࢙3 • @usualoma͞Μ͕JSXΛఏҊ
hono/jsxͷྺ࢙4 • 2022-06-05ੜʂ • 2022-07-10ʹMustache Middleware͕ഇࢭ
hono/jsxͷྺ࢙5 • ͦͷࠒ͔ΒHotwireͷΛ͍ͩͯ͠Δ • ʮJSXͷSSRͱHotwireͷΘͤΑͦ͞͏ɻHono+JSXReactΑΓRailsͬΆ͍ ͔ΒɺHotwire૬ੑ͍͍ͱࢥ͏ʯ
None
`hono/jsx` • JSXJavaScriptؔͷγϯλοΫεγϡΨʔ • jsx(component, props, children) Λݺͼग़͢ • `hono/jsx`stringΛDOMͰͳ͘stringΛग़ྗ͢Δ
• ReactͷrenderToString()૬͕ͳͯ͘จࣈྻʹͳΔ • ͳͷͰԼͷίʔυಈ͘
͜Ε͚ͩͰॻ͚Δ
ίϯϙʔωϯτॻ͚ΔͷͰ͍͍͍͚ͩͨΔ
`hono/jsx`ศརʂ
2. Hono+htmxελοΫʹ͍ͭͯ
htmx͕Γ্͕ΔͱHono+htmxʹ͕ • ελοΫʹͳΔ ← ࠷ۙͨΒͱελοΫʹ͕ͨ͠Δ • ྫ:T3 Stack = Next.jsɺtRPCɺTailwind
CSSɺTypeScript… • HonoʢಛʹJSX͕͋Δ͔ΒʣͱhtmxͷελοΫ
6࣌ؒલʹʮCHHATʯͳΔελοΫʂ
CloudflareͱͷελοΫͷݩ
ϒϩάॻ͍ͨʮHono + htmx + Cloudflare is a new stackʯ •
ελοΫ • Hono + ΈࠐΈJSX • htmx • Zod • Tailwind CSS • Cloud fl are Workers • Cloud fl are D1
Zod + Zod Validator͍͍Α
͜ͷTODOΞϓϦ͕100ߦͰͰ͖Δ
MPAͰΤοδͰಈ͔͍ͤͷͰSPAΈ͍ͨͳಈ͖͢Δ
ΫϥΠΞϯτ͕ඞཁͳ͍ • ΫϥΠΞϯτϏϧυ͕ඞཁͳ͍ • wrangler/bun/denoίϚϯυ͚ͩͰ͍͚Δʂ • ΫϥΠΞϯτΛؚΊΔͱͲ͏ͯ͠Ϗϧυ͠ͳ͍ͱ͍͚ͳ͍ • ΊͪΌͪ͘Όϙʔλϒϧʂ
Hono+htmx ͍͍Αʂ
3. HonoͷClient Componentsʹ ͍ͭͯ
htmx͍͍Μ͚ͩͲ… • ઌఔͷBlogͭ͘Δͷʹۤ࿑ͨ͠ • ঢ়ଶΛ࣋ͭͷ͕Ͱ͖ͳ͍ => Alpine.jsΛ͏͜ͱʹͳΔ • αʔόʔαΠυJSXͱૉͷJavaScript͕ΊͪΌͪ͘Ό૬ੑѱ͍ •
ΠϯϥΠϯͰॻ͘͜ͱʹͳΔɺͦΕ͔֎෦ϑΝΠϧ
͜͏͍͏ͷ͕ਏ͍
HonoͷJSXͰΫϥΠΞϯτΛαϙʔτ • Client Components => `hono/jsx/dom` • useState/useE ff ect/useRef/useͳͲReactޓͷϑοΫΛࡌ
• αʔόʔαΠυΘͣͱ;ͭʔʹΫϥΠΞϯτ͚ͩͰಈ͘
DOMʹϋΠυϨʔτͰ͖Δ
HonoXͱ͏ͱڧྗ • HonoXBYOR͚ͩͲσϑΥϧτhono/jsx • IslandsίϯϙʔωϯτΛSSR/ϋΠυϨʔτ͢Δ • αʔόʔαΠυͰSSRͯ͠ɺΫϥΠΞϯτͷDOM͕ೖɺΠϯλϥΫςΟϒ ʹͳΔ • ඞཁͳϖʔδ͚͔ͩ͠JavaScript͕৴͞Εͳ͍
• SEOʹ༗རͩ͠ɺͪΒ͖͕ͭͳ͍
Honoͷ߹ αʔόαΠυͱΫϥΠΞϯτ͕͍ۙͱ ͞Βʹਪ͠ϙΠϯτ͕͋ͬͨ
RPC-mode • αʔόʔͱΫϥΠΞϯτؒͰAPIͷSpecΛTypeScriptͷܕͱͯ͠ڞ༗͢Δ • Islandsͱ͍͑ͲɺΫϥΠΞϯτ<=>αʔόʔͷAPIݺͼग़͠ൃੜ͢Δ • ͦ͜ͰHono RPCͰ͢Α
Next.jsͷதͰHono • ࣮Next.jsͷAPIͷதͰHono͕ΘΕΔέʔε͕͋Δ • ͦΕ͜ͷRPC-modeΛ͏ͨΊɺಉ͡Α͏ͳ͜ͱ͕HonoXͰΑΓ૬ੑྑ͘ Ͱ͖Δ ͓·ͪΐͬͱ͓͍ͱ͍ͯਪ͠͞Ε͍ͯΔ
app/routes/index.tsx • HonoXͷϧʔτʹClassical appॻ͚Δ
app/islands/todo.tsx • `hono/client`Λ͏
`hono/jsx/dom` + HonoX ΘΓͱ͍͍
ࠓߟ͍͑ͯΔ͜ͱ • ͱΓ͋͑ͣαεςʔλεͳͷͰυοάϑʔσΟϯά͢Δ • Islands/Client Components/ͪΐͬͱෆ҆ఆ͔͚ͩͲSSR҆ఆ͍ͯ͠Δ • SSGϒϩάΛͭ͘Δͷʹศརʢhono/jsx/dom͡Όͳ͍͚Ͳʣ
package by feature • σΟϨΫτϦʹ͢Δ͔͓͍ͱ͍ͯྑͦ͞͏ʢͳؾ͕ͯ͠Δʣ
Islands͚ͩͰۙ͘ʹ͋Δͱ͍͍͢ • ͜ΜͳͷͲ͏ͩΖ͏͔
Α͍͖ͯ͘͠· ͢
·ͱΊ 1. αʔόʔαΠυJSXʹ͍ͭͯ 2. Hono+htmxελοΫʹ͍ͭͯ 3. HonoͷClient Componentsʹ͍ͭͯ React/Next.jsͱҧ ͏ΞϓϩʔνͰ໘ന͍
ͬͯΈ͍ͯͩ͘͞
͓͠·͍