Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

🔥 Hono 4

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

🚀 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

Slide 8

Slide 8 text

🌍 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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

💪 ͦΕҎ֎ͷಛ௃ 11

Slide 12

Slide 12 text

JSX const View = () => { return (

Hello Hono!

) } app.get('/page', (c) => { return c.html() }) 12

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

🔥 Hono v4 14

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

εήʔʂ 18

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

✅ ΍ͬͯΈͨ 20

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

ૉࡐͷຯΛੜ͔ͨ͠TodoApp 22

Slide 23

Slide 23 text

✅ Ͱ͖ͨʂ 23

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

✨ Ͱ͖ͨʂ 25

Slide 26

Slide 26 text

γϟϨΦπͳTodoApp 26

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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