Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

🔥 Hono v4 やってみた

Avatar for circled9 circled9
February 23, 2024
Technology
1
210

🔥 Hono v4 やってみた

Avatar for circled9

circled9

February 23, 2024
Tweet

More Decks by circled9

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

Other Decks in Technology

See All in Technology
Databricksによるエージェント構築
Avatar for Takaaki Yayoi taka_aki
1
120
原理から解き明かす AIと人間の成長 - Progate BAR
Avatar for Teba_eleven teba_eleven
2
300
Bill One 開発エンジニア 紹介資料
Avatar for Sansan, Inc. sansan33
PRO
4
16k
pmconf2025 - データを活用し「価値」へ繋げる
Avatar for Emy - Emiko Yoshihara glorypulse
0
460
Security Diaries of an Open Source IAM
Avatar for Alexander Schwartz ahus1
0
120
Introduction to Sansan, inc / Sansan Global Development Center, Inc.
Avatar for Sansan, Inc. sansan33
PRO
0
2.9k
M5UnifiedとPicoRubyで楽しむM5シリーズ
Avatar for Katsuhiko Kageyama kishima
0
110
こがヘンだよ！Snowflake?サービス名称へのこだわり
Avatar for タロウ tarotaro0129
0
110
GitLab Duo Agent Platformで実現する“AI駆動・継続的サービス開発”と最新情報のアップデート
Avatar for Taisuke Inoue jeffi7
0
160
ページの可視領域を算出する方法について整理する
Avatar for yamatai12 yamatai1212
0
160
MAP-7thplaceSolution
Avatar for yukichi0403 yukichi0403
2
250
AIにおける自由の追求
Avatar for Shuji Sado shujisado
3
470

Featured

See All Featured
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
Avatar for Dan Newman danielanewman
231
22k
Designing Experiences People Love
Avatar for Jonathan Moore moore
142
24k
4 Signs Your Business is Dying
Avatar for Josh Pigford shpigford
186
22k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
54k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.4k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
91
590k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
80
6.1k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
38
3k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
135
9.6k

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