Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Honoとhtmx

Avatar for Yusuke Wada Yusuke Wada
March 15, 2024
Programming
6
2k

 Honoとhtmx

Yusuke Wada - 2024/3/15
Ya8 2024 - ヤパチー 令和六年最新版(仮)

Avatar for Yusuke Wada

Yusuke Wada

March 15, 2024
Tweet

More Decks by Yusuke Wada

See All by Yusuke Wada
AI Ramen Fight
Avatar for Yusuke Wada yusukebe
0
80
TypeScriptでDXを上げろ！ Hono編
Avatar for Yusuke Wada yusukebe
3
790
Honoをフロントエンドで使う 3つのやり方
Avatar for Yusuke Wada yusukebe
8
4.5k
Honoのおもしろいミドルウェアをみてみよう
Avatar for Yusuke Wada yusukebe
2
360
MCP with Cloudflare Workers
Avatar for Yusuke Wada yusukebe
2
400
Remix on Hono on Cloudflare Workers
Avatar for Yusuke Wada yusukebe
3
720
僕がつくった48個のWebサービス達
Avatar for Yusuke Wada yusukebe
21
18k
Honoの来た道とこれから
Avatar for Yusuke Wada yusukebe
20
7.1k
JS RPCを理解する
Avatar for Yusuke Wada yusukebe
5
880

Other Decks in Programming

See All in Programming
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
Avatar for コドモン開発チーム codmoninc
2
22k
The Modern View Layer Rails Deserves: A Vision For 2025 And Beyond @ RailsConf 2025, Philadelphia, PA
Avatar for Marco Roth marcoroth
2
730
階層化自動テストで開発に機動力を
Avatar for ICKX ickx
0
290
Claude Code派？Gemini CLI派？ みんなで比較LT会！_20250716
Avatar for じゅん junholee
1
610
ふつうの技術スタックでアート作品を作ってみる
Avatar for Akira Yagi akira888
1
1.3k
SQLアンチパターン第2版 データベースプログラミングで陥りがちな失敗とその対策 / Intro to SQL Antipatterns 2nd
Avatar for Takuto Wada twada
PRO
23
6.8k
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
Avatar for uutan1108 ohmori_yusuke
1
130
RailsGirls IZUMO スポンサーLT
Avatar for 16bit_idol 16bitidol
0
200
Hack Claude Code with Claude Code
Avatar for Akihiro Okuno choplin
8
2.6k
Claude Code で Astro blog を Pages から Workers へ移行してみた
Avatar for Kei Kamikawa codehex
0
110
Git Sync を超える！OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
Avatar for Tetsuya Kikuchi tkikuc
4
370
Advanced Micro Frontends: Multi Version/ Framework Scenarios @WAD 2025, Berlin
Avatar for Manfred Steyer manfredsteyer
PRO
0
400

Featured

See All Featured
Side Projects
Avatar for Sacha Greif sachag
455
42k
The Language of Interfaces
Avatar for Des Traynor destraynor
158
25k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
50
5.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
Avatar for Matthew Honnibal honnibal
PRO
21
1.3k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
43
7.6k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1k
Building Applications with DynamoDB
Avatar for Matt Wood mza
95
6.5k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
328
39k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
It's Worth the Effort
Avatar for 3n 3n
185
28k

Transcript

  1. Honoͱhtmx Yusuke Wada - 2024/3/15 Ya8 2024 - Ϡύνʔ ྩ࿨࿡೥࠷৽൛(Ծ)

  2. Honoͱhtmxʹ͍ͭͯ࿩͠·͢ 1. αʔόʔαΠυJSXʹ͍ͭͯ 2. Hono+htmxελοΫʹ͍ͭͯ 3. HonoͷClient Componentsʹ͍ͭͯ

  3. 1. αʔόʔαΠυJSXʹ͍ͭͯ

  4. Honoʹ͸ϏϧυΠϯͷJSX͕͋Δ • `hono/jsx` • ࠷ۙ·ͰαʔόʔαΠυͷΈͩͬͨ • React͕ϑϩϯτΤϯυ͔ΒͰ͖ͯͨͷͰαʔόʔαΠυ͚ͩ͸௝͍͠ͱࢥ͏ • ͜ͷJSX͕htmxͱ૬ੑ͕͍͍ͱऔΓࠫଡ͞Ε͍ͯΔ

  5. hono/jsxͷྺ࢙1 • ࠷ॳ͸HTMLग़ྗͰ͸Mustache͕͋ͬͨ

  6. hono/jsxͷྺ࢙2 • ଞͷςϯϓϨʔτΤϯδϯʢHandlebarsɺejsͱ͔ʣΛೖΕ͔ͨͬͨ • ͔͠͠eval͕࢖͑ͳ͍ ← Τοδɺͱ͍͏͔Cloud fl are Workersͱ૬ੑ͕ѱ͍

    • micro-template.js Λ࢖͏ͱ͢Δ΋…

  7. hono/jsxͷྺ࢙3 • @usualoma͞Μ͕JSXΛఏҊ

  8. hono/jsxͷྺ࢙4 • 2022-06-05஀ੜʂ • 2022-07-10ʹ͸Mustache Middleware͕ഇࢭ

  9. hono/jsxͷྺ࢙5 • ͦͷࠒ͔ΒHotwireͷ࿩୊Λ͍ͩͯ͠Δ • ʮJSXͷSSRͱHotwireͷ૊Θͤ͸Αͦ͞͏ɻHono+JSX͸ReactΑΓRailsͬΆ͍ ͔ΒɺHotwire͸૬ੑ͍͍ͱࢥ͏ʯ

  10. None

  11. `hono/jsx` • JSX͸JavaScriptؔ਺ͷγϯλοΫεγϡΨʔ • jsx(component, props, children) Λݺͼग़͢ • `hono/jsx`͸stringΛDOMͰ͸ͳ͘stringΛग़ྗ͢Δ

    • ReactͷrenderToString()૬౰͕ͳͯ͘΋จࣈྻʹͳΔ • ͳͷͰԼͷίʔυ͸ಈ͘

  12. ͜Ε͚ͩͰॻ͚Δ

  13. ίϯϙʔωϯτ΋ॻ͚ΔͷͰ͍͍͍͚ͩͨΔ

  14. `hono/jsx`ศརʂ

  15. 2. Hono+htmxελοΫʹ͍ͭͯ

  16. htmx͕੝Γ্͕ΔͱHono+htmxʹ஫໨͕ • ελοΫʹͳΔ ← ࠷ۙ͸΍ͨΒͱελοΫʹ͕ͨ͠Δ • ྫ:T3 Stack = Next.jsɺtRPCɺTailwind

    CSSɺTypeScript… • HonoʢಛʹJSX͕͋Δ͔ΒʣͱhtmxͷελοΫ

  17. 6࣌ؒલʹ΋ʮCHHATʯͳΔελοΫʂ

  18. CloudflareͱͷελοΫͷݩ૆

  19. ϒϩάॻ͍ͨʮHono + htmx + Cloudflare is a new stackʯ •

    ελοΫ • Hono + ૊ΈࠐΈJSX • htmx • Zod • Tailwind CSS • Cloud fl are Workers • Cloud fl are D1

  20. Zod + Zod Validator͍͍Α

  21. ͜ͷTODOΞϓϦ͕100ߦͰͰ͖Δ

  22. MPAͰ΋ΤοδͰಈ͔ͤ͹଎͍ͷͰSPAΈ͍ͨͳಈ͖͢Δ

  23. ΫϥΠΞϯτ͕ඞཁͳ͍ • ΫϥΠΞϯτϏϧυ͕ඞཁͳ͍ • wrangler/bun/denoίϚϯυ͚ͩͰ͍͚Δʂ • ΫϥΠΞϯτΛؚΊΔͱͲ͏ͯ͠΋Ϗϧυ͠ͳ͍ͱ͍͚ͳ͍ • ΊͪΌͪ͘Όϙʔλϒϧʂ

  24. Hono+htmx ͍͍Αʂ

  25. 3. HonoͷClient Componentsʹ ͍ͭͯ

  26. htmx͍͍Μ͚ͩͲ… • ઌఔͷBlogͭ͘Δͷʹۤ࿑ͨ͠ • ঢ়ଶΛ࣋ͭͷ͕Ͱ͖ͳ͍ => Alpine.jsΛ࢖͏͜ͱʹͳΔ • αʔόʔαΠυJSXͱૉͷJavaScript͕ΊͪΌͪ͘Ό૬ੑѱ͍ •

    ΠϯϥΠϯͰॻ͘͜ͱʹͳΔɺͦΕ͔֎෦ϑΝΠϧ

  27. ͜͏͍͏ͷ͕ਏ͍

  28. HonoͷJSXͰ΋ΫϥΠΞϯτΛαϙʔτ • Client Components => `hono/jsx/dom` • useState/useE ff ect/useRef/useͳͲReactޓ׵ͷϑοΫΛ౥ࡌ

    • αʔόʔαΠυ࢖Θͣͱ΋;ͭʔʹΫϥΠΞϯτ͚ͩͰ΋ಈ͘

  29. DOMʹϋΠυϨʔτͰ͖Δ

  30. HonoXͱ࢖͏ͱڧྗ • HonoX͸BYOR͚ͩͲσϑΥϧτ͸hono/jsx • IslandsίϯϙʔωϯτΛSSR/ϋΠυϨʔτ͢Δ • αʔόʔαΠυͰSSRͯ͠ɺΫϥΠΞϯτͷDOM͕஫ೖɺΠϯλϥΫςΟϒ ʹͳΔ • ඞཁͳϖʔδ͚͔ͩ͠JavaScript͕഑৴͞Εͳ͍

    • SEOʹ༗རͩ͠ɺͪΒ͖͕ͭͳ͍

  31. Honoͷ৔߹ αʔόαΠυͱΫϥΠΞϯτ͕͍ۙͱ ͞Βʹਪ͠ϙΠϯτ͕͋ͬͨ

  32. RPC-mode • αʔόʔͱΫϥΠΞϯτؒͰAPIͷSpecΛTypeScriptͷܕͱͯ͠ڞ༗͢Δ • Islandsͱ͍͑ͲɺΫϥΠΞϯτ<=>αʔόʔͷAPIݺͼग़͠͸ൃੜ͢Δ • ͦ͜ͰHono RPCͰ͢Α

  33. Next.jsͷதͰHono • ࣮͸Next.jsͷAPIͷதͰHono͕࢖ΘΕΔέʔε͕͋Δ • ͦΕ͸͜ͷRPC-modeΛ࢖͏ͨΊɺಉ͡Α͏ͳ͜ͱ͕HonoXͰΑΓ૬ੑྑ͘ Ͱ͖Δ ͓·؀͸ͪΐͬͱ͓͍ͱ͍ͯ௒ਪ͠͞Ε͍ͯΔ

  34. app/routes/index.tsx • HonoXͷϧʔτʹ͸Classical app΋ॻ͚Δ

  35. app/islands/todo.tsx • `hono/client`Λ࢖͏

  36. `hono/jsx/dom` + HonoX ΘΓͱ͍͍

  37. ࠓߟ͍͑ͯΔ͜ͱ • ͱΓ͋͑ͣαεςʔλεͳͷͰυοάϑʔσΟϯά͢Δ • Islands/Client Components/͸ͪΐͬͱෆ҆ఆ͔΋͚ͩͲSSR͸҆ఆ͍ͯ͠Δ • SSG͸ϒϩάΛͭ͘Δͷʹศརʢhono/jsx/dom͡Όͳ͍͚Ͳʣ

  38. package by feature • σΟϨΫτϦʹ͢Δ͔͸͓͍ͱ͍ͯྑͦ͞͏ʢͳؾ͕ͯ͠Δʣ

  39. Islands͚ͩͰ΋ۙ͘ʹ͋Δͱ࢖͍΍͍͢ • ͜Μͳͷ͸Ͳ͏ͩΖ͏͔

  40. Α͍͖ͯ͘͠· ͢

  41. ·ͱΊ 1. αʔόʔαΠυJSXʹ͍ͭͯ 2. Hono+htmxελοΫʹ͍ͭͯ 3. HonoͷClient Componentsʹ͍ͭͯ React/Next.jsͱ͸ҧ ͏ΞϓϩʔνͰ໘ന͍

  42. ࢖ͬͯΈ͍ͯͩ͘͞

  43. ͓͠·͍