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

🔥 Hono v4 やってみた

Avatar for circled9 circled9
February 23, 2024
Technology
1
200

🔥 Hono v4 やってみた

Avatar for circled9

circled9

February 23, 2024
Tweet

More Decks by circled9

See All by circled9
キースイッチ入門
Avatar for circled9 circled9
0
82
CloudflareのAI関連の機能さわってみた
Avatar for circled9 circled9
0
700
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
540
Fresh
Avatar for circled9 circled9
0
260
React Hooks 勉強会 vol.3
Avatar for circled9 circled9
2
440
JSON.stringify()
Avatar for circled9 circled9
2
500

Other Decks in Technology

See All in Technology
from Sakichi Toyoda to Agile
Avatar for Yasunobu Kawaguchi kawaguti
PRO
1
100
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
Avatar for Ken'ichirou Kimura kenichirokimura
3
170
ガバメントクラウド（AWS）へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
Avatar for SHIFT EVOLVE shift_evolve
PRO
2
170
空間を設計する力を考える / 20251004 Naoki Takahashi
Avatar for SHIFT EVOLVE shift_evolve
PRO
4
440
動画データのポテンシャルを引き出す！ Databricks と AI活用への奮闘記（現在進行形）
Avatar for Databricks Japan databricksjapan
0
170
スタートアップにおけるこれからの「データ整備」
Avatar for ShoMaekawa/ウィル shomaekawa
2
330
​Vibe Coding Year in Review. From Karpathy to Real-World Agents by Niels Rolland, CEO Paatch
Avatar for Strapi vcoisne
0
110
The Cake Is a Lie... And So Is Your Login’s Accessibility
Avatar for Ramona Schwering leichteckig
0
100
AI時代だからこそ考える、僕らが本当につくりたいスクラムチーム / A Scrum Team we really want to create in this AI era
Avatar for TAKAKING22 takaking22
7
3.9k
ガバメントクラウドの概要と自治体事例（名古屋市）
Avatar for 高橋広和 techniczna
2
200
[Keynote] What do you need to know about DevEx in 2025
Avatar for Salaboy salaboy
0
130
o11yで育てる、強い内製開発組織
Avatar for _awache _awache
3
130

Featured

See All Featured
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
9.9k
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
49
14k
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
54
3k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
Avatar for soudai sone soudai
PRO
189
55k
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
37
2.9k
KATA
Avatar for Megan Lloyd mclloyd
32
15k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
Docker and Python
Avatar for Tania Allard trallard
46
3.6k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
3.1k
Art, The Web, and Tiny UX
Avatar for Lynn Fisher lynnandtonic
303
21k

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