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
2. ࣗݾ঺հ w :VTVLF
   8BEB
   
   ࿨ా༟հ
   w %FWFMPQFS
   "EWPDBUF
   !$MPVE fl BSF
   w $SFBUPS
   PG
   )POP
   w $PGPVOEFS
   PG
   #PLFUF
   w 8FC
   GSBNFXPSL
   EFWFMPQFS
   w IUUQTHJUIVCDPNZVTVLFCF
3. ࠓ೔࿩͢͜ͱ 8FCTUBOEBSETͱ)POPʢΠϯτϩʣ
   8FCTUBOEBSETͷ͍͢͝ͱ͜Ζ
   ελϯμʔυͰ͸ͳ͍΋ͷ
   4FSWJDF
   8PSLFS
   .BHJD Web-standardsͷ͢͝͞Λ͍͔ͨ͠ Denoͱ͔Ͱಈ͘ΞϓϦΛͭ͘ΕΔΑ͏ʹͳΔʁ
4. 1. Web-standardsͱHono
5. Web-standards w +BWB4DSJQUͷ؀ڥͰڞ௨Ͱ࢖ΘΕΔͭͭ͋Δ8FCܥͷ"1*
   w ΋ͪΖΜ%FOP΋ʂ
   w ϒϥ΢βͷ"1*ΛαʔόʔαΠυͰ΋࢖͑ΔΑ͏ʹ͠Α͏ͱ͍ͯ͠Δ
   w 8JOUFS$(ͰσΟεΧογϣϯ͞Ε͍ͯΔ
   w 8FCJOUFSPQFSBCMF
   3VOUJNFT
   $PNNVOJUZ
   (SPVQ
   w ϒϥ΢βҎ֎ͷ؀ڥ
   w ʮ8FC૬ޓӡ༻ՄೳʯΛ໨ࢦ͢ IUUQTXJOUFSDHPSH
   ΑΓ
   ٞ࿦ʹࢀՃͯ͠Δͷ͸͜Ε͚ͩͰ͸ͳ͍
6. fetch Request/URL/Response
7. ͦͷଞ w )FBEFST
   w 63-4FBSDI1BSBNT
   w 'PSN%BUB
   w #MPC
   w 3FBEBCMF4USFBN
   w 5FYU%FDPEFS
   w BUPC CUPB
   w ʜ ࠷খݶͰ਌͠Έ΍͍͢API
8. Hono w 8FCTUBOEBSETͷ"1*ͷΈΛ࢖ͬͨ8FCϑϨʔϜϫʔΫ
   w ֎෦ϥΠϒϥϦ΁ͷґଘ͸
   w ೥݄͔Β։ൃͯ͠໿೥
   w ౰ॳ͸$MPVE fl BSF
   8PSLFSTͰಈ͔ͨ͢Ίʹͭ͘ΒΕͨ
   w ͦͷޙɺ'BTUMZ
   $PNQVUF!&EHFɺ%FOPɺ#VOɺ/PEFKTͷॱ൪ͰରԠ
   w ͦͷܦݧ͔Βɺ8FCTUBOEBSETʹ͍ͭͯޠΔ Hono - The Web Framework built on Web Standards https://hono.dev/
9. 2. Web-standardsͷ͍͢͝ͱ͜Ζ
10. Web-standardsͷ͍͢͝ͱ͜Ζ ଞݴޠͰۤ࿑͍ͯͨ͠΋ͷ͕͢Ͱʹ͋Δ
    
    ࠓճ͸ͱ͹͠·͢ʜ
    ΄ͱΜͲͷϥϯλΠϜͰ࣮૷͞ΕͯΔ
    ςετ͕͠΍͍͢
11. 1. ֤ݴޠͰۤ࿑͍ͯͨ͠΋ͷ͕͢Ͱʹ͋Δ w ྫ
    1FSM
    
    14(*
    w ೥ͷ:"1$"TJBͰॳΊͯޠΒΕΔ
    w ϑϨʔϜϫʔΫͱ8FCαʔόʔؒͷ໿ଋࣄ
    w 1ZUIPOͰ͍͏84(*ɺ3VCZͷ3BDL ͱ͹͠·͢…
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 ͱ͹͠·͢…
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 ͱ͹͠·͢…
14. Web-standards API Deno workerd Bun Node.js Hono Remix Astro Fresh Web standards ͱ͹͠·͢…
15. Plack w 14(*ͷ࣮૷ͷͻͱͭ
    w 8FCΞϓϦϑϨʔϜϫʔΫΛ࡞ΔͨΊͷΩοτ
    w γϯϓϧͳ"1*
    w ͦΕ͕΋͏ඪ४Ͱ࢖͑Δ ͱ͹͠·͢…
16. Plack::RequestʹΑΔ࣮૷ ͱ͹͠·͢…
17. ΄΅ಉ͡API͕ϥϯλΠϜඪ४Ͱ͋Δ ͱ͹͠·͢…
18. ͍͍࣌୅ʹͳͬͨ w ࠓʹͳͬͯ͸౰ͨΓલʁ
    w աڈʹ֤ݴޠʢྫ
    1FSMɺ3VCZɺ1ZUIPOʣ͕ۤ࿑͖ͯͨ͠΋ͷ͕͢Ͱʹ͋Δ
    w ෇͚Ճ͑Δͱɺͦͷ෼"1*͕ચ࿅͞Ε͍ͯΔ ͱ͹͠·͢…
19. 2. ΄ͱΜͲͷϥϯλΠϜͰ࣮૷͞Ε͍ͯΔ w ຊ౰ʹ)POP͸Ͳ͜Ͱ΋ಈ͘
    $MPVE fl BSF
    8PSLFST
    'BTUMZ
    $PNQVUF!&EHF
    %FOP
    #VO
    -BHPO
    /PEFKT
    7FSCBM
    "84
    -BNCEB
    -BNCEB!&EHF create-hono Ͱ͸12ͷςϯϓϨʔτ͕࢖͑Δ
20. ImportͱΤϯτϦϙΠϯτ͕ҧ͏͚ͩ import ΤϯτϦϙΠϯτ
21. $MPVEGMBSF
    8PSLFST
    
    #VO
22. 'BTUMZ
    $PNQVUF!&EHF
23. -BHPO
24. %FOP
25. /PEFKT
26. "84
    -BNCEB
27. /FYUKT
28. Ͳ͜Ͱ΋ಈ͘ͷ͍͢͝ w ଞʹ΋
    w -BNCEB!&EHF
    w /FUMJGZ
    w 7FSDFM
    w ͳͲͰಈ͘
29. 3. ςετ͕͠΍͍͢ w ॻ͖΍͍͢
    w 3FRVFTU3FTQPOTFΛॻ͍ͯ͢΂ͯͷέʔεΛΧόʔͰ͖Δ
    w αʔόʔΛ্ཱͪ͛ͳͯ͘΋FFͬΆ͍
    w ૬ޓӡ༻Մೳ
30. Honoͷςετ Honoͷςετʢ12,000ߦʣ͸͢΂ͯ͜Μͳײ͡ ྫ: ϧʔςΟϯάɺϦΫΤετɺϨεϙϯεͷѻ͍ɺϛυϧ΢ΣΞͳͲͷςετ /helloʹGETϦΫΤετ͢ΔRequestΦϒδΣΫτ ΛΞϓϦʹ౉͍ͯ͠Δ ResponseΦϒδΣΫτ
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΁มߋ
32. Ҏ্ɺWeb-standardsͷ͍͢͝ͱ͜ΖͰͨ͠ ଞݴޠͰۤ࿑͍ͯͨ͠΋ͷ͕͢Ͱʹ͋Δ
    ΄ͱΜͲͷϥϯλΠϜͰ࣮૷͞ΕͯΔ
    ςετ͕͠΍͍͢
    ʢ"1*͕ચ࿅͞Ε͍ͯΔʣ
    ʢ"1*͕ϛχϚϜ͔ͩΒ֮͑Δ͜ͱ͕গͳ͍ʣ
    ʢ
    ։ൃମݧ͕Α͍ʣ
33. 3. ελϯμʔυͰ͸ͳ͍΋ͷ
34. ελϯμʔυͰ͸ͳ͍΋ͷΛ೺Ѳ͠ͳͯ͘͸͍͚ͳ͍ w ϚϧνϥϯλΠϜରԠͰ໰୊ʹͳΔͷ͸ͭ
    ؀ڥม਺
    ϑΝΠϧγεςϜ
35. 1. ؀ڥม਺ w ͍ΘΏΔγεςϜͷ؀ڥม਺͚ͩͰ͸ͳ͍ʢྫ
    $MPVE fl BSF
    8PSLFSTʣ
    w $MPVE fl BSF
    ADFOW50,&/A
    w %FOP
    A%FOPFOWA
    w #VO
    AQSPDFTTFOWA
    PS
    A#VOFOWA
    w /PEFKT
    AQSPDFTTFOWA
    w 'BTUMZ
    Š
    ͦ΋ͦ΋Ϣʔβʔ͕஋Ληοτ͢Δ΋ͷͰ͸ͳ͍
    w A'"45-:@)045/".&A
    A'"45-:@101A
    A'"45-:@3&(*0/Aʜ
    w Ҏલɺ&EHF
    %JDUJPOBSZΛ࢖ͬͯ50,&/Λѻͬͨ͜ͱ͕͋Δ
    w A$PO fi H4UPSFAͱ͍͏ͷ͕͋ΔΒ͍͠
36. Adapterϔϧύʔͷ `env()` w ֤ϥϯλΠϜґଘΛٵऩͯ͠ɺಁաతʹ؀ڥม਺ʹΞΫηεͰ͖Δ
37. `env()` ͷ࣮૷ w ʮϥϯλΠϜΩʔʯΛΩʔʹ஋Λऔಘ͢Δ
38. ϥϯλΠϜΩʔ w 8JOUFS$(͕ʮ3VOUJNF
    ,FZT
    4QFDJ fi DBUJPOʯΛ͍ͭͬͯ͘Δ
    w IUUQTSVOUJNFLFZTQSPQPTBMXJOUFSDHPSH
    w OPEF
    w EFOP
    w CVO
    w XPSLFSE
    
    $MPVE fl BSF
    8PSLFST
    w GBTUMZ
    w FEHFMJHIU
    
    7FSDFM
    &EHF
    'VODUJPOT
    w MBHPO
    w ʜ
39. `getRuntimeKey()`
40. `getRuntimeKey()` ͷ࣮૷
41. 2. ϑΝΠϧγεςϜ w ֤ϥϯλΠϜ͝ͱʹϑΝΠϧγεςϜ΁ͷΞΫηεํ๏͕ҧ͏
    w %FOP
    
    A%FOPPQFO A
    w #VO
    
    A#VO fi MF A
    w ͦ΋ͦ΋ϑΝΠϧγεςϜ͕ͳ͍ʜ
    w $MPVE fl BSF7FSDFM"84ʜ
    w ϑΝΠϧγεςϜ͡Όͳ͍ετϨʔδ
    w $MPVE fl BSF
    ,7
    
    3
    w 7FSDFM
    #MPC
    w "NB[PO
    4
42. ֤ϥϯλΠϜ͝ͱʹ`serveStatic()`Λ࣮૷͢Δ w ϥϯλΠϜϓϥοτϑΥʔϜ͝ͱͷ"EBQUFSͰATFSWF4UBUJD AΛ࣮૷
    w %FOP
    w #VO
    w /PEFKT
    w $MPVE fl BSF
    8PSLFST
43. ςετΛ͢Δ w ϥϯλΠϜͰ͕ࠩͰΔͱ͜Ζ͚ͩ$*Ͱςετ
    w #BTJDೝূ
    
    $SZQUPܥʢ࠷ۙ͸ฏؾʣ
    w AFOW A
    w AHFU3VOUJNF,FZ A
    w ATFSWF4UBUJD A HonoͷCI Mainͷଞʹ8ͭͷϥϯλΠϜͷςετ͕૸Δ
44. ελϯμʔυͳ͸͚ͣͩͲಉ͡͡Όͳ͍΋ͷ w ελϯμʔυͬΆ͍͚ͲϛχϚϜίϞϯʹ͸ೖͬͯͳ͍΋ͷ
    w IUUQTDPNNPONJOBQJQSPQPTBMXJOUFSDHPSH
    w $BDIF
    "1*
    
    $MPVE fl BSFɺ%FOPͷΈ
    w 63-1BUUFSO
    
    #VOͰ͸࣮૷͠ͳ͍
    w ࣮૷͕ϛεͬͯΔ
    w #VO
    
    3FRVFTUΦϒδΣΫτΛDMPOF ͯ͠KTPO ͢Δͱى͖Δόά
    w ಠ࣮ࣗ૷
    w $MPVE fl BSF
    
    3FRVFTUΠϯελϯεͷDG
    w 3FBDUͷGFUDIʁ
45. ͱ͸͍͑ҙࣝ͢Ε͹OK w ؀ڥม਺ͱϑΝΠϧγεςϜ
    w ʮϝΠϯʯ͸͔ͬ͠Γςετ
    w ϥϯλΠϜґଘ͸͚ͦͩ͜$*Ͱอূ͢Δ
46. 4. Service Worker Magic
47. Hono͸ϒϥ΢βͰ΋ಈ͘ ౰ͨΓલ͚ͩͲ໘ന͍ʂ 14ߦͷHTMLͷதͰHonoΛಈ͔ͤΔʂ
48. Playground w ࡢ೔࡞ͬͨ
    w εΫϦϓτຒΊࠐΈ)5.-͚ͩ
    w ߦͰͦΕͳΓʹಈ͘
    w IUUQTQMBZHSPVOEIPOPEFW
49. ͦͯ͠ɺHono͸Service WorkerͰ΋ಈ͘ w 4FSWJDF
    8PSLFS
    
    ϒϥ΢β಺Ͱಈ͘ϫʔΧʔɺΦϑϥΠϯΩϟογϡͳͲ
    w ͦΕΛར༻ͨ͠ʮϚδοΫʯ
    w αʔόʔ͕ࣗ෼ࣗ਎ͱಉ͡ϓϩάϥϜΛ഑৴ͯ͠ɺͦΕΛϒϥ΢β͕ϩʔυ͠ ͯɺͲͪΒͰ΋ಉ͡ίʔυ͕࣮ߦ͞Εɺαʔόʔ͚ͩͰ͸ͳ͘ϒϥ΢β͔Β ΋ϨεϙϯεΛฦ͢
50. αʔόʔ͸$MPVE fl BSF
    8PSLFSTɺϒϥ΢β͸4FSWJDF
    8PSLFSͷϓϩάϥϜΛࢦ͢
    αʔόʔͷϓϩάϥϜ͸TXKTɺϒϥ΢βͰಈ͘ϓϩάϥϜ΋TXKT
    શ͘ಉ͡಺༰͔ͭಉ͡ϦιʔεΛࢀরͯ͠ɺಉ͡Α͏ʹಈ͘
    αʔόʔTXKT͕ࣗ෼ࣗ਎ͷίʔυTXKTΛTXKTͱ͍͏ύεͰ഑৴͢Δ
    ʹΞΫηε͢ΔͱTXKT͕4FSWJDF
    8PSLFSͱͯ͠ొ࿥͞ΕΔ
    TX Λ4FSWJDF
    8PSLFSͷείʔϓʹ͢Δ
    TFSWFSIFMMPʹΞΫηε͢Δͱαʔόʔ͔ΒϨεϙϯε͕ฦΔ
    TXIFMMPʹΞΫηε͢Δͱ4FSWJDF
    8PSLFS͕Πϯλʔηϓτͯ͠ɺϒϥ΢β͔Β Ϩεϙϯε͕ฦΔ
51. σϞ https://user-images.githubusercontent.com/10682/153455595-77fea6e5-93d7-4698-8d75-85896edd995b.gif
52. Ҏ্ 8FCTUBOEBSETͱ)POP
    8FCTUBOEBSETͷ͍͢͝ͱ͜Ζ
    ελϯμʔυͰ͸ͳ͍΋ͷ
    4FSWJDF
    8PSLFS
    .BHJD
53. ·ͱΊ w 8FCTUBOEBSETͷ͢͝͞
    w ૬ޓӡ༻Մೳɺςετ͕͠΍͍͢ɺ%9͕Α͍
    w ελϯμʔυ͡Όͳ͍΋ͷ
    w ؀ڥม਺ɺϑΝΠϧγεςϜɺͦͷଞ Web-standardsΛཧղ͓ͯ͘͠ͱ ͦͷ͢͝͞Λ׆͔ͯ͠ Deno΍ͦͷଞͷϥϯλΠϜͰಈ͘ΞϓϦέʔγϣϯΛ૬ޓӡ༻Մೳʹ࡞ΕΔʂ