Honoとhtmx

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

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͸૬ੑ͍͍ͱࢥ͏ʯ
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. ͓͠·͍