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

YAPC::Kyoto 2023
2023-03-19 Yusuke Wada

Transcript

1. Ͳ͜Ͱ΋ಈ͘8FCϑϨʔϜϫʔΫ
   Λͭ͘Δ
   :"1$,ZPUP
   :VTVLF8BEB
   )POP
   6MUSBGBTUXFCGSBNFXPSLGPSUIF&EHF
   

   View Slide

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
   
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   ʮUltrafast web framework for Cloud
   fl
   are Workersʯ
   YAPC::Kyoto 2023

   ʮUltrafast web framework for the Edgeʯ
   
   

   View Slide

7. ͦΕͳΓʹେ͖͘ͳΓ·ͨ͠
   

   (JU)VC4UBST
   
   

   View Slide

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
   
   

   View Slide

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
   ࠓճ͸͜͜ʹয఺Λ͋ͯ·͢
   

   View Slide

10. গͳ͘ͱ΋ͷϥϯλΠϜͰಈ͖·͢
    $MPVE
    fl
    BSF8PSLFST
    'BTUMZ$PNQVUF!&EHF
    %FOP
    #VO
    -BHPO
    7FSDFM&EHF3VOUJNF
    /PEFKT
    

    View Slide

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

    View Slide

12. $MPVEGMBSF8PSLFST
    
    

    View Slide

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

    View Slide

14. ެࣜͷυΩϡϝϯτ௨Γʹॻ͍ͯΈΔ
    w ૉ͔Βॻ͘
    w ύεΛநग़͠ͳͯ͘͸͍͚ͳ͍
    w ϝιουΛจࣈྻͰ൑ఆ
    w +40/Λ࡞੒
    w 3FTQPOTFΦϒδΣΫτΛ࡞੒
    w /PU'PVOEΛ༻ҙ
    
    

    View Slide

15. )POPΛ࢖͏ͱʜ
    w &YQSFTTϥΠΫͳγϯλοΫε
    w ϧʔςΟϯά
    w +40/Ϩεϙϯεͷ࡞੒
    w ΤϯτϦʔϙΠϯτ
    w /PU'PVOEΛॻ͔ͳ͍͍ͯ͘
    w ίʔυྔ͕ݮΔ
    
    

    View Slide

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

    View Slide

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

    View Slide

18. 8FC4UBOEBSEͷ͓͔͛
    • Fetch APIͰ࢖༻͞ΕΔRequest/ResponseɺετϦʔϜɺ҉߸ԽͳͲ
    • Webϒϥ΢βͷAPIΛαʔόʔ(Ϩε)؀ڥͰ࢖͑ΔΑ͏ʹ͢Δ
    • WinterCGͰٞ࿦͞Ε͍ͯΔ
    • Web-interoperable Runtimes Community Group
    • W3CͷίϛϡχςΟʔάϧʔϓ
    • Cloud
    fl
    are / Deno / Vercel / Shopify / Netlify / Alibaba etc.
    
    ʮ֎෦ϥΠϒϥϦʹґଘͤͣɺ8FC4UBOEBSEͷ"1*ͷΈΛ࢖༻͍ͯ͠Δʯ
    8FC4UBOEBSEͱ͸ʁ
    

    View Slide

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
    8FC4UBOEBSEͷ"1*
    ͳͲ
    
    

    View Slide

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
    
    

    View Slide

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

    View Slide

22. خ͔ͬͨ͠ॠؒ
    $MPVE
    fl
    BSF8PSLFSTͷ$-*8SBOHMFSͷ ݩ
    ϝΠϯϝϯςφ
    !UISFFQPJOUPOF4VOJM͕πΠʔτͯ͘͠Εͨʂ
    
    This looks like a pretty
    neat batteries-included
    framework for Cloudflare
    Workers! Nice work
    @yusukebe
    

    View Slide

23. 'BTUMZ$PNQVUF!&EHF
    
    

    View Slide

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

    View Slide

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

    View Slide

26. %FOP
    
    

    View Slide

27. %FOP
    w /PEFKTͱ͸ผͷ+BWB4DSJQUϥϯλΠϜ
    w 5ZQF4DSJQUͷඪ४αϙʔτɺύʔϛογϣϯγεςϜɺϦϯλɾϑΥʔϚολ
    ͷఏڙ
    w 8FC4UBOEBSE͕࢖͑Δʂ
    w ͨͩ͠ɺJNQPSUͷ࢓૊Έ͕ҧ͏
    ֎෦Ϟδϡʔϧ͸AIUUQTA͔ΒJNQPSU͢Δ
    ֦ுࢠ͕ඞཁ
    

    View Slide

28. %FOPରԠ͸᪳᪯͍ͯͨ͠
    w JNQPSUपΓ͕େ͖͘ҧ͏
    w ܕνΣοΫ͕ݫ͍͠ʢ౰࣌͸ΏΔ;Θͩͬͨʣ
    w 'BTUMZ$PNQVUF!&EHFͷ࣌ͷΑ͏ʹ͸͍͔ͳ͍
    w $MPVE
    fl
    BSF8PSLFST$PNQVUF!&EHF͚ͩͰे෼Ͱ͸ͳ͍͔ʁ
    WͰରԠ͢Δ͜ͱʹͨ͠
    w ७ਮʹʮָͦ͠͏ʯ
    

    View Slide

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Ͱ͖Δ
    

    View Slide

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

    View Slide

31. #VO
    
    

    View Slide

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

    View Slide

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

    View Slide

34. $MPVEGMBSF8PSLFSTͱશ͘ಉ͡ίʔυ͕ಈ͍ͨ
    • Web StandardΛ࠾༻
    • `export { fetch }` ΋ಉ͡
    #VO͕ެ։͞Εͨ࣌ʹ͸΋͏͢ͰʹରԠͰ͖ͯͨ
    • Bunjs support · Issue #344 · honojs/honoʯ

    https://github.com/honojs/hono/issues/344
    
    

    View Slide

35. ͦͯ͠ʜ
    
    

    View Slide

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

    View Slide

37. ʮ&YQSFTT͸ݱࡏαϙʔτ͍ͯ͠·ͤΜɻ
    

    ͦͷ୅ΘΓࠓ͸)POPΛ࢖͏͜ͱ͕Ͱ͖·͢ʯ
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. ͪͳΈʹʜ
    
    

    View Slide

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

    View Slide

44. ެࣜXFCTJUFʹ΋
    IUUQTEFOPMBOECFODINBSLT
    
    

    View Slide

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

    View Slide

46. ೥݄࣌఺ͷϕϯνϚʔΫ
    w ʮ)FMMP8PSMEʯ
    w #VOͷํ͕଎͍
    w )POPW
    w %FOPɺVTJOH
    fl
    BTIA%FOPTFSWF
    A
    w #VO %FOP
    #VO
    

    View Slide

47. 😲
    
    XPSLFSE $MPVEGMBSF8PSLFST
    ɺ%FOPɺ#VO
    

    ৽ڵ+BWB4DSJQUϥϯλΠϜͷਅΜத΁
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

52. ੔ཧ͢Δͱʜ
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

60. )POPͷ໨ࢦ͢΋ͷ
    
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

65. IUUQTIPOPEFW
    6MUSBGBTUXFCGSBNFXPSLGPSUIF&EHF
    

    View Slide