🔥 Hono v4 やってみた

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

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

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

🔥 Hono 4

🔥 Hono is Կ ? • JavaScriptͷWebϑϨʔϜϫʔΫ • "Hono -
Ultrafast web framework for the Edges" 5

🔥 Hono is ... • 🚀 Ultrafast & Lightweight •
🌍 Multi-runtime • 🔋 Batteries Included • 😃 Delightful DX 6

🚀 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

🌍 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

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

😃 Delightful DX • TypeScriptͰ΋όονϦ • "Super clean APIs. First-class
TypeScript support. Now, we've got "Types"." 10

💪 ͦΕҎ֎ͷಛ௃ 11

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

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

🔥 Hono v4 14

🔥 Hono v4 • Static Site Generation • Client Components
• File-based Routing 15

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

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

εήʔʂ 18

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

✅ ΍ͬͯΈͨ 20

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

ૉࡐͷຯΛੜ͔ͨ͠TodoApp 22

✅ Ͱ͖ͨʂ 23

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

✨ Ͱ͖ͨʂ 25

γϟϨΦπͳTodoApp 26

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

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

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

🔥 Hono v4 やってみた

🔥 Hono v4 やってみた

Matsui Masashi

More Decks by Matsui Masashi

Other Decks in Technology

Featured

Transcript

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

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

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

🔥 Hono 4

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

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

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

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

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

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

💪 ͦΕҎ֎ͷಛ௃ 11

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

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

🔥 Hono v4 14

🔥 Hono v4 • Static Site Generation • Client Components

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

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

εήʔʂ 18

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

✅ ΍ͬͯΈͨ 20

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

ૉࡐͷຯΛੜ͔ͨ͠TodoApp 22

✅ Ͱ͖ͨʂ 23

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

✨ Ͱ͖ͨʂ 25

γϟϨΦπͳTodoApp 26

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

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

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