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

🔥 Hono v4 やってみた

Avatar for circled9 circled9
February 23, 2024
Technology
250
1

🔥 Hono v4 やってみた

Avatar for circled9

circled9

February 23, 2024

More Decks by circled9

See All by circled9
キースイッチ入門
Avatar for circled9 circled9
0
120
CloudflareのAI関連の機能さわってみた
Avatar for circled9 circled9
0
970
0.0.0.0 day
Avatar for circled9 circled9
0
140
小数の丸め誤差の話
Avatar for circled9 circled9
0
160
数値の文字列をパースしよう
Avatar for circled9 circled9
0
290
JetBrains AI Assistant を試してみた
Avatar for circled9 circled9
1
610
Fresh
Avatar for circled9 circled9
0
280
React Hooks 勉強会 vol.3
Avatar for circled9 circled9
2
470
JSON.stringify()
Avatar for circled9 circled9
2
510

Other Decks in Technology

See All in Technology
20260817_生成AIの動向と中学校・高等学校での活用を考える_v1.00_公開用
Avatar for NobuakiOshiro doradora09
PRO
0
210
2027年のMetricKit
Avatar for Kanta Oikawa kantacky
0
170
ソフトウェアサプライチェーンの構造的リスクとコンテナ環境の保護
Avatar for Kyohei Mizumoto kyohmizu
5
890
猫付きpingコマンドを自作
Avatar for uyuki uyuki234
0
300
自宅NWにISR4331を導入してみた話
Avatar for okaits#7534 okaits
0
120
:syncing_time:
Avatar for sksat sksat
2
630
AIで変わるエンジニアの働き方（仮）
Avatar for naoinaoi naoinaoi
0
480
What's new in Go 1.27?
Avatar for Koya IWAMURA ciarana
0
380
2026-08-15 JAWS-UG 茨城 #16 Secrets ManagerにおけるSecret値の管理(Terraformの場合) / Secrets Manager Secrets
Avatar for SUZUKI Masashi masasuzu
0
570
8bit CPU 2026
Avatar for KOBA789 koba789
7
2.7k
AI-DLC実践録_フルサイクル開発への挑戦
Avatar for Miyuki miyuc
0
400
AI開発に用いられるHPC技術について
Avatar for GPU UNITE gpuunite_official
0
260

Featured

See All Featured
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.2k
Leo the Paperboy
Avatar for Maya Tellez mayatellez
8
2.2k
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.7k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
The Art of Delivering Value - GDevCon NA Keynote
Avatar for David Neal reverentgeek
16
2.1k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
380
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
61
10k
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
350
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
97
6.8k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
304
22k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
3k

Transcript

  1. 🔥 Hono v4 ΍ͬͯΈͨ Niigata 5min Tech #5 in Nagaoka

    @circled9 1

  2. ࣗݾ঺հ @circled9 দҪɹਖ਼ࢤʢMatsui Masashiʣ גࣜձࣾϞχΫϧ ࣾ಺޲͚ͷࡒ຿γεςϜ࡞ͬͯ·͢ 60%ΩʔϘʔυ͓͡͞Μ 2

  3. ࠓ೔࿩͍ͨ͜͠ͱ • Hono͸͍͍ͧͱ͍͏࿩ • v4Ͱ৽͘͠૿͑ͨػೳͷ࿩ • ࣮ࡍʹࢼͨ͠ײ૝ 3

  4. 🔥 Hono 4

  5. 🔥 Hono is Կ ? • JavaScriptͷWebϑϨʔϜϫʔΫ • "Hono -

    Ultrafast web framework for the Edges" 5

  6. 🔥 Hono is ... • 🚀 Ultrafast & Lightweight •

    🌍 Multi-runtime • 🔋 Batteries Included • 😃 Delightful DX 6

  7. 🚀 Ultrafast & Lightweight • ΊͬͪΌ଎͍ɺ͍ͦͯܰ͠ • "The router RegExpRouter

    is really fast. Not using linear loops. Fast." • "The hono/tiny preset is under 14kB. Hono has zero dependencies and uses only the Web Standard API." 7

  8. 🌍 Multi-runtime • େମͲ͜Ͱ΋ಈ͘ • "Works on Cloud fl are

    Workers, Fastly Compute, Deno, Bun, AWS Lambda, or Node.js. The same code runs on all platforms." 8

  9. 🔋 Batteries Included • ඞཁͳ΋ͷ͸େମ͋Δ • "Hono has built-in middleware,

    custom middleware, third-party middleware, and helpers. Batteries included." 9

  10. 😃 Delightful DX • TypeScriptͰ΋όονϦ • "Super clean APIs. First-class

    TypeScript support. Now, we've got "Types"." 10

  11. 💪 ͦΕҎ֎ͷಛ௃ 11

  12. JSX const View = () => { return ( <html>

    <body> <h1>Hello Hono!</h1> </body> </html> ) } app.get('/page', (c) => { return c.html(<View />) }) 12

  13. hono/css const buttonClass = css` background-color: #fff; &:hover { background-color:

    red; } ` 13

  14. 🔥 Hono v4 14

  15. 🔥 Hono v4 • Static Site Generation • Client Components

    • File-based Routing 15

  16. Static Site Generation • ੩తͳWebϖʔδΛॻ͖ग़ͤΔΑ͏ʹͳͬͨ • viteΛ࢖ͬͯΊͬͪΌշదʹ։ൃͰ͖Δ • Β͍͠ɺ·ͩࢼ͍ͯ͠ͳ͍ 16

  17. Client Components • hono/jsx͕ΫϥΠΞϯτͰ΋ಈ͘Α͏ʹͳͬͨ • ΫϥΠΞϯτͰಈ͘͠hooks΋࢖͑Δ • ReactΛ૊ΈࠐΜͩͷͰ͸ͳࣗ͘લ࣮૷Β͍͠ʢʂʁʣ • ΊͪΌͪ͘Ό͍ܰ

    17

  18. εήʔʂ 18

  19. File-based Routing • HonoXͱ͍͏ผύοέʔδ • ϑΝΠϧͷஔ͖৔ॴΛݩʹΑ͠ͳʹϧʔςΟϯάͯ͘͠ΕΔ • ϋΠυϨʔγϣϯ͢Δɾ͠ͳ͍Λ෼͚ΒΕΔ 19

  20. ✅ ΍ͬͯΈͨ 20

  21. ✅ ΍ͬͯΈͨ • TodoAppΛ࡞ͬͯΈͨ • DB΁ͷอଘ͸໘౗ͳͷͰׂѪɺϝϞϦ্ʹอଘ͢Δ͚ͩ 21

  22. ૉࡐͷຯΛੜ͔ͨ͠TodoApp 22

  23. ✅ Ͱ͖ͨʂ 23

  24. ✨ վળͯ͠ΈΔ • ݟͨ໨͕ΠϚΠνͳͷͰhono/cssͰ͖Ε͍ʹ͢Δ • νΣοΫϘοΫεͷ࣮૷ΛαϘͬͯͨͷͰɺνΣοΫͨ͠Βอଘ͢Δ Α͏ʹ͢Δ 24

  25. ✨ Ͱ͖ͨʂ 25

  26. γϟϨΦπͳTodoApp 26

  27. 😭 ϑΥʔϜΘ͔ΒΜ໰୊ • ϑΥʔϜΛ࢖͏ػձ͕গͳ͔ͬͨͷͰϑΥʔϜͷ͜ͱ͕Θ͔Βͳ͍ • PUT/DELETEͰ͖ͳ͍ͷʁ • νΣοΫϘοΫεԡͨ࣌͠ʹformΛૹ৴͢ΔͷͲ͏͢Μͷʁ • etc...

    27

  28. ൓ল • HTMLΛษڧ͠௚͢͜ͱʹͨ͠ • جૅతͳ஌͕͓ࣝΖ͔ͦʹͳͬͯ ͍ΔͷΛײͨ͡ • HTML5ͷࠒ͔Β஌͕ࣝࢭ·ͬͯ ͍Δͷ΋ײͨ͡ 28

  29. 📚 ·ͱΊ • Hono͸͍͍ͧ • ଎͍ɺ͍ܰɺΘ͔Γ΍͍͢ • Web Standardͱͯ΋େࣄ 29