Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
🔥 Hono v4 やってみた
Search
circled9
February 23, 2024
Technology
1
200
🔥 Hono v4 やってみた
circled9
February 23, 2024
Tweet
Share
More Decks by circled9
See All by circled9
キースイッチ入門
circled9
0
80
CloudflareのAI関連の機能さわってみた
circled9
0
680
0.0.0.0 day
circled9
0
110
小数の丸め誤差の話
circled9
0
150
数値の文字列をパースしよう
circled9
0
240
JetBrains AI Assistant を試してみた
circled9
1
540
Fresh
circled9
0
250
React Hooks 勉強会 vol.3
circled9
2
440
JSON.stringify()
circled9
2
500
Other Decks in Technology
See All in Technology
エンジニアが主導できる組織づくり ー 製品と事業を進化させる体制へのシフト
ueokande
1
100
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
実践!カスタムインストラクション&スラッシュコマンド
puku0x
0
540
人工衛星のファームウェアをRustで書く理由
koba789
15
8.3k
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
190
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.5k
使いやすいプラットフォームの作り方 ー LINEヤフーのKubernetes基盤に学ぶ理論と実践
lycorptech_jp
PRO
1
150
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
130
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
8.8k
Platform開発が先行する Platform Engineeringの違和感
kintotechdev
4
590
Unlocking the Power of AI Agents with LINE Bot MCP Server
linedevth
0
120
Android Audio: Beyond Winning On It
atsushieno
0
3.4k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
70
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
Why Our Code Smells
bkeepers
PRO
339
57k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Practical Orchestrator
shlominoach
190
11k
Raft: Consensus for Rubyists
vanstee
140
7.1k
Building Applications with DynamoDB
mza
96
6.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Done Done
chrislema
185
16k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
Transcript
🔥 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