プロジェクト河豚🐡で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
   

   View Slide

2. ੁݪͷͼ͚͢
   dotstudio, Inc.
   ɾϓϩτλΠϐϯάઐ໳εΫʔϧʮϓϩτΞ΢τελδΦʯͷӡӦ
   σδλϧϋϦ΢ουେֶେֶӃඇৗۈߨࢣϓϩμΫτϓϩτλΠϐϯά*
   ɾݸਓ׆ಈ
   *P5-5ʢࠃ಺࠷େͷ*P5ίϛϡχςΟʣ
   -*/&"1*&YQFSU.JDSPTPGU.71*#.$IBNQJPO
   ࣾձษڧͰډञ԰ཆ࿝೫୍ͰΞϧόΠτ
   ʢҰݢΊञ৔৽ڮళͰಇ͍ͯ·ͨ͠ɻʣ
   OPCJTVLFTVHBXBSB
   

   View Slide

3. +4ͬΆ͍׆ಈ
   

   View Slide

4. 1SPKFDU'VHV🐡
   ΢ΣϒɾέΠύϏϦςΟɾϓϩδΣΫτͱ΋ݺ͹ΕΔ͜ͷϓϩδΣΫτ͸ɺ
   ͜Ε·ͰωΠςΟϒΞϓϦέʔγϣϯͰ͔࣮͠ݱͰ͖ͳ͔ͬͨػೳΛ௥Ճ
   ͢Δ͜ͱͰɺ΢ΣϒϓϥοτϑΥʔϜΛվળ͢Δ΋ͷͰ͢ɻ %FFQ-຋༁
   
   🐡
   Ҿ༻IUUQTGFMJYHFSTDIBVDPNXFCDBQBCJMJUJFTQSPKFDUGVHVHPPHMFXIBUJTQSPKFDUGVHV
   1SPKFDU'VHV🐡͸ɺ΢Σϒ্Ͱಈ࡞͢Δ৽͍͠ΫϥεͷΞϓϦέʔγϣϯΛ࣮
   ݱ͢ΔͨΊʹɺ΢ΣϒͷػೳͷΪϟοϓΛຒΊΔͨΊͷऔΓ૊ΈͰ͢ɻ %FFQ-຋༁
   
   Ҿ༻IUUQTXXXDISPNJVNPSHUFBNTXFCDBQBCJMJUJFTGVHV
   

   View Slide

5. 1SPKFDU'VHV🐡
   🐡
   ๻ͳΓͷҙ༁
   ैདྷωΠςΟϒΞϓϦͰ͔͠ѻ͑ͳ͔ͬͨσόΠεͷػೳʹ
   +BWB4DSJQU 8FCʣ͔ΒΞΫηεͰ͖ΔΑ͏ʹ͢Δ"1*ͷػೳݕ౼ϓϩδΣΫτ
   ˺8FCͷະདྷΛσΟεΧογϣϯ͍ͯ͠Δ৔ॴͷҰͭʣ
   

   View Slide

6. ݱঢ়ɺ18"ͳͲͷք۾͕΢Υονͯ͠Δਓଟ͍͔΋
   🐡
   ΞΠίϯʹ௨஌දࣔͬΆ͍දࣔ 04ىಈ࣌ʹΞϓϦͱͯ͠ىಈ
   3VOPO04-PHJO
   #BEHJOH"1*
   ը૾ݩIUUQTGFMJYHFSTDIBVDPNXFCDBQBCJMJUJFTQSPKFDUGVHVHPPHMFXIBUJTQSPKFDUGVHV
   

   View Slide

7. ௨৴΍ηϯαͳͲϋʔυ΢ΣΞػೳʹΞΫηεͰ͖Δ"1*΋
   🐡
   8FC#MVFUPPUI
   8FC/'$
   8FC64#
   8FC4FSJBM
   ࠓ೔͸͜ͷลΓͷಈ͖Λத৺ʹ঺հͰ͖Ε͹ͱࢥ͍·͢ɻ
   

   View Slide

8. $ISPNJVNͷϓϩδΣΫτνʔϜݸͷ͏ͪͷҰͭ
   🐡
   IUUQTTJUFTHPPHMFDPNBDISPNJVNPSHEFWUFBNT
   

   View Slide

9. $ISPNJVNͷϓϩδΣΫτνʔϜݸͷ͏ͪͷҰͭ
   🐡
   IUUQTTJUFTHPPHMFDPNBDISPNJVNPSHEFWUFBNT
   Ұ͚ͭͩֆจࣈೖΓͰҟ࣭X
   

   View Slide

10. 'VHV"1*5SBDLFS
    🐡
    ͜͜ͷαΠτʹ৭ʑͳ"1*͕·ͱ·ͬͯ·͢ɻ
    

    View Slide

11. IUUQTEPDTHPPHMFDPNTQSFBETIFFUTEEF;:%0DBG/99X.DH&;I52.
    2'W;GP%;
    ff
    )F"FEJUHJE
    🐡
    ˞εϓϨουγʔτ΋ެ։͞Εͯ·ͨ͠ɻ
    

    View Slide

12. 🐡
    "1*͸εςʔλε͕෼͔Ε͍ͯ·͢ɻ
    4IJQQFE
    %FWFMPQFS5SJBM
    0SJHJO5SJBM
    4UBSUFE
    6OEFS$POTJEFSBUJPO
    

    View Slide

13. 4IJQQFE࢖͑Δ
    %FWFMPQFS5SJBMϑϥά෇͖Ͱ࢖͑Δ
    0SJHJO5SJBMಛఆΦϦδϯͰࢼͤΔ
    4UBSUFE࠷ۙ࢖͑ΔΑ͏ʹͳͬͨ
    6OEFS$POTJEFSBUJPOσΟεΧογϣϯத
    🐡
    "1*͸εςʔλε͕෼͔Ε͍ͯ·͢ɻ
    

    View Slide

14. ϋʔυ΢ΣΞͬΆ͍ք۾Ͱ΋࢖ΘΕΔػೳͷͲΜͳ΋ͷ͕
    +BWB4DSJQUͰ৮ΕΔ͔͍͔ͭ͘ݟͯΈ·͠ΐ͏ɻ
    🐡
    

    View Slide

15. 8FC#MVFUPPUI
    🐡
    Ҿ༻IUUQTXXXXPSHDPNNVOJUZXFCCMVFUPPUI
    OBWJHBUPSCMVFUPPUISFRVFTU%FWJDF
    
    ͦͷ··Ͱ͕͢ɺ8FCϒϥ΢β͔Β#MVFUPPUI੍ޚ͕ग़དྷ·͢ɻ
    

    View Slide

16. 8FC)*%"1*
    🐡
    *P5-5WPMIUUQTXXXZPVUVCFDPNXBUDI W+ZOSE7C*JH
    ΩʔϘʔυ΍Ϛ΢εͳͲͷඪ४తͳσόΠεҎ֎ͷ)*%σόΠε΋੍ޚՄೳʹͳΔ
    ೥݄ͰΦϦδϯτϥΠΞϧͩͬͨ
    
    

    View Slide

17. 8FC64#
    🐡
    ೥*P5-5WPM
    ϒϥ΢β͔Β64#ΞΫηεσʔλ΍ΓͱΓ͕Ͱ͖·͢ɻ
    ౰࣌͸ΦϦδϯτϥΠΞϧͰ͕ͨ͠ɺࠓ͸4IJQQFEͰ͢ɻ
    

    View Slide

18. 8FC/'$
    🐡
    ೥݄*P5-5WPM
    ϒϥ΢β͔Β/'$ʹΞΫηεͰ͖·͢ɻ
    ౰࣌͸ΦϦδϯτϥΠΞϧͰ͕ͨ͠ɺࠓ͸4IJQQFEͰ͢ɻ
    

    View Slide

19. "NCJFOU-JHIU4FOTPS"1*
    🐡
    ೥݄*P5-5WPM
    1$ͳͲʹ࣮͸෇͍͍ͯΔ؀ڥޫηϯαʔ͔Β஋ΛऔಘͰ͖Δɻ
    ݱঢ়%FWFMPQFS5SJBM
    

    View Slide

20. ैདྷ͸ɺిࢠ޻࡞ͳͲͰѻ͓͏ͱ͢Δͱผ్σόΠε༻ҙͱ࣮૷͕ඞཁͩͬͨ
    /'$
    🐡
    র౓ηϯα #MVFUPPUIϞδϡʔϧ΍ϚΠίϯ
    σόΠε༻ҙͤͣʹిࢠ޻࡞ͷੈքʹ͍ۙ͜ͱ͕΍ΕΔΑ͏ʹ
    কདྷతʹϋʔυ΢ΣΞ੡඼ͷ͓ڙ͕8FCΞϓϦέʔγϣϯʹมΘΔ͔΋ʁ
    

    View Slide

21. ٞ࿦தͷػೳ 6OEFS$POTJEFSBUJPO
    
    🐡
    #FUUFS1SJOUJOH
    ҹ࡮༻ͷ$BOWBT"1*ɺ1%'ͷੜ੒ͳͲ
    ࢴҹ࡮ͷঢ়گΛ΋ͬͱྑ͍ͨͬ͘͠Ά͍งғؾ
    *3#MBTUFS$BQBCJMJUZ
    ੺֎ઢʂ
    

    View Slide

22. ٞ࿦தͷػೳ 6OEFS$POTJEFSBUJPO
    
    🐡
    #MVFUPPUI"EWFSUJTFS
    8FCΞϓϦέʔγϣϯ͔ΒΞυόλΠζύέοτΛૹ৴͢Δ͜ͱ͕Ͱ͖Δ
    #MVFUPPUI1FSJQIFSBM.PEF
    #MVFUPPUIΛϖϦϑΣϥϧʹ͢Δ͜ͱ͕Ͱ͖ΔϞʔυ
    ˞ηϯτϥϧͱϖϦϑΣϥϧ
    1$͕ηϯτϥϧɺΠϠϗϯ΍"JSUBHͳͲσόΠε͕ϖϦϑΣϥϧ
    
    1$΍εϚϗ͸ࠓ·ͰɺଞͷσόΠεʹΞΫηεͯ͠σʔλΛ؅ཧ͢Δଆ ηϯτϥϧ
    
    ͚ͩͬͨͲɺ1$΍εϚϗΛσόΠεଆͱͯ͠ѻ͏ྲྀΕ ݹ͍εϚϗͱ͔ͷ׆༻Πϝʔδ
    
    8FC#MVFUPPUIؒͰͷ௨৴͕Ͱ͖ͦ͏ɻ
    εϚϗͱ1$Ͱ։͍ͨ8FCΞϓϦ͕Πϯλʔωοτ࢖Θͣʹ௨৴
    

    View Slide

23. ଞʹ΋͜Μͳ"1*΋ʜ
    🐡
    ը໘ϩοΫ੍ޚ
    4IBQF%FUFDUJPO"1*
    'BDF#BSDPEF5FYU
    8BLF-PDL"1*
    δΦϑΣϯγϯά
    ಛఆΤϦΞݕग़
    

    View Slide

24. ٞ࿦தͷػೳ 6OEFS$POTJEFSBUJPO
    
    🐡
    "CJMJUZUPDSFBUFWJSUVBMNJDSPQIPOFBOEDBNFSBEFWJDFT
    Ծ૝ΧϝϥͱϚΠΫΛੜ੒͢Δػೳ
    3FNPUFEFTLUPQDPOUSPM
    ϏσΦձٞͳͲͰϦϞʔτͷ୭͔ʹࣗ৴ͷ1$Λίϯτϩʔϧ͍ͤͨ͞
    ίϩφՒ͔ΒͷΦϯϥΠϯ࣌୅Ͱൃੜͨ͠ϢʔεέʔεͬΆ͍
    

    View Slide

25. ؔ࿈ϖʔδ1SPKFDU'VHV"1*TIPXDBTF
    🐡
    IUUQTEFWFMPQFSDISPNFDPNCMPHGVHVTIPXDBTF BQJXFCVTC
    ֤"1*Λ࢖ͬͨ8FCαΠτ͕঺հ͞Εͯ·͢ɻ
    

    View Slide

26. কདྷతʹʜ
    🐡
    +BWB4DSJQUͰ৭ʑͰ͖ΔΑ͏ʹͳ͍͖ͬͯ·͢Ͷ
    

    View Slide

27. ͱ͜ΖͰɺؾʹͳΓ·͢ΑͶɻ
    🐡
    

    View Slide

28. ͳͥՏಲ🐡ͳͷ͔
    🐡
    

    View Slide

29. ͳͥՏಲͳͷ͔ʁ
    🐡
    ඒຯ͍͚͠Ͳௐཧํ๏Λؒҧ͑ΔͱࢮΜͰ͠·͏
    ͬͯͱ͜ΖͷࣗռΛࠐΊͯΔɻ
    ϋʔυ΢ΣΞʹ+BWB4DSJQU͔ΒΞΫηεͰ͖Δͬͯ͜ͱ͸
    ηΩϡϦςΟతʹ͸͚ͬ͜͏ා͍ɻ
    ͜ͷ-5தʹʮηΩϡϦςΟා͘Ͷʁʯͱ͔ݴͬͯΔਓ΋ͨͿΜ͍Δ
    8FCʹػೳΛ࣋ͨͤ͗͢Δͳͬͯਓ΋ͨͿΜ͍Δ
    ಇ͖ํ΍ੜ׆ͷ࢓ํ͕มΘΔ͜ͱʹΑͬͯϓϥοτϗʔϜ͕૿͑ͨΓϢʔεέʔε͸૿͍͑ͯΔ
    ίϩφՒͳͲ΋ؚΊɺ։࢝౰࣌ͷ8FCͱ͸΋͸΍ผͷ΋ͷͳͷͰɺࠓޙ΋͜͏͍ͬͨܗͰ
    ਐԽ͍ͯ͘͠͸ͣ
    

    View Slide

30. ࠓͰͦ͜*P5-5ͱ͍͏ϋʔυ΢ΣΞ΍ిࢠ޻࡞ܥͷΠϕϯτΛओ࠵͠
    ͯΔͷͰ͕͢ɺ΋ͱ΋ͱ8FCΤϯδχΞΛ͍ͯ͠·ͨ͠ɻ
    🐡
    ʮ+BWB4DSJQUͰ΋ͬͱϋʔυ΢ΣΞϋοΫ͕ग़དྷΔͱָ͍͠ͷʹͳ͊ʯ
    ͱࢥ͍ͬͯͨͷͰ͜ͷลΓͷಈ͖͸خ͍͠Ͱ͢ɻ
    8FCͳਓʹ΋ϋʔυ΢ΣΞपΓʹڵຯΛ࣋ͬͯ΋Β͑Δͱ޾͍Ͱ͢ɻ
    

    View Slide

31. కΊ
    🐡
    8FCΛඒຯ͘͠௖͚ΔΑ͏ʹʜ
    ൪એ*P5-5WPM Ր
    ͷ໷ʹιϑτόϯΫຊࣾͰ։࠵͠·͢ɻ
    IUUQTJPUMUDPOOQBTTDPNFWFOU༡ͼʹདྷ͍ͯͩ͘͞ʂ
    ͪΐͬͱͰ΋ϋʔυ໘നͦ͏ͬͯࢥ͔ͬͨͨͥͻ
    
    +BWB4DSJQUͰϋʔυ΢ΣΞ੍ޚͰ͖Δ࣌୅ʹͳ͖͍ͬͯͯΔͷͰɺ
    8FCք۾ͷօ͞Μ΋෺ཧੈքϋοΫΛָ͠ΜͰΈ͍ͯͩ͘͞ʂ
    

    View Slide