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

🔥 Hono v4 やってみた

Avatar for circled9 circled9
February 23, 2024
Technology
1
190

🔥 Hono v4 やってみた

Avatar for circled9

circled9

February 23, 2024
Tweet

More Decks by circled9

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

Other Decks in Technology

See All in Technology
Delegating the chores of authenticating users to Keycloak
Avatar for Alexander Schwartz ahus1
0
130
ビズリーチが挑む メトリクスを活用した技術的負債の解消 / dev-productivity-con2025
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
0
310
あなたの声を届けよう！ 女性エンジニア登壇の意義とアウトプット実践ガイド #wttjp / Call for Your Voice
Avatar for kondoyuko kondoyuko
4
510
Node-RED × MCP 勉強会 vol.1
Avatar for 1ft-seabass 1ftseabass
PRO
0
180
Geminiとv0による高速プロトタイピング
Avatar for Shinya Masadome（東京AI祭） shinya337
0
200
SpringBoot x TestContainerで実現するポータブル自動結合テスト
Avatar for 株式会社出前館 demaecan
0
120
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
Avatar for mm-matsuda mmmatsuda
0
240
ハッカソン by 生成AIハッカソンvol.05
Avatar for 1ft-seabass 1ftseabass
PRO
0
150
自律的なスケーリング手法FASTにおけるVPoEとしてのアカウンタビリティ / dev-productivity-con-2025
Avatar for Yoshiki Iida yoshikiiida
0
760
製造業からパッケージ製品まで、あらゆる領域をカバー！生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
Avatar for SHIFT EVOLVE shift_evolve
PRO
1
160
解析の定理証明実践＠Lean 4
Avatar for H Segawa dec9ue
1
200
なぜ私はいま、ここにいるのか？ #もがく中堅デザイナー #プロダクトデザイナー
Avatar for 弁護士ドットコム bengo4com
0
1.3k

Featured

See All Featured
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
614
210k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
1
390
Fantastic passwords and where to find them - at NoRuKo
Avatar for Phil Nash philnash
51
3.3k
ReactJS: Keep Simple. Everything can be a component!
Avatar for Pedro Nauck pedronauck
667
120k
Imperfection Machines: The Place of Print at Facebook
Avatar for Scott Boms scottboms
267
13k
Documentation Writing (for coders)
Avatar for Carmen Chung carmenintech
72
4.9k
Faster Mobile Websites
Avatar for Dean Hume deanohume
307
31k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
184
22k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
694
190k

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