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
1.9k
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
Honoをフロントエンドで使う 3つのやり方
yusukebe
8
3.7k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
2
260
MCP with Cloudflare Workers
yusukebe
2
340
Remix on Hono on Cloudflare Workers
yusukebe
3
600
僕がつくった48個のWebサービス達
yusukebe
21
18k
Honoの来た道とこれから
yusukebe
20
5.2k
JS RPCを理解する
yusukebe
5
820
Cloudflare Workersの環境を再現することについて
yusukebe
7
1.1k
Hono v4
yusukebe
11
5.3k
Other Decks in Programming
See All in Programming
ベクトル検索システムの気持ち
monochromegane
18
5.4k
CQRS+ES勉強会#1
rechellatek
0
370
Gunma.web #55
tinykitten
0
120
私の愛したLaravel 〜レールを超えたその先へ〜
kentaroutakeda
11
2.9k
RailsでCQRS/ESをやってみたきづき
suzukimar
2
1.4k
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.2k
小さく段階的リリースすることで深夜メンテを回避する
mkmk884
2
110
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
290
コンテナでLambdaをデプロイするときに知っておきたかったこと
_takahash
0
110
PromptyによるAI開発入門
ymd65536
1
330
プログラミング教育のコスパの話
superkinoko
0
110
複数ドメインに散らばってしまった画像…! 運用中のPHPアプリに後からCDNを導入する…!
suguruooki
0
370
Featured
See All Featured
A Philosophy of Restraint
colly
203
16k
Documentation Writing (for coders)
carmenintech
69
4.7k
Code Review Best Practice
trishagee
67
18k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Building Adaptive Systems
keathley
40
2.4k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
101
18k
What's in a price? How to price your products and services
michaelherold
244
12k
Unsuck your backbone
ammeep
669
57k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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ͱҧ ͏ΞϓϩʔνͰ໘ന͍
ͬͯΈ͍ͯͩ͘͞
͓͠·͍