The power of Web-standards

Deno Fest - 2023.10.20 @Tokyo Akihabara
Yusuke Wada

Transcript

1. The power of Web-standards
   Deno Fest - 2023.10.20 @Tokyo Akihabara
   
   
   Yusuke Wada
   

   View Slide

2. ࣗݾ঺հ
   w :VTVLF8BEB࿨ా༟հ
   w %FWFMPQFS"EWPDBUF!$MPVE
   fl
   BSF
   w $SFBUPSPG)POP
   w $PGPVOEFSPG#PLFUF
   w 8FCGSBNFXPSLEFWFMPQFS
   w IUUQTHJUIVCDPNZVTVLFCF
   

   View Slide

3. ࠓ೔࿩͢͜ͱ
   8FCTUBOEBSETͱ)POPʢΠϯτϩʣ
   8FCTUBOEBSETͷ͍͢͝ͱ͜Ζ
   ελϯμʔυͰ͸ͳ͍΋ͷ
   4FSWJDF8PSLFS.BHJD
   Web-standardsͷ͢͝͞Λ͍͔ͨ͠
   
   
   Denoͱ͔Ͱಈ͘ΞϓϦΛͭ͘ΕΔΑ͏ʹͳΔʁ
   

   View Slide

4. 1. Web-standardsͱHono
   

   View Slide

5. Web-standards
   w +BWB4DSJQUͷ؀ڥͰڞ௨Ͱ࢖ΘΕΔͭͭ͋Δ8FCܥͷ"1*
   w ΋ͪΖΜ%FOP΋ʂ
   w ϒϥ΢βͷ"1*ΛαʔόʔαΠυͰ΋࢖͑ΔΑ͏ʹ͠Α͏ͱ͍ͯ͠Δ
   w 8JOUFS$(ͰσΟεΧογϣϯ͞Ε͍ͯΔ
   w 8FCJOUFSPQFSBCMF3VOUJNFT$PNNVOJUZ(SPVQ
   w ϒϥ΢βҎ֎ͷ؀ڥ
   w ʮ8FC૬ޓӡ༻ՄೳʯΛ໨ࢦ͢
   IUUQTXJOUFSDHPSHΑΓ
   ٞ࿦ʹࢀՃͯ͠Δͷ͸͜Ε͚ͩͰ͸ͳ͍
   

   View Slide

6. fetch
   Request/URL/Response
   

   View Slide

7. ͦͷଞ
   w )FBEFST
   w 63-4FBSDI1BSBNT
   w 'PSN%BUB
   w #MPC
   w 3FBEBCMF4USFBN
   w 5FYU%FDPEFS
   w BUPC
   CUPB
   
   w ʜ
   ࠷খݶͰ਌͠Έ΍͍͢API
   

   View Slide

8. Hono
   w 8FCTUBOEBSETͷ"1*ͷΈΛ࢖ͬͨ8FCϑϨʔϜϫʔΫ
   w ֎෦ϥΠϒϥϦ΁ͷґଘ͸
   w ೥݄͔Β։ൃͯ͠໿೥
   w ౰ॳ͸$MPVE
   fl
   BSF8PSLFSTͰಈ͔ͨ͢Ίʹͭ͘ΒΕͨ
   w ͦͷޙɺ'BTUMZ$PNQVUF!&EHFɺ%FOPɺ#VOɺ/PEFKTͷॱ൪ͰରԠ
   w ͦͷܦݧ͔Βɺ8FCTUBOEBSETʹ͍ͭͯޠΔ
   Hono - The Web Framework built on Web Standards
   
   
   https://hono.dev/
   

   View Slide

9. 2. Web-standardsͷ͍͢͝ͱ͜Ζ
   

   View Slide

10. Web-standardsͷ͍͢͝ͱ͜Ζ
    ଞݴޠͰۤ࿑͍ͯͨ͠΋ͷ͕͢Ͱʹ͋Δࠓճ͸ͱ͹͠·͢ʜ
    ΄ͱΜͲͷϥϯλΠϜͰ࣮૷͞ΕͯΔ
    ςετ͕͠΍͍͢
    

    View Slide

11. 1. ֤ݴޠͰۤ࿑͍ͯͨ͠΋ͷ͕͢Ͱʹ͋Δ
    w ྫ1FSM14(*
    w ೥ͷ:"1$"TJBͰॳΊͯޠΒΕΔ
    w ϑϨʔϜϫʔΫͱ8FCαʔόʔؒͷ໿ଋࣄ
    w 1ZUIPOͰ͍͏84(*ɺ3VCZͷ3BDL
    ͱ͹͠·͢…
    

    View Slide

12. ϑϨʔϜϫʔΫͱWebαʔό
    Catalyst
    CGI::Application
    Jifty
    Mojo
    Perl Hackers Hub #1 -WEB+DB PRESS 2010.02.24
    
    
    https://gihyo.jp/dev/serial/01/perl-hackers-hub/000101
    Apache
    lighttpd
    nginx
    HTTP::Server::Simple
    ͱ͹͠·͢…
    

    View Slide

13. PSGIʹΑΔΠϯλʔϑΣʔεڞ௨Խ
    Catalyst
    CGI::Application
    Jifty
    Mojo
    Apache
    lighttpd
    nginx
    HTTP::Server::Simple
    PSGI
    Perl Hackers Hub #1 -WEB+DB PRESS 2010.02.24
    
    
    https://gihyo.jp/dev/serial/01/perl-hackers-hub/000101
    ͱ͹͠·͢…
    

    View Slide

14. Web-standards API
    Deno
    workerd
    Bun
    Node.js
    Hono
    Remix
    Astro
    Fresh
    Web
    
    
    standards
    ͱ͹͠·͢…
    

    View Slide

15. Plack
    w 14(*ͷ࣮૷ͷͻͱͭ
    w 8FCΞϓϦϑϨʔϜϫʔΫΛ࡞ΔͨΊͷΩοτ
    w γϯϓϧͳ"1*
    w ͦΕ͕΋͏ඪ४Ͱ࢖͑Δ
    ͱ͹͠·͢…
    

    View Slide

16. Plack::RequestʹΑΔ࣮૷
    ͱ͹͠·͢…
    

    View Slide

17. ΄΅ಉ͡API͕ϥϯλΠϜඪ४Ͱ͋Δ
    ͱ͹͠·͢…
    

    View Slide

18. ͍͍࣌୅ʹͳͬͨ
    w ࠓʹͳͬͯ͸౰ͨΓલʁ
    w աڈʹ֤ݴޠʢྫ1FSMɺ3VCZɺ1ZUIPOʣ͕ۤ࿑͖ͯͨ͠΋ͷ͕͢Ͱʹ͋Δ
    w ෇͚Ճ͑Δͱɺͦͷ෼"1*͕ચ࿅͞Ε͍ͯΔ
    ͱ͹͠·͢…
    

    View Slide

19. 2. ΄ͱΜͲͷϥϯλΠϜͰ࣮૷͞Ε͍ͯΔ
    w ຊ౰ʹ)POP͸Ͳ͜Ͱ΋ಈ͘
    $MPVE
    fl
    BSF8PSLFST
    'BTUMZ$PNQVUF!&EHF
    %FOP
    #VO
    -BHPO
    /PEFKT
    7FSCBM
    "84-BNCEB
    -BNCEB!&EHF
    create-hono Ͱ͸12ͷςϯϓϨʔτ͕࢖͑Δ
    

    View Slide

20. ImportͱΤϯτϦϙΠϯτ͕ҧ͏͚ͩ
    import
    ΤϯτϦϙΠϯτ
    

    View Slide

21. $MPVEGMBSF8PSLFST#VO
    

    View Slide

22. 'BTUMZ$PNQVUF!&EHF
    

    View Slide

23. -BHPO
    

    View Slide

24. %FOP
    

    View Slide

25. /PEFKT
    

    View Slide

26. "84-BNCEB
    

    View Slide

27. /FYUKT
    

    View Slide

28. Ͳ͜Ͱ΋ಈ͘ͷ͍͢͝
    w ଞʹ΋
    w -BNCEB!&EHF
    w /FUMJGZ
    w 7FSDFM
    w ͳͲͰಈ͘
    

    View Slide

29. 3. ςετ͕͠΍͍͢
    w ॻ͖΍͍͢
    w 3FRVFTU3FTQPOTFΛॻ͍ͯ͢΂ͯͷέʔεΛΧόʔͰ͖Δ
    w αʔόʔΛ্ཱͪ͛ͳͯ͘΋FFͬΆ͍
    w ૬ޓӡ༻Մೳ
    

    View Slide

30. Honoͷςετ
    Honoͷςετʢ12,000ߦʣ͸͢΂ͯ͜Μͳײ͡
    
    
    ྫ: ϧʔςΟϯάɺϦΫΤετɺϨεϙϯεͷѻ͍ɺϛυϧ΢ΣΞͳͲͷςετ
    /helloʹGETϦΫΤετ͢ΔRequestΦϒδΣΫτ
    
    
    ΛΞϓϦʹ౉͍ͯ͠Δ
    ResponseΦϒδΣΫτ
    

    View Slide

31. ૬ޓӡ༻Մೳ
    https://github.com/honojs/hono/pull/1558
    w )POPͷςετ͸$MPVE
    fl
    BSFͷ؀ڥΛ࢖͍ͬͯͨ
    w ͦΕΛ֎ͨ͠/PEFKT΁ͷҠߦ
    w ΍ͬͨ͜ͱ͸ҎԼ͚ͩ
    w OPEFDSZQUPΛDSZQUP΁Ϛοϐϯά
    w $BDIF"1*ͷϞοΫ
    w .%ͷςετΛεΩοϓ
    w XPSLFSEʹ͸͋Δ͕8FC$SZQUPελϯμʔυͰ͸ͳ͍
    w ϥϯλΠϜΩʔΛXPSLFSE͔ΒOPEF΁มߋ
    

    View Slide

32. Ҏ্ɺWeb-standardsͷ͍͢͝ͱ͜ΖͰͨ͠
    ଞݴޠͰۤ࿑͍ͯͨ͠΋ͷ͕͢Ͱʹ͋Δ
    ΄ͱΜͲͷϥϯλΠϜͰ࣮૷͞ΕͯΔ
    ςετ͕͠΍͍͢
    ʢ"1*͕ચ࿅͞Ε͍ͯΔʣ
    ʢ"1*͕ϛχϚϜ͔ͩΒ֮͑Δ͜ͱ͕গͳ͍ʣ
    ʢ։ൃମݧ͕Α͍ʣ
    

    View Slide

33. 3. ελϯμʔυͰ͸ͳ͍΋ͷ
    

    View Slide

34. ελϯμʔυͰ͸ͳ͍΋ͷΛ೺Ѳ͠ͳͯ͘͸͍͚ͳ͍
    w ϚϧνϥϯλΠϜରԠͰ໰୊ʹͳΔͷ͸ͭ
    ؀ڥม਺
    ϑΝΠϧγεςϜ
    

    View Slide

35. 1. ؀ڥม਺
    w ͍ΘΏΔγεςϜͷ؀ڥม਺͚ͩͰ͸ͳ͍ʢྫ$MPVE
    fl
    BSF8PSLFSTʣ
    w $MPVE
    fl
    BSFADFOW50,&/A
    w %FOPA%FOPFOWA
    w #VOAQSPDFTTFOWAPSA#VOFOWA
    w /PEFKTAQSPDFTTFOWA
    w 'BTUMZŠͦ΋ͦ΋Ϣʔβʔ͕஋Ληοτ͢Δ΋ͷͰ͸ͳ͍
    w A'"45-:@)045/".&A A'"45-:@101A A'"45-:@3&(*0/Aʜ
    w Ҏલɺ&EHF%JDUJPOBSZΛ࢖ͬͯ50,&/Λѻͬͨ͜ͱ͕͋Δ
    w A$PO
    fi
    H4UPSFAͱ͍͏ͷ͕͋ΔΒ͍͠
    

    View Slide

36. Adapterϔϧύʔͷ `env()`
    w ֤ϥϯλΠϜґଘΛٵऩͯ͠ɺಁաతʹ؀ڥม਺ʹΞΫηεͰ͖Δ
    

    View Slide

37. `env()` ͷ࣮૷
    w ʮϥϯλΠϜΩʔʯΛΩʔʹ஋Λऔಘ͢Δ
    

    View Slide

38. ϥϯλΠϜΩʔ
    w 8JOUFS$(͕ʮ3VOUJNF,FZT4QFDJ
    fi
    DBUJPOʯΛ͍ͭͬͯ͘Δ
    w IUUQTSVOUJNFLFZTQSPQPTBMXJOUFSDHPSH
    w OPEF
    w EFOP
    w CVO
    w XPSLFSE$MPVE
    fl
    BSF8PSLFST
    w GBTUMZ
    w FEHFMJHIU7FSDFM&EHF'VODUJPOT
    w MBHPO
    w ʜ
    

    View Slide

39. `getRuntimeKey()`
    

    View Slide

40. `getRuntimeKey()` ͷ࣮૷
    

    View Slide

41. 2. ϑΝΠϧγεςϜ
    w ֤ϥϯλΠϜ͝ͱʹϑΝΠϧγεςϜ΁ͷΞΫηεํ๏͕ҧ͏
    w %FOPA%FOPPQFO
    A
    w #VOA#VO
    fi
    MF
    A
    w ͦ΋ͦ΋ϑΝΠϧγεςϜ͕ͳ͍ʜ
    w $MPVE
    fl
    BSF7FSDFM"84ʜ
    w ϑΝΠϧγεςϜ͡Όͳ͍ετϨʔδ
    w $MPVE
    fl
    BSF,73
    w 7FSDFM#MPC
    w "NB[PO4
    

    View Slide

42. ֤ϥϯλΠϜ͝ͱʹ`serveStatic()`Λ࣮૷͢Δ
    w ϥϯλΠϜϓϥοτϑΥʔϜ͝ͱͷ"EBQUFSͰATFSWF4UBUJD
    AΛ࣮૷
    w %FOP
    w #VO
    w /PEFKT
    w $MPVE
    fl
    BSF8PSLFST
    

    View Slide

43. ςετΛ͢Δ
    w ϥϯλΠϜͰ͕ࠩͰΔͱ͜Ζ͚ͩ$*Ͱςετ
    w #BTJDೝূ$SZQUPܥʢ࠷ۙ͸ฏؾʣ
    w AFOW
    A
    w AHFU3VOUJNF,FZ
    A
    w ATFSWF4UBUJD
    A
    HonoͷCI
    
    
    Mainͷଞʹ8ͭͷϥϯλΠϜͷςετ͕૸Δ
    

    View Slide

44. ελϯμʔυͳ͸͚ͣͩͲಉ͡͡Όͳ͍΋ͷ
    w ελϯμʔυͬΆ͍͚ͲϛχϚϜίϞϯʹ͸ೖͬͯͳ͍΋ͷ
    w IUUQTDPNNPONJOBQJQSPQPTBMXJOUFSDHPSH
    w $BDIF"1*$MPVE
    fl
    BSFɺ%FOPͷΈ
    w 63-1BUUFSO#VOͰ͸࣮૷͠ͳ͍
    w ࣮૷͕ϛεͬͯΔ
    w #VO3FRVFTUΦϒδΣΫτΛDMPOF
    ͯ͠KTPO
    ͢Δͱى͖Δόά
    w ಠ࣮ࣗ૷
    w $MPVE
    fl
    BSF3FRVFTUΠϯελϯεͷDG
    w 3FBDUͷGFUDIʁ
    

    View Slide

45. ͱ͸͍͑ҙࣝ͢Ε͹OK
    w ؀ڥม਺ͱϑΝΠϧγεςϜ
    w ʮϝΠϯʯ͸͔ͬ͠Γςετ
    w ϥϯλΠϜґଘ͸͚ͦͩ͜$*Ͱอূ͢Δ
    

    View Slide

46. 4. Service Worker Magic
    

    View Slide

47. Hono͸ϒϥ΢βͰ΋ಈ͘
    ౰ͨΓલ͚ͩͲ໘ന͍ʂ
    
    
    14ߦͷHTMLͷதͰHonoΛಈ͔ͤΔʂ
    

    View Slide

48. Playground
    w ࡢ೔࡞ͬͨ
    w εΫϦϓτຒΊࠐΈ)5.-͚ͩ
    w ߦͰͦΕͳΓʹಈ͘
    w IUUQTQMBZHSPVOEIPOPEFW
    

    View Slide

49. ͦͯ͠ɺHono͸Service WorkerͰ΋ಈ͘
    w 4FSWJDF8PSLFSϒϥ΢β಺Ͱಈ͘ϫʔΧʔɺΦϑϥΠϯΩϟογϡͳͲ
    w ͦΕΛར༻ͨ͠ʮϚδοΫʯ
    w αʔόʔ͕ࣗ෼ࣗ਎ͱಉ͡ϓϩάϥϜΛ഑৴ͯ͠ɺͦΕΛϒϥ΢β͕ϩʔυ͠
    ͯɺͲͪΒͰ΋ಉ͡ίʔυ͕࣮ߦ͞Εɺαʔόʔ͚ͩͰ͸ͳ͘ϒϥ΢β͔Β
    ΋ϨεϙϯεΛฦ͢
    

    View Slide

50. αʔόʔ͸$MPVE
    fl
    BSF8PSLFSTɺϒϥ΢β͸4FSWJDF8PSLFSͷϓϩάϥϜΛࢦ͢
    αʔόʔͷϓϩάϥϜ͸TXKTɺϒϥ΢βͰಈ͘ϓϩάϥϜ΋TXKT
    શ͘ಉ͡಺༰͔ͭಉ͡ϦιʔεΛࢀরͯ͠ɺಉ͡Α͏ʹಈ͘
    αʔόʔTXKT͕ࣗ෼ࣗ਎ͷίʔυTXKTΛTXKTͱ͍͏ύεͰ഑৴͢Δ
    ʹΞΫηε͢ΔͱTXKT͕4FSWJDF8PSLFSͱͯ͠ొ࿥͞ΕΔ
    TXΛ4FSWJDF8PSLFSͷείʔϓʹ͢Δ
    TFSWFSIFMMPʹΞΫηε͢Δͱαʔόʔ͔ΒϨεϙϯε͕ฦΔ
    TXIFMMPʹΞΫηε͢Δͱ4FSWJDF8PSLFS͕Πϯλʔηϓτͯ͠ɺϒϥ΢β͔Β
    Ϩεϙϯε͕ฦΔ
    

    View Slide

51. σϞ
    https://user-images.githubusercontent.com/10682/153455595-77fea6e5-93d7-4698-8d75-85896edd995b.gif
    

    View Slide

52. Ҏ্
    8FCTUBOEBSETͱ)POP
    8FCTUBOEBSETͷ͍͢͝ͱ͜Ζ
    ελϯμʔυͰ͸ͳ͍΋ͷ
    4FSWJDF8PSLFS.BHJD
    

    View Slide

53. ·ͱΊ
    w 8FCTUBOEBSETͷ͢͝͞
    w ૬ޓӡ༻Մೳɺςετ͕͠΍͍͢ɺ%9͕Α͍
    w ελϯμʔυ͡Όͳ͍΋ͷ
    w ؀ڥม਺ɺϑΝΠϧγεςϜɺͦͷଞ
    Web-standardsΛཧղ͓ͯ͘͠ͱ
    
    
    ͦͷ͢͝͞Λ׆͔ͯ͠
    
    
    Deno΍ͦͷଞͷϥϯλΠϜͰಈ͘ΞϓϦέʔγϣϯΛ૬ޓӡ༻Մೳʹ࡞ΕΔʂ
    

    View Slide