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

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

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

32fc21c821f829e470225311c7530832?s=128

n0bisuke

July 16, 2022
Tweet

More Decks by n0bisuke

Other Decks in How-to & DIY

Transcript

  1. +4'&4 ϓϩδΣΫτՏಲ🐡Ͱ8FCͷະདྷΛײͯ͡ΈΑ͏ ϓϩτΞ΢τελδΦੁݪͷͼ͚͢ !OCJTVLF

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

    OPCJTVLFTVHBXBSB
  3. +4ͬΆ͍׆ಈ

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

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

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

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

  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  %FWFMPQFS5SJBM  0SJHJO5SJBM  4UBSUFE

     6OEFS$POTJEFSBUJPO
  13.  4IJQQFE࢖͑Δ  %FWFMPQFS5SJBMϑϥά෇͖Ͱ࢖͑Δ  0SJHJO5SJBMಛఆΦϦδϯͰࢼͤΔ  4UBSUFE࠷ۙ࢖͑ΔΑ͏ʹͳͬͨ  6OEFS$POTJEFSBUJPOσΟεΧογϣϯத

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

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

  16. 8FC)*%"1* 🐡 *P5-5WPMIUUQTXXXZPVUVCFDPNXBUDI W+ZOSE7C*JH )*%σόΠε (BNF1BE΍ΩʔϘʔυ΍Ϛ΢εΛ͸͡Ίͱͨ͠৭ʑ ͷ੍ޚ ೥݄ͰΦϦδϯτϥΠΞϧͩͬͨ

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

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

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

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

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

  22. ٞ࿦தͷػೳ 6OEFS$POTJEFSBUJPO 🐡 #MVFUPPUI"EWFSUJTFS 8FCΞϓϦέʔγϣϯ͔ΒΞυόλΠζύέοτΛૹ৴͢Δ͜ͱ͕Ͱ͖Δ #MVFUPPUI1FSJQIFSBM.PEF #MVFUPPUIΛϖϦϑΣϥϧʹ͢Δ͜ͱ͕Ͱ͖ΔϞʔυ ˞ηϯτϥϧͱϖϦϑΣϥϧ 1$͕ηϯτϥϧɺΠϠϗϯ΍"JSUBHͳͲσόΠε͕ϖϦϑΣϥϧ 1$΍εϚϗ͸ࠓ·ͰɺଞͷσόΠεʹΞΫηεͯ͠σʔλΛ؅ཧ͢Δଆ

    ηϯτϥϧ  ͚ͩͬͨͲɺ1$΍εϚϗΛσόΠεଆͱͯ͠ѻ͏ྲྀΕ ݹ͍εϚϗͱ͔ͷ׆༻Πϝʔδ 8FC#MVFUPPUIؒͰͷ௨৴͕Ͱ͖ͦ͏ɻ εϚϗͱ1$Ͱ։͍ͨ8FCΞϓϦ͕Πϯλʔωοτ࢖Θͣʹ௨৴
  23. ଞʹ΋͜Μͳ"1*΋ʜ 🐡 ը໘ϩοΫ੍ޚ 4IBQF%FUFDUJPO"1* 'BDF#BSDPEF5FYU 8BLF-PDL"1* δΦϑΣϯγϯά ಛఆΤϦΞݕग़

  24. ٞ࿦தͷػೳ 6OEFS$POTJEFSBUJPO 🐡 "CJMJUZUPDSFBUFWJSUVBMNJDSPQIPOFBOEDBNFSBEFWJDFT Ծ૝ΧϝϥͱϚΠΫΛੜ੒͢Δػೳ 3FNPUFEFTLUPQDPOUSPM ϏσΦձٞͳͲͰϦϞʔτͷ୭͔ʹࣗ৴ͷ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-5WPM Ր ͷ໷ʹιϑτόϯΫຊࣾͰ։࠵͠·͢ɻ IUUQTJPUMUDPOOQBTTDPNFWFOU༡ͼʹདྷ͍ͯͩ͘͞ʂ ͪΐͬͱͰ΋ϋʔυ໘നͦ͏ͬͯࢥ͔ͬͨͨͥͻ +BWB4DSJQUͰϋʔυ΢ΣΞ੍ޚͰ͖Δ࣌୅ʹͳ͖͍ͬͯͯΔͷͰɺ 8FCք۾ͷօ͞Μ΋෺ཧੈքϋοΫΛָ͠ΜͰΈ͍ͯͩ͘͞ʂ