どこでも動くWebフレームワークをつくる

Yusuke Wada

March 19, 2023

Tweet Share

Transcript

1. Ͳ͜Ͱ΋ಈ͘8FCϑϨʔϜϫʔΫ Λͭ͘Δ :"1$,ZPUP
   
   
   :VTVLF
   8BEB )POP
   6MUSBGBTU
   XFC
   GSBNFXPSL
   GPS
   UIF
   &EHF

2. .F
    • Yusuke Wada • Supervisor@TravelBook
 https://www.travelbook.co.jp • Creator of

   Bokete • YAPC::Asia 2012/2013 ϕεττʔΫ৆ड৆ • https://github.com/yusukebe • https://twitter.com/yusukebe 

3. ࠓ೔ͷςʔϚ
   ʮͲ͜Ͱ΋ಈ͘8FCϑϨʔϜϫʔΫΛͭ͘Δʯ
   ˎ+BWB4DSJQUͷ࿩Ͱ͢ 

4. )POPͱ͍͏8FCϑϨʔϜϫʔΫΛ͍ͭͬͯ͘·͢  IUUQTIPOPEFW
   6MUSBGBTU
   XFC
   GSBNFXPSL
   GPS
   UIF
   &EHF

5. )POP
   5SBDLT ʮHonoͷ3+1ͷϧʔλʔͱɺͦ͜ʹͭͳ͕ΔPR͕ ϓϩδΣΫτʹ΋ͨΒͨ͠΋ͷʯ by @usualoma 

6. ڈ೥ͷ:"1$+BQBO0OMJOF
   Ͱ΋࿩͠·ͨ͠ ΩϟονϑϨʔζ͕มΘΓ·ͨ͠ YAPC::Japan::Online 2022
 ʮUltrafast web framework for Cloud fl

   are Workersʯ YAPC::Kyoto 2023
 ʮUltrafast web framework for the Edgeʯ 

7. ͦΕͳΓʹେ͖͘ͳΓ·ͨ͠ 
 (JU)VC
   4UBST 

8. ͦΕͳΓʹ࢖ΘΕͯ·͢ • cdnjs - ϥΠϒϥϦͷCDN഑৴αʔϏεɺAPIͰ࢖ΘΕ͍ͯΔ • Poly fi ll.io -

   ϒϥ΢βͷUAΛΈͯPoly fi llΛฦ͢ • Ultra - Deno޲͚ͷReact SSRϑϨʔϜϫʔΫ • Driv.ly - ंͷΦϯϥΠϯചങͷͨΊͷAPIΛఏڙ • repeat.dev - webhook΍scheduleλεΫͳͲΛૉૣͭ͘͘ΕΔ • Convex - σʔλϕʔεαʔϏεɺHonoͷར༻Λਪ঑͍ͯ͠Δ • Cloud fl are D1 example - Cloud fl areެࣜͷϒϩά • subtats - ΞΧ΢ϯτͷϑΥϩʔϫʔ͕Կਓ͍Δ͔Θ͔ΔOSS 

9. )POPͷͭͷಛ௃ • Ultrafast
 The routers are really fast and smart.

   Not using linear loops. Fast. • Multi-runtime
 Works on Cloud fl are Workers, Fastly Compute@Edge, Deno, Bun, Lagon, or Node.js. The same code runs on all platforms. • Batteries Included
 Hono has built-in middleware, custom middleware, and third-party middleware. Batteries included. • Delightful DX
 First-class TypeScript support. Now, we've got "Types". • Small
 About 20kB. Zero-dependencies. Using only Web Standard API.  3FH&YQ3PVUFS
   +BWB4DSJQUքͰ࠷଎ͷϧʔλʔ
   CZ
   !VTVBMPNB ࠓճ͸͜͜ʹয఺Λ͋ͯ·͢

10. গͳ͘ͱ΋ͷϥϯλΠϜͰಈ͖·͢  $MPVE fl BSF
    8PSLFST
     'BTUMZ
    $PNQVUF!&EHF
     %FOP
    

    #VO
     -BHPO
     7FSDFM
    &EHF
    3VOUJNF
     /PEFKT

11. ʮ)POP͕ʰͲ͜Ͱ΋ಈ͘Α͏ʹͳΔʱ·ͰʯͷυϥϚ
    Λ঺հ͠·͢ 

12. 
    $MPVEGMBSF
    8PSLFST 

13. 
    $MPVEGMBSF
    8PSLFST w ೥݄೔ʙ
    w ΞϓϦΛͭ͘Ζ͏ͱࢥͬͨΒ͍ͭͷؒʹ͔ϑϨʔϜϫʔΫΛ͍ͭͬͯͨ͘
    w τϥΠ໦ߏ଄ͷϧʔλʔΛͭͬͯ͘Έ͔ͨͬͨ 

14. ެࣜͷυΩϡϝϯτ௨Γʹॻ͍ͯΈΔ w ૉ͔Βॻ͘
    w ύεΛநग़͠ͳͯ͘͸͍͚ͳ͍
    w ϝιουΛจࣈྻͰ൑ఆ
    w +40/Λ࡞੒
    w

    3FTQPOTFΦϒδΣΫτΛ࡞੒
    w /PU
    'PVOEΛ༻ҙ 

15. )POPΛ࢖͏ͱʜ w &YQSFTTϥΠΫͳγϯλοΫε
    w ϧʔςΟϯά
    w +40/Ϩεϙϯεͷ࡞੒
    w ΤϯτϦʔϙΠϯτ
    w

    /PU
    'PVOEΛॻ͔ͳ͍͍ͯ͘
    w ίʔυྔ͕ݮΔ 

16. ͦͷଞ͍͍͜ͱ͕͋Γ·͕͢লུ wϫΠϧυΧʔυɺਖ਼نදݱͳͲॊೈͳϧʔςΟϯά
    wΫΤϦύϥϝʔλɺύεύϥϝʔλͷऔಘ
    wϔομͷ௥Ճɺεςʔλεͷઃఆ
    w1MBJO
    5FYUɺ)5.-ɺ3FEJSFDUϨεϙϯε΁ͷγϣʔτΧοτ
    wϛυϧ΢ΣΞΛ࢖͑Δ
    wόΠϯσΟϯάͷऔಘ
    wΤϥʔϋϯυϦϯά
    w/PU
    'PVOEͷΧελϚΠζ
    wςετͷ؆қԽ
    

    wม਺ͷอ࣋
    

17. ઌʹωλόϥγ
    Ͳ͜Ͱ΋ಈ͘࢓૊Έ 

18. 8FC
    4UBOEBSEͷ͓͔͛ • Fetch APIͰ࢖༻͞ΕΔRequest/ResponseɺετϦʔϜɺ҉߸ԽͳͲ • Webϒϥ΢βͷAPIΛαʔόʔ(Ϩε)؀ڥͰ࢖͑ΔΑ͏ʹ͢Δ • WinterCGͰٞ࿦͞Ε͍ͯΔ • Web-interoperable

    Runtimes Community Group • W3CͷίϛϡχςΟʔάϧʔϓ • Cloud fl are / Deno / Vercel / Shopify / Netlify / Alibaba etc.  ʮ֎෦ϥΠϒϥϦʹґଘͤͣɺ8FC
    4UBOEBSEͷ"1*ͷΈΛ࢖༻͍ͯ͠Δʯ 8FC
    4UBOEBSEͱ͸ʁ

19. w 3FRVFTU
    w 3FTQPOTF
    w 63-
    w 63-1BUUFSO
    w 63-4FBSDI1BSBNT

    w $SZQUP
    w 3FBEBCMF4USFBN
    w 8SJUBCMF4USFBN
    w 5FYU&ODPEFS
    w 5FYU%FDPEFS 8FC
    4UBOEBSEͷ"1* ͳͲ 

20. )POP಺෦Ͱ΍ͬͯΔ͜ͱ 1. dispatch(request:Request) 2. [handlers, params] = match(method, path) 3.

    context = new Context(request, params) 4. composed = compose(handlers) 5. response = composed(context) 6. return response:Response 

21. 🔥  )POP͸8FC
    4UBOEBSEΛ࢖ͬͨ$MPVEGMBSF
    8PSLFST༻ͷϑϨʔϜϫʔΫͱͯ͠஀ੜ͠·ͨ͠ɻ

22. خ͔ͬͨ͠ॠؒ $MPVE fl BSF
    8PSLFSTͷ$-*
    8SBOHMFS
    
    ͷ ݩ ϝΠϯϝϯςφ
    !UISFFQPJOUPOF
    
    4VOJM
    ͕πΠʔτͯ͘͠Εͨʂ  This looks

    like a pretty neat batteries-included framework for Cloudflare Workers! Nice work @yusukebe

23. 
    'BTUMZ
    $PNQVUF!&EHF 

24. 
    'BTUMZ
    $PNQVUF!&EHF w 3VTU+BWB4DSJQU(PʹରԠɺ8"4.ʹίϯύΠϧͯ͠࢖͏
    w 8JOUFS$(ʹབྷΜͰ͸͍ͳ͍͕ɺجຊతͳ8FC
    4UBOEBSE͕࢖͑Δ
    w BUPCCUPBʹ΋ରԠͨ͠
    w ಉ͡$%/αʔϏεͱͯ͠஫໨ͯͨ͠Β)POP΋࢖͑Δ͜ͱ͕ൃ֮ʂ 

25. 😄  ίʔυΛ΄ͱΜͲม͑ͣʹ'BTUMZͰ΋ಈ͖·ͨ͠ɻ
    ϛυϧ΢ΣΞͷࢿ࢈Λͦͷ··࢖͑·͢ɻ
    7$-ͷ୅ΘΓʹͳΔ͔΋ʂ

26. 
    %FOP 

27. 
    %FOP w /PEFKTͱ͸ผͷ+BWB4DSJQUϥϯλΠϜ
    w 5ZQF4DSJQUͷඪ४αϙʔτɺύʔϛογϣϯγεςϜɺϦϯλɾϑΥʔϚολ ͷఏڙ
    w 8FC
    4UBOEBSE͕࢖͑Δʂ
    w ͨͩ͠ɺJNQPSUͷ࢓૊Έ͕ҧ͏

    ֎෦Ϟδϡʔϧ͸AIUUQTA͔ΒJNQPSU͢Δ
    ֦ுࢠ͕ඞཁ

28. %FOPରԠ͸᪳᪯͍ͯͨ͠ w JNQPSUपΓ͕େ͖͘ҧ͏
    w ܕνΣοΫ͕ݫ͍͠ʢ౰࣌͸ΏΔ;Θͩͬͨʣ
    w 'BTUMZ
    $PNQVUF!&EHFͷ࣌ͷΑ͏ʹ͸͍͔ͳ͍
    w $MPVE fl

    BSF
    8PSLFST$PNQVUF!&EHF͚ͩͰे෼Ͱ͸ͳ͍͔ʁ WͰରԠ͢Δ͜ͱʹͨ͠ w ७ਮʹʮָͦ͠͏ʯ

29. %FOPʹରԠͤ͞Δ w EFOPJGZ
    w AEFOPJGZAίϚϯυͰ%FOP༻ͷίʔυΛग़ྗͯ͘͠ΕΔ
    w AUTA֦ுࢠΛ͚ͭͯ͘ΕΔɺ1PMZ fi MMɺϞδϡʔϧͷϦϓϨΠε
    w

    EFOPMBOEYͰͷެ։
    w AEFOPJGZAͰग़ྗͨ͠AEFOP@EJTUAΛࢦఆ͢Ε͹ެ։Ͱ͖ͨ ͨͩ͠Deno v1.28͔Β`npm: ` speci fi ers͕ಋೖ͞Εͨ `npm:hono` ͰimportͰ͖Δ

30. 🦕  %FOPͰ࢖ͬͯ͘ΕΔਓ΋ଟ͔ͬͨɻ
    ϚϧνϥϯλΠϜΛҙࣝ͢Δ͖͔͚ͬʹͳͬͨɻ

31. 
    #VO 

32. )POP͕ਓؾΛಘΔେ͖ͳ͖͔͚ͬʹͳͬͨ 

33. 
    #VO w ೥݄͘Β͍͔ΒΫϩʔζυͰެ։͞Ε͍ͯͨ
    w ೥݄ެ։
    w +BWB4DSJQU$PSFɺ;JHΛ࠾༻
    w /PEFKTɺ%FOPΑΓ଎͍͜ͱΛചΓʹͨ͠ 

34. $MPVEGMBSF
    8PSLFSTͱશ͘ಉ͡ίʔυ͕ಈ͍ͨ • Web StandardΛ࠾༻ • `export { fetch }` ΋ಉ͡

    #VO͕ެ։͞Εͨ࣌ʹ͸΋͏͢ͰʹରԠͰ͖ͯͨ • Bunjs support · Issue #344 · honojs/honoʯ
 https://github.com/honojs/hono/issues/344 

35. ͦͯ͠ʜ 

36. #VOͰ͸&YQSFTT͕ಈ͔ͳ͍ • Web Standard͸࢖͑Δ͕Node.jsޓ׵͕ͳ͍ • ʮBunͰExpress͸࢖͑ͳ͍ͷ͔ʁʯͱ͍͏࣭໰͕DiscordͰଟ਺ 

37. ʮ&YQSFTT͸ݱࡏαϙʔτ͍ͯ͠·ͤΜɻ 
 ͦͷ୅ΘΓࠓ͸)POPΛ࢖͏͜ͱ͕Ͱ͖·͢ʯ 

38. ͏ͳ͗ͷ΅Γ  #VO͕ొ৔͢Δ
     #VOͰ&YQSFTTΛ࢖͍͍ͨ
     #VOͰ͸&YQSFTT͕࢖͑ͳ͍
     ͦͷ୅ΘΓ)POPΛ࢖͍ͬͯͩ͘͞
    

    )POPΛ࢖͏ #VOొ৔ 

39. ෬ઢ͕͋ͬͨ 4VOJMͷπΠʔτʹϦΞΫγϣϯ͍ͯͨ͠ͷ͕#VOͷ࡞ऀ+BSSFEͩͬͨ  Ooh I wonder if it’ll work in

    bun since the api is basically the same

40. ޙ೔ஊ ʮ#VOʹ͓͚Δ࠷େͷࣦഊͷͻͱͭ͸ɺ&YQSFTTʹରԠͤ͞ͳ͔ͬͨ͜ͱͩʯ ͱ͸͍͑ࠓ͸&YQSFTT͕ಈ͖·͢ 

41. #VOυΩϡϝϯτʹ)POP 

42. ͪͳΈʹʜ 

43. %FOPຊମʹ)POP͕ೖ͍ͬͯΔ 

44. ެࣜXFCTJUFʹ΋ IUUQTEFOPMBOECFODINBSLT 

45. %FOPͱ#VO w %FOP͕ʮ#VOͱൺֱ͢ΔͨΊʹʯͲͪΒͰ΋ಈ͘)POP͕࢖ΘΕͨ
    w #VOᐌ͘ʮ#VO͸ʰ%FOPΑΓ଎͍ʱʯ
    w %FOPͰ͸ΑΓ଎͍ʮ fl BTIʯΛ͍ͭͬͯͨ͘ +BSSFE΋ίϝϯτ͍ͯ͠Δ

46. ೥݄࣌఺ͷϕϯνϚʔΫ w ʮ)FMMP
    8PSMEʯ
    w #VOͷํ͕଎͍
    w )POP
    W
    w %FOP
    
    ɺVTJOH
    fl

    BTI
    A%FOPTFSWF A
    w #VO
    
     %FOP #VO

47. 😲  XPSLFSE $MPVEGMBSF
    8PSLFST ɺ%FOPɺ#VO 
 ৽ڵ+BWB4DSJQUϥϯλΠϜͷਅΜத΁

48. 
    -BHPO w Φʔϓϯιʔεͷ+BWB4DSJQU5ZQF4DSJQUαʔόʔϨεϥϯλΠϜ
    w %FWεςʔδ͕ͩ΋͏ಈ͘ ࡞ऀͷ5PN
    -JFOBSE͕$*ͳͲରԠͯ͘͠Εͨ 

49. 
    7FSDFM w /FYUKTΛͭͬͯ͘Δɻ/FYUKTΛϗεςΟϯά
    w /FYUKTͷ&EHF
    "1*
    3PVUFTͰಈ͘
    w 7FSDFMͷόοΫΤϯυ͸$MPVE fl BSF
    8PSLFSTͰಈ͍͍ͯΔ 

50. 
    /PEFKT w /PEFKTͰಈ͔͢͜ͱ͸૝ఆ͍ͯ͠ͳ͔ͬͨ
    w "EBQUFSΛͭ͘Δ͜ͱͰରԠ
    w 1PMZ fi MMΛ͢Δ
    
    3FNJYͷGFUDIϥΠϒϥϦΛ࢖༻ 

51. 🙆  ʮ)POP͸Ͳ͜Ͱ΋ಈ͘ʯ

52. ੔ཧ͢Δͱʜ 

53. XPSLFSE
    
    #VO 'BTUMZ
    $PNQVUF!&EHF
    
    &EHF
    3VOUJNF -BHPO /PEFKT %FOP

54. ϚϧνϥϯλΠϜ͔ͩΒͦ͜ͷ޻෉ 

55. $*Ͱ͸ͭͷϥϯλΠϜ্ͷςετ͕૸͍ͬͯΔ
    W͔Β͸"84
    -BNCEBͷςετ΋૸Γ·͢ 

56. 3VOUJNF
    ,FZT w ADSVOUJNFAͰݱࡏͲͷϥϯλΠϜͰಈ͍ͯΔ͔ΛऔಘͰ͖Δ
    w 8JOUFS$(ͷ3VOUJNF
    ,FZTʹ४ڌ
    IUUQTSVOUJNFLFZTQSPQPTBMXJOUFSDHPSH 

57. "EBQUFS w ϥϯλΠϜɾϓϥοτϑΥʔϜݻ༗ͷॲཧΛABEBQUFS Aʹಀͨ͠
    w ඞཁʹԠͯ͡JNQPSU͢Ε͹Α͍
    w ϑΝΠϧ ,7
    FUD ͷѻ͍͸֤ϥϯλΠϜ͹Β͹ΒͰ͋Δ

    

58. AFOWA w ؀ڥม਺Λಁաతʹѻ͏ؔ਺

59. DSFBUFIPOPίϚϯυͰ֤ϓϥοτϑΥʔϜͷ਽ܗΛͭ͘Δ w ࠷খݶͷϓϩδΣΫτΛͭ͘Δ
    w $MPVE fl BSF
    1BHFTΛؚΊͯͭͷςϯϓϨʔτ

60. )POPͷ໨ࢦ͢΋ͷ 

61. 8FC
    4UBOEBSEͷ4UBOEBSE
    XFC
    GSBNFXPSL  👍 ࢖ͬͯ͘ΕΔਓΛ૿΍͢͜ͱͰϓϩμΫτ΁ͷϑΟʔυόοΫΛ૿΍͢

62. 0OF
    NPSF
    UIJOH  ͞Βʹ͋ͷϓϥοτϑΥʔϜʹ΋ʂ

63. 
    "84
    -BNCEB w W͔Β&YQFSJNFOUBMͰରԠɺ/PEFKT
    Ҏ্
    w "EBQUFSͰରԠ
    w -BNCEB
    
    "1*
    (BUFXBZ
    ͷߏ੒ʹରԠ 

64. ·ͱΊ w )POP͕ +BWB4DSJQUͳΒ Ͳ͜Ͱ΋ಈ͘࢓૊Έ
    w ֤ϥϯλΠϜʹରԠͤ͞ΔͨΊͷυϥϚ
    w ϚϧνϥϯλΠϜ͔ͩΒͦ͜ͷ޻෉
    w

    ͓޷͖ͳϥϯλΠϜͰ࢖ͬͯΈ͍ͯͩ͘͞ʂ 

65. IUUQTIPOPEFW
    6MUSBGBTU
    XFC
    GSBNFXPSL
    GPS
    UIF
    &EHF