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
TypeScriptでDXを上げろ! Hono編
Search
Yusuke Wada
July 14, 2025
Programming
4
930
TypeScriptでDXを上げろ! Hono編
2025-07-14 / Zenncafe#3 日比谷
Yusuke Wada
July 14, 2025
Tweet
Share
More Decks by Yusuke Wada
See All by Yusuke Wada
AI Ramen Fight
yusukebe
0
130
Honoをフロントエンドで使う 3つのやり方
yusukebe
8
4.7k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
2
370
MCP with Cloudflare Workers
yusukebe
2
410
Remix on Hono on Cloudflare Workers
yusukebe
3
740
僕がつくった48個のWebサービス達
yusukebe
22
18k
Honoの来た道とこれから
yusukebe
20
7.1k
JS RPCを理解する
yusukebe
5
890
Honoとhtmx
yusukebe
6
2.1k
Other Decks in Programming
See All in Programming
DMMを支える決済基盤の技術的負債にどう立ち向かうか / Addressing Technical Debt in Payment Infrastructure
yoshiyoshifujii
5
760
WebAssemblyインタプリタを書く ~Component Modelを添えて~
ruccho
0
210
Workers を定期実行する方法は一つじゃない
rokuosan
0
140
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
250
Quality Gates in the Age of Agentic Coding
helmedeiros
PRO
1
120
Vibe coding コードレビュー
kinopeee
0
410
PHPカンファレンス関西2025 基調講演
sugimotokei
6
1.1k
Constant integer division faster than compiler-generated code
herumi
1
150
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
170
GitHub Copilotの全体像と活用のヒント AI駆動開発の最初の一歩
74th
6
1.8k
知って得する@cloudflare_vite-pluginのあれこれ
chimame
1
140
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Documentation Writing (for coders)
carmenintech
73
5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
790
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
GitHub's CSS Performance
jonrohan
1031
460k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
What's in a price? How to price your products and services
michaelherold
246
12k
A Tale of Four Properties
chriscoyier
160
23k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.5k
Side Projects
sachag
455
43k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Transcript
;FOODBGFൺ୩ 5ZQF4DSJQUͰ%9Λ্͛Ζʂ )POPฤ :VTVLF8BEB
.F w :VTVLF8BEB w 8FCGSBNFXPSLEFWFMPQFS w 4FOJPS%FWFMPQFS"EWPDBUF !$MPVE fl BSF
w #PLFUFDPGPVOEFS w $SFBUPSPG)POP w IUUQTHJUIVCDPNZVTVLFCF
ࠓͷςʔϚ 5ZQF4DSJQU
5ZQF4DSJQUͱ%9 w 5ZQF4DSJQU%FWFMPQFS&YQFSJFODF ։ൃऀମݧ Λ্ͤ͞Δ w ΤσΟλͷิ w ࣮ߦલʹΤϥʔʹؾͮ͘ w
υΩϡϝϯτ͕ͳͯ͘ʮͳΜͱͳ͘ʯઌ͕ಡΊΔ
ྫϔομʔ໊ͷิ
)POPͱ5ZQF4DSJQU w ࠷ॳ+BWB4DSJQUͰ࡞ΒΕ͍͕ͯͨɺૣʑʹ5ZQF4DSJQUҠߦ w %9͕༏Ε͍ͯΔେ͖ͳཁҼʹ5ZQF4DSJQUͷܕαϙʔτΛڍ͍͛ͯΔ
ܕʹ·ͭΘΔ֤τϐοΫΛհ͠·͢ w DSFRQBSBN ͷিܸ w #JOEJOHT7BSJBCMFT w 31$ͷੜ w )POP31$ʹ͍ͭͯ
w $MJFOU1SPYZʹܕΛ͚͍ͭͯΔ w 7BMJEBUPSͷઃܭ w ܕͷύϑΥʔϚϯε
DSFRQBSBNͷিܸ
DSFRQBSBNͷিܸ w 13ʮ"EEFEUZQFUPDSFRQBSBNLFZʯͰಋೖ͞Εͨ w ύεύϥϝʔλͷΩʔ͕จࣈྻϦςϥϧܕʹͳΔ
DSFRQBSBN ʹܕ͕ͭ͘ QPTUTDPNNFOUT QPTU*E DPNNFOU*E
࣮DSFRQBSBN
#JOEJOHT7BSJBCMFT
#JOEJOHT7BSJBCMFT w #JOEJOHT$MPVE fl BSFɺ"84-BNCBEBFUDͷڥґଘͷมΦϒδΣ Ϋτͷܕ w 7BSJBCMFTDTFUDHFUͰઃఆɾऔಘՄೳͳͷܕ
ྫ#JOEJOHT7BSJBCMFT
ྫDFOWʹܕ͕ͭ͘
5JQT$MPVEGMBSFͷ#JOEJOHT w AXSBOHMFSUZQFTAίϚϯυͰXSBOHMFSKTPODʹఆٛͨ͠#JOEJOHT ͔Βܕੜͯ͠XPSLFSDPO fi HVSBUJPOEUTΛ࡞ͬͯ͘ΕΔ
31$ͷੜ
31$ͷੜ w αʔόʔ͕͋ͬͯΫϥΠΞϯτ͕ଓ͢Δ߹ͷ w ࠷ॳU31$.JEEMFXBSFΛ࡞͍ͬͯͨ w )POPಠࣗͷ31$࡞ΕΔͷͰͳ͍͔ʁ w αʔόʔαΠυ͔ΒܕΛڞ༗ w
ΫϥΠΞϯτΛ৽ͭͬͯ͘͘͠ܕΛཧղ͢Δ
U31$ w αʔόʔαΠυͰ"1*Λఆٛ w "1*ఆٛ ϝιουҾฦΓ Λ5ZQF4DSJQUͷܕͰڞ༗ w ΫϥΠΞϯταΠυͰܕΛಡΈࠐΉͱΫϥΠΞϯτͰܕ͕ޮ͘
U31$αʔόʔαΠυ IFMMPͱ͍͏ΤϯυϙΠϯτ͕ RVFSZʹ{ name: string, age: number}Λ ظ͍ͯ͠Δ
U31$ΫϥΠΞϯταΠυ AIFMMPRVFSZA͕ύεͱͯ͠ੜ͑Δ {name:string; age:number}͕ ҾͰ͋Δ͜ͱ͕Θ͔Δ
)POPಠࣗͷ31$Λ࡞Εͳ͍͔ w 13ʮUSQDBEBQUFSʯͷίϝϯτͰ ఏҊ͞Εͨ w ʮU31$Ͱͳ͘ɺ)POP༻ʹωΠςΟϒ ͷ1SPYZΫϥΠΞϯτΛ࡞͢Δํ͕ྑ ͍ͷͰͳ͍͔ʁͦͷํ͕ͣͬͱγϯϓ ϧͰ৴པੑ͕ߴ͍ͱࢥ͏ʯ
W Ͱ31$ػೳ͕ಋೖ
)POP31$ʹ͍ͭͯ
)POPͷ31$ಛ w ൚༻తͳόϦσʔλɺGFUDIϥούʔͷΫϥΠΞϯτ AIDA ΛAIPOPA͕ఏڙ w ;PEɺ7BMJCPUɺ"SL5ZQFͳͲόϦσʔγϣϯϥΠϒϥϦͰεΩʔϚఆٛ w όϦσʔγϣϯରΫΤϦɺϑΥʔϜϘσΟɺ+40/ϘσΟɺϔομFUD w
ϨεϙϯεADKTPO AΛฦ͚ͩ͢ w )POPΦϒδΣΫτͷܕΛڞ༗ͯ͠ΫϥΠΞϯτͷδΣωϦΫεʹ͢ w ύεͱϦΫΤετ߲͕ิ͞ΕΔ w ฦ͖ͬͯͨ3FTQPOTFͱ+40/ϘσΟʹܕ͕͍͍ͭͯΔ
"1*ͷྫ (&5IFMMP OBNF)POP { message: “Hello Hono” } όϦσʔτ
⭕IFMMP OBNF)POP ❌IFMMP ❌IFMMP BHF
εΩʔϚΛఆٛ͢Δ TFSWFSUT { name: string} Λظ͢Δɾݕূ͢Δ
όϦσʔλʹ͢ TFSWFSUT ྫ ⭕IFMMP OBNF)POP ❌IFMMP ❌IFMMP BHF
όϦσʔτͨ͠Λऔಘ͢Δ TFSWFSUT IFMMP OBNF)POPͷ߹ { name: “Hono” } ͕ೖΔ
ϨεϙϯεΛฦ͢ TFSWFSUT { message: string } ͕ฦΓͷܕͩͱఆٛ͞ΕΔ
αʔόͷܕΛFYQPSU͢Δ TFSWFSUT )POPΠϯελϯεͷܕΛऔΔ BQQHFU ܕ͖ͭͷ)POPΠϯελ͢Λฦ͢
AID AͷδΣωϦΫεʹαʔόͷܕΛ͢ DMJFOUUT
ύεͱҾʹܕ͕ͭ͘ DMJFOUUT (&5IFMMP OBNF)POP Λ͍ͯ͠Δ
ASFTKTPO Aʹ݁Ռʹܕ͕ͭ͘ DMJFOUUT { message: string } ͷܕ͕ͭ͘
εΩʔϚͷมߋΛͨ͠ΒܕΤϥʔ͕ग़Δ
)POPΠϯελϯεͷฦΓͷܕ͕"1*Λද͢ (&5AIFMMPA ΫΤϦύϥϜʹOBNFΛظ͢Δ +40/Ϩεϙϯε ελʔςε { message: string }
$MJFOU1SPYZʹܕΛ͚͍ͭͯΔ
+BWB4DSJQUͷA1SPYZA w +BWB4DSJQUͷ1SPYZɺΦϒδΣΫτʹର͢Δૢ࡞ʢϓϩύςΟΞΫηεɺؔ ݺͼग़͠ͳͲʣΛԣऔΓͯ͠ɺΧελϜͷಈ࡞ΛఆٛͰ͖ΔΈ ྫ͑ύεͱϝιουΛνΣʔϯͰදݱͰ͖Δ ࣮ྫ
ύεɺϝιουɺύϥϝʔλɺϨεϙϯεʹܕΛ͚͍ͭͯΔ Ϩεϙϯε ύεɾϝιου ύϥϝʔλ
݁Ռ ύε ϝιου ύϥϝʔλ Ϩεϙϯε 💡͋͘·ͰAGFUDIAͷϥούʔ ͳͷͰϨεϙϯε3FTQPOTF ΦϒδΣΫτ
όϦσʔλͷઃܭ
όϦσʔλͷઃܭ w AIPOPWBMJEBUPSAബ͍ w ϛυϧΣΞʹͳ͍ͬͯΔ w όϦσʔγϣϯϩδοΫΛ࣋ͨͳ͍ w ରͷΛόϦσʔγϣϯؔʹ͚ͩ͢ w
ܕఆٛ
AIPOPWBMJEBUPSAΛૉͰ͏ ΫΤϦύϥϝʔλͷ͕དྷΔ { name: “Hono” } ݕূͨ݁͠ՌΛฦ͢ { name: “Hono”
} ܕ͕ࣗಈతʹͭ͘ { name: string }
;PE7BMJEBUPSͷ࣮ w AIPOPWBMJEBUPSAΛϥοϓ w όϦσʔγϣϯؔΛ࣮ w TDIFNBQBSTF ૬Λ࣮ߦ
όϦσʔλϛυϧΣΞ w "SL5ZQFWBMJEBUPS w &GGFDU4DIFNB7BMJEBUPS w 4UBOEBSE4DIFNB7BMJEBUPS w 5ZQF#PY7BMJEBUPS w
5ZQJB7BMJEBUPS w VOLOPXOVUJM7BMJEBUPS w 7BMJCPU7BMJEBUPS w ;PE7BMJEBUPS 💡4UBOEBSE4DIFNBʹد͍ͤͯ͜͏ͱ͍͏͕͋Δ
ܕͷύϑΥʔϚϯε
ܕͷύϑΥʔϚϯε w ܕఆ͕ٛෳࡶ w νΣʔϯ͢Δ͜ͱͰܕ͕ੵΈ্͕͍ͬͯ͘
͘ͳΔPSܕΛࣦ͏ w ྫ w ϧʔτͷ͕ͩͱิ͕͍ w ϧʔτͷ͕ͩͱܕΛࣦ͏ ͩͱBOZʹͳΔ
ରࡦ w ܕఆٛΛγϯϓϧʹ͢Δ w ύϑΥʔϚϯεͷଌఆ w σόά͢Δ w UTHPͷظ
ܕఆٛΛγϯϓϧʹ͢Δ w AUZQFTUTA w ෳࡶɾͩͬͨΓ͢Δ w ߦ͋Δ
ύϑΥʔϚϯεଌఆ w AUTDEJBHOPTUJDTA w $*Ͱଌఆ݁Ռ͕͔ΔΑ͏ʹͳ͍ͬͯΔ w 5PUBMUJNFΒ͖͕ͭ͋Δ w *OTUBOUJOBUJPOTΛݟ͍ͯΔ
σόά͢Δ w AUTDHFOFSBUF5SBDFA w ग़ྗͨ͠USBDFKTPOΛ$ISPNF 1FSGFUUPʹಡΈࠐ·ͤΔ
UTHPͷظ w ίϯύΠϥΤσΟλଆͷύ ϑΥʔϚϯε্͕͕Ε͍͍ͱ ͍͏ൃ w AUTHPAͷ/BUJWF1SFWJFXͩͱ ݄ʹଌఆͯ͠ഒ͘ͳͬͨ
ܕͷύϑΥʔϚϯε࠷ॏཁ՝ w ࠓϥϯλΠϜͷ࣮ߦΑΓܕ͕ʹͳΔ߹͕͋Δ w ͦͦ"1*Λม͑Δ͜ͱ͋Γ͏Δ w ؤுΓ·͢
·ͱΊ
ࠓͬͨ͜ͱ w DSFRQBSBN ͷিܸ w #JOEJOHT7BSJBCMFT w 31$ͷੜ w )POP31$ʹ͍ͭͯ
w $MJFOU1SPYZʹܕΛ͚͍ͭͯΔ w 7BMJEBUPSͷઃܭ w ܕͷύϑΥʔϚϯε )POP5ZQF4DSJQUΛ׆༻ͯ͠%9 Λ্͍͛ͯΔ
)POPΛࢀߟʹ 5ZQF4DSJQUΛ׆༻ͯ͠Έ͍ͯͩ͘͞