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
2k
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
63
TypeScriptでDXを上げろ! Hono編
yusukebe
3
770
Honoをフロントエンドで使う 3つのやり方
yusukebe
8
4.5k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
2
360
MCP with Cloudflare Workers
yusukebe
2
400
Remix on Hono on Cloudflare Workers
yusukebe
3
720
僕がつくった48個のWebサービス達
yusukebe
21
18k
Honoの来た道とこれから
yusukebe
20
7.1k
JS RPCを理解する
yusukebe
5
880
Other Decks in Programming
See All in Programming
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
7.3k
フロントエンドのパフォーマンスチューニング
koukimiura
5
2k
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
220
リバースエンジニアリング新時代へ! GhidraとClaude DesktopをMCPで繋ぐ/findy202507
tkmru
3
960
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
320
「App Intent」よくわからんけどすごい!
rinngo0302
1
100
Flutterで備える!Accessibility Nutrition Labels完全ガイド
yuukiw00w
0
170
NPOでのDevinの活用
codeforeveryone
0
900
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
2
21k
効率的な開発手段として VRTを活用する
ishkawa
0
160
PicoRuby on Rails
makicamel
2
140
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
300
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Fireside Chat
paigeccino
37
3.5k
Scaling GitHub
holman
460
140k
Rails Girls Zürich Keynote
gr2m
95
14k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Statistics for Hackers
jakevdp
799
220k
Typedesign – Prime Four
hannesfritz
42
2.7k
What's in a price? How to price your products and services
michaelherold
246
12k
Optimizing for Happiness
mojombo
379
70k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
340
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ͱҧ ͏ΞϓϩʔνͰ໘ന͍
ͬͯΈ͍ͯͩ͘͞
͓͠·͍