プロジェクト河豚🐡でWebの未来を感じてみよう #jsfes #projectfugu

JavaScript祭り2022での登壇内容です。

- JavaScript祭り2022 https://javascript-fes.doorkeeper.jp/events/138214
- Fugu Tracker https://fugu-tracker.web.app/
- IoTLT vol89にもぜひ来てね！ https://iotlt.connpass.com/event/252034/

Transcript

1. 
   +4'&4 ϓϩδΣΫτՏಲ🐡Ͱ8FCͷະདྷΛײͯ͡ΈΑ͏ ϓϩτΞ΢τελδΦ
   ੁݪͷͼ͚͢
   !OCJTVLF
2. ੁݪ
   ͷͼ͚͢ dotstudio, Inc. ɾϓϩτλΠϐϯάઐ໳εΫʔϧʮϓϩτΞ΢τελδΦʯͷӡӦ
   
   
   
   σδλϧϋϦ΢ουେֶେֶӃ
   ඇৗۈߨࢣ
   ϓϩμΫτϓϩτλΠϐϯά*
   ɾݸਓ׆ಈ
   
   
   
   *P5-5
   ʢࠃ಺࠷େͷ*P5ίϛϡχςΟʣ
   
   
   
   -*/&
   "1*
   &YQFSU
   
   .JDSPTPGU
   .71
   
   *#.
   $IBNQJPO
   
   
   
   ࣾձษڧͰډञ԰
   ཆ࿝೫୍ͰΞϧόΠτ
   ʢҰݢΊञ৔
   ৽ڮళ
   Ͱಇ͍ͯ·ͨ͠ɻʣ OPCJTVLF
   TVHBXBSB
3. +4ͬΆ͍׆ಈ
4. 1SPKFDU
   'VHV
   🐡 ΢ΣϒɾέΠύϏϦςΟɾϓϩδΣΫτͱ΋ݺ͹ΕΔ͜ͷϓϩδΣΫτ͸ɺ ͜Ε·ͰωΠςΟϒΞϓϦέʔγϣϯͰ͔࣮͠ݱͰ͖ͳ͔ͬͨػೳΛ௥Ճ ͢Δ͜ͱͰɺ΢ΣϒϓϥοτϑΥʔϜΛվળ͢Δ΋ͷͰ͢ɻ %FFQ-຋༁ 🐡 Ҿ༻
   IUUQTGFMJYHFSTDIBVDPNXFCDBQBCJMJUJFTQSPKFDUGVHVHPPHMFXIBUJTQSPKFDUGVHV 1SPKFDU
   'VHV
   🐡
   ͸ɺ΢Σϒ্Ͱಈ࡞͢Δ৽͍͠ΫϥεͷΞϓϦέʔγϣϯΛ࣮ ݱ͢ΔͨΊʹɺ΢ΣϒͷػೳͷΪϟοϓΛຒΊΔͨΊͷऔΓ૊ΈͰ͢ɻ %FFQ-຋༁ Ҿ༻
   IUUQTXXXDISPNJVNPSHUFBNTXFCDBQBCJMJUJFTGVHV
5. 1SPKFDU
   'VHV
   🐡 🐡 ๻ͳΓͷҙ༁ ैདྷωΠςΟϒΞϓϦͰ͔͠ѻ͑ͳ͔ͬͨσόΠεͷػೳʹ
   +BWB4DSJQU 8FCʣ͔ΒΞΫηεͰ͖ΔΑ͏ʹ͢Δ"1*ͷػೳݕ౼ϓϩδΣΫτ ˺8FCͷະདྷΛσΟεΧογϣϯ͍ͯ͠Δ৔ॴͷҰͭʣ
6. ݱঢ়ɺ18"ͳͲͷք۾͕΢Υονͯ͠Δਓଟ͍͔΋ 🐡 
   ΞΠίϯʹ௨஌දࣔͬΆ͍දࣔ 
   04ىಈ࣌ʹΞϓϦͱͯ͠ىಈ 3VO
   PO
   04
   -PHJO #BEHJOH
   "1* ը૾ݩ
   IUUQTGFMJYHFSTDIBVDPNXFCDBQBCJMJUJFTQSPKFDUGVHVHPPHMFXIBUJTQSPKFDUGVHV
7. ௨৴΍ηϯαͳͲϋʔυ΢ΣΞػೳʹΞΫηεͰ͖Δ"1*΋ 🐡 8FC
   #MVFUPPUI
   8FC
   /'$
   8FC
   64#
   8FC
   4FSJBM ࠓ೔͸͜ͷลΓͷಈ͖Λத৺ʹ঺հͰ͖Ε͹ͱࢥ͍·͢ɻ
8. $ISPNJVNͷϓϩδΣΫτνʔϜݸͷ͏ͪͷҰͭ 🐡 IUUQTTJUFTHPPHMFDPNBDISPNJVNPSHEFWUFBNT
9. $ISPNJVNͷϓϩδΣΫτνʔϜݸͷ͏ͪͷҰͭ 🐡 IUUQTTJUFTHPPHMFDPNBDISPNJVNPSHEFWUFBNT Ұ͚ͭͩֆจࣈೖΓͰҟ࣭X
10. 'VHV
    "1*
    5SBDLFS 🐡 ͜͜ͷαΠτʹ৭ʑͳ"1*͕·ͱ·ͬͯ·͢ɻ
11. IUUQTEPDTHPPHMFDPNTQSFBETIFFUTEEF;:%0DBG/99X.DH&;I52. 2'W;GP%; ff )F"FEJUHJE 🐡 ˞εϓϨουγʔτ΋ެ։͞Εͯ·ͨ͠ɻ
12. 🐡 "1*͸εςʔλε͕෼͔Ε͍ͯ·͢ɻ  4IJQQFE
    
     %FWFMPQFS
    5SJBM
     0SJHJO
    5SJBM
     4UBSUFE
     6OEFS
    $POTJEFSBUJPO
13.  4IJQQFE
    
    ࢖͑Δ
     %FWFMPQFS
    5SJBM
    
    ϑϥά෇͖Ͱ࢖͑Δ
     0SJHJO
    5SJBM
    
    ಛఆΦϦδϯͰࢼͤΔ
     4UBSUFE
    
    ࠷ۙ࢖͑ΔΑ͏ʹͳͬͨ
     6OEFS
    $POTJEFSBUJPO
    
    σΟεΧογϣϯத 🐡 "1*͸εςʔλε͕෼͔Ε͍ͯ·͢ɻ
14. ϋʔυ΢ΣΞͬΆ͍ք۾Ͱ΋࢖ΘΕΔػೳͷͲΜͳ΋ͷ͕
    +BWB4DSJQUͰ৮ΕΔ͔͍͔ͭ͘ݟͯΈ·͠ΐ͏ɻ 🐡
15. 8FC
    #MVFUPPUI 🐡 Ҿ༻
    IUUQTXXXXPSHDPNNVOJUZXFCCMVFUPPUI OBWJHBUPSCMVFUPPUISFRVFTU%FWJDF ͦͷ··Ͱ͕͢ɺ8FCϒϥ΢β͔Β#MVFUPPUI੍ޚ͕ग़དྷ·͢ɻ
16. 8FC)*%
    "1* 🐡 *P5-5
    WPM
    IUUQTXXXZPVUVCFDPNXBUDI W+ZOSE7C*JH ΩʔϘʔυ΍Ϛ΢εͳͲͷඪ४తͳσόΠεҎ֎ͷ)*%σόΠε΋੍ޚՄೳʹͳΔ ೥݄ͰΦϦδϯτϥΠΞϧͩͬͨ
17. 8FC
    64# 🐡 ೥
    *P5-5
    WPM ϒϥ΢β͔Β64#ΞΫηε
    σʔλ΍ΓͱΓ͕Ͱ͖·͢ɻ
    ౰࣌͸ΦϦδϯτϥΠΞϧͰ͕ͨ͠ɺࠓ͸4IJQQFEͰ͢ɻ
18. 8FC
    /'$ 🐡 ೥݄
    *P5-5
    WPM ϒϥ΢β͔Β/'$ʹΞΫηεͰ͖·͢ɻ
    ౰࣌͸ΦϦδϯτϥΠΞϧͰ͕ͨ͠ɺࠓ͸4IJQQFEͰ͢ɻ
19. "NCJFOU
    -JHIU
    4FOTPS
    "1* 🐡 ೥݄
    *P5-5
    WPM 1$ͳͲʹ࣮͸෇͍͍ͯΔ؀ڥޫηϯαʔ͔Β஋ΛऔಘͰ͖Δɻ ݱঢ়%FWFMPQFS
    5SJBM
20. ैདྷ͸ɺిࢠ޻࡞ͳͲͰѻ͓͏ͱ͢Δͱผ్σόΠε༻ҙͱ࣮૷͕ඞཁͩͬͨ /'$ 🐡 র౓ηϯα #MVFUPPUIϞδϡʔϧ΍ϚΠίϯ 
    σόΠε༻ҙͤͣʹిࢠ޻࡞ͷੈքʹ͍ۙ͜ͱ͕΍ΕΔΑ͏ʹ
    
    কདྷతʹϋʔυ΢ΣΞ੡඼ͷ͓ڙ͕8FCΞϓϦέʔγϣϯʹมΘΔ͔΋ʁ
21. ٞ࿦தͷػೳ 6OEFS
    $POTJEFSBUJPO 🐡 #FUUFS
    1SJOUJOH 
    ҹ࡮༻ͷ$BOWBT"1*ɺ1%'ͷੜ੒ͳͲ
    
    ࢴҹ࡮ͷঢ়گΛ΋ͬͱྑ͍ͨͬ͘͠Ά͍งғؾ *3
    #MBTUFS
    $BQBCJMJUZ 
    ੺֎ઢʂ
22. ٞ࿦தͷػೳ 6OEFS
    $POTJEFSBUJPO 🐡 #MVFUPPUI
    "EWFSUJTFS 
    8FCΞϓϦέʔγϣϯ͔ΒΞυόλΠζύέοτΛૹ৴͢Δ͜ͱ͕Ͱ͖Δ #MVFUPPUI
    1FSJQIFSBM
    .PEF 
    #MVFUPPUIΛϖϦϑΣϥϧʹ͢Δ͜ͱ͕Ͱ͖ΔϞʔυ
    ˞ηϯτϥϧͱϖϦϑΣϥϧ
    1$͕ηϯτϥϧɺ
    ΠϠϗϯ΍"JSUBHͳͲσόΠε͕ϖϦϑΣϥϧ 
    1$΍εϚϗ͸ࠓ·ͰɺଞͷσόΠεʹΞΫηεͯ͠σʔλΛ؅ཧ͢Δଆ ηϯτϥϧ
    ͚ͩͬͨͲɺ1$΍εϚϗΛσόΠεଆͱͯ͠ѻ͏ྲྀΕ ݹ͍εϚϗͱ͔ͷ׆༻Πϝʔδ 
    8FC#MVFUPPUIؒͰͷ௨৴͕Ͱ͖ͦ͏ɻ
    εϚϗͱ1$Ͱ։͍ͨ8FCΞϓϦ͕Πϯλʔωοτ࢖Θͣʹ௨৴
23. ଞʹ΋͜Μͳ"1*΋ʜ 🐡 ը໘ϩοΫ੍ޚ 4IBQF
    %FUFDUJPO
    "1* 'BDF#BSDPEF5FYU 8BLF
    -PDL
    "1* δΦϑΣϯγϯά ಛఆΤϦΞݕग़
24. ٞ࿦தͷػೳ 6OEFS
    $POTJEFSBUJPO 🐡 "CJMJUZ
    UP
    DSFBUF
    WJSUVBM
    NJDSPQIPOF
    BOE
    DBNFSB
    EFWJDFT 
    Ծ૝ΧϝϥͱϚΠΫΛੜ੒͢Δػೳ
    3FNPUF
    EFTLUPQ
    DPOUSPM 
    ϏσΦձٞͳͲͰϦϞʔτͷ୭͔ʹࣗ৴ͷ1$Λίϯτϩʔϧ͍ͤͨ͞ 
    ίϩφՒ͔ΒͷΦϯϥΠϯ࣌୅Ͱൃੜͨ͠ϢʔεέʔεͬΆ͍
25. ؔ࿈ϖʔδ
    
    1SPKFDU
    'VHV
    "1*
    TIPXDBTF 🐡 IUUQTEFWFMPQFSDISPNFDPNCMPHGVHVTIPXDBTF BQJXFCVTC ֤"1*Λ࢖ͬͨ8FCαΠτ͕঺հ͞Εͯ·͢ɻ
26. কདྷతʹʜ 🐡 +BWB4DSJQUͰ৭ʑͰ͖ΔΑ͏ʹͳ͍͖ͬͯ·͢Ͷ
27. ͱ͜ΖͰɺؾʹͳΓ·͢ΑͶɻ 🐡
28. ͳͥՏಲ🐡ͳͷ͔ 🐡
29. ͳͥՏಲͳͷ͔ʁ 🐡 ඒຯ͍͚͠Ͳௐཧํ๏Λؒҧ͑ΔͱࢮΜͰ͠·͏
    ͬͯͱ͜ΖͷࣗռΛࠐΊͯΔɻ
    ϋʔυ΢ΣΞʹ+BWB4DSJQU͔ΒΞΫηεͰ͖Δͬͯ͜ͱ͸
    ηΩϡϦςΟతʹ͸͚ͬ͜͏ා͍ɻ
    ͜ͷ-5தʹʮηΩϡϦςΟා͘Ͷʁʯͱ͔ݴͬͯΔਓ΋ͨͿΜ͍Δ 8FCʹػೳΛ࣋ͨͤ͗͢Δͳͬͯਓ΋ͨͿΜ͍Δ ಇ͖ํ΍ੜ׆ͷ࢓ํ͕มΘΔ͜ͱʹΑͬͯϓϥοτϗʔϜ͕૿͑ͨΓϢʔεέʔε͸૿͍͑ͯΔ ίϩφՒͳͲ΋ؚΊɺ։࢝౰࣌ͷ8FCͱ͸΋͸΍ผͷ΋ͷͳͷͰɺࠓޙ΋͜͏͍ͬͨܗͰ ਐԽ͍ͯ͘͠͸ͣ
30. ࠓͰͦ͜*P5-5ͱ͍͏ϋʔυ΢ΣΞ΍ిࢠ޻࡞ܥͷΠϕϯτΛओ࠵͠ ͯΔͷͰ͕͢ɺ΋ͱ΋ͱ8FCΤϯδχΞΛ͍ͯ͠·ͨ͠ɻ 🐡 ʮ+BWB4DSJQUͰ΋ͬͱϋʔυ΢ΣΞϋοΫ͕ग़དྷΔͱָ͍͠ͷʹͳ͊ʯ ͱࢥ͍ͬͯͨͷͰ͜ͷลΓͷಈ͖͸خ͍͠Ͱ͢ɻ 8FCͳਓʹ΋ϋʔυ΢ΣΞपΓʹڵຯΛ࣋ͬͯ΋Β͑Δͱ޾͍Ͱ͢ɻ
31. కΊ 🐡 8FCΛඒຯ͘͠௖͚ΔΑ͏ʹʜ ൪એ
    *P5-5
    WPM
     Ր
    ͷ໷ʹιϑτόϯΫຊࣾͰ։࠵͠·͢ɻ
    IUUQTJPUMUDPOOQBTTDPNFWFOU
    
    ༡ͼʹདྷ͍ͯͩ͘͞ʂ
    ͪΐͬͱͰ΋ϋʔυ໘നͦ͏ͬͯࢥ͔ͬͨͨͥͻ
     +BWB4DSJQUͰϋʔυ΢ΣΞ੍ޚͰ͖Δ࣌୅ʹͳ͖͍ͬͯͯΔͷͰɺ
    8FCք۾ͷօ͞Μ΋෺ཧੈքϋοΫΛָ͠ΜͰΈ͍ͯͩ͘͞ʂ