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
190
🔥 Hono v4 やってみた
circled9
February 23, 2024
Tweet
Share
More Decks by circled9
See All by circled9
キースイッチ入門
circled9
0
75
CloudflareのAI関連の機能さわってみた
circled9
0
630
0.0.0.0 day
circled9
0
110
小数の丸め誤差の話
circled9
0
140
数値の文字列をパースしよう
circled9
0
230
JetBrains AI Assistant を試してみた
circled9
1
530
Fresh
circled9
0
250
React Hooks 勉強会 vol.3
circled9
2
440
JSON.stringify()
circled9
2
490
Other Decks in Technology
See All in Technology
「手を動かした者だけが世界を変える」ソフトウェア開発だけではない開発者人生
onishi
15
7.5k
完璧を目指さない小さく始める信頼性向上
kakehashi
PRO
0
110
TypeScript 上達の道
ysknsid25
23
4.8k
隙間時間で爆速開発! Claude Code × Vibe Coding で作るマニュアル自動生成サービス
akitomonam
2
200
Bliki (ja), and the Cathedral, and the Bazaar
koic
8
1.5k
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
600
私とAWSとの関わりの歩み~意志あるところに道は開けるかも?~
nagisa53
1
130
新規事業におけるAIリサーチの活用例
ranxxx
0
170
地域コミュニティへの「感謝」と「恩返し」 / 20250726jawsug-tochigi
kasacchiful
0
100
FAST導入1年間のふりかえり〜現実を直視し、さらなる進化を求めて〜 / Review of the first year of FAST implementation
wooootack
1
180
モバイルゲームの開発を支える基盤の歩み ~再現性のある開発ラインを量産する秘訣~
qualiarts
0
600
東京海上日動におけるセキュアな開発プロセスの取り組み
miyabit
0
200
Featured
See All Featured
Why Our Code Smells
bkeepers
PRO
337
57k
The Invisible Side of Design
smashingmag
301
51k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Raft: Consensus for Rubyists
vanstee
140
7k
For a Future-Friendly Web
brad_frost
179
9.8k
The World Runs on Bad Software
bkeepers
PRO
70
11k
Adopting Sorbet at Scale
ufuk
77
9.5k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
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