Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

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

Yusuke Wada

March 19, 2023
Tweet

More Decks by Yusuke Wada

Other Decks in Programming

Transcript

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

    View full-size 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 full-size slide

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

    View full-size slide

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

    IUUQTIPOPEFW
    6MUSBGBTUXFCGSBNFXPSLGPSUIF&EHF

    View full-size slide

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

    View full-size 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 full-size slide

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

    (JU)VC4UBST

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  12. $MPVEGMBSF8PSLFST

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size 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 full-size slide

  21. 🔥

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

    View full-size slide

  22. خ͔ͬͨ͠ॠؒ
    $MPVE
    fl
    BSF8PSLFSTͷ$-*8SBOHMFSͷ ݩ
    ϝΠϯϝϯςφ
    !UISFFQPJOUPOF4VOJM͕πΠʔτͯ͘͠Εͨʂ

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

    View full-size slide

  23. 'BTUMZ$PNQVUF!&EHF

    View full-size slide

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

    View full-size slide

  25. 😄

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. %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 full-size slide

  29. 🦕

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

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

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

    View full-size slide

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

    View full-size slide

  36. ෬ઢ͕͋ͬͨ
    4VOJMͷπΠʔτʹϦΞΫγϣϯ͍ͯͨ͠ͷ͕#VOͷ࡞ऀ+BSSFEͩͬͨ

    Ooh I wonder if it’ll work
    in bun since the api is
    basically the same

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  40. ެࣜXFCTJUFʹ΋
    IUUQTEFOPMBOECFODINBSLT

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  43. 😲

    XPSLFSE $MPVEGMBSF8PSLFST
    ɺ%FOPɺ#VO

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  47. 🙆

    ʮ)POP͸Ͳ͜Ͱ΋ಈ͘ʯ

    View full-size slide

  48. ੔ཧ͢Δͱʜ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  56. )POPͷ໨ࢦ͢΋ͷ

    View full-size slide

  57. 8FC4UBOEBSEͷ4UBOEBSEXFCGSBNFXPSL

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

    View full-size slide

  58. 0OFNPSFUIJOH

    ͞Βʹ͋ͷϓϥοτϑΥʔϜʹ΋ʂ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  61. IUUQTIPOPEFW
    6MUSBGBTUXFCGSBNFXPSLGPSUIF&EHF

    View full-size slide