本当に必要ですか?そのJavaScript 〜スクロールイベント・リサイズイベント編〜

本当に必要ですか?そのJavaScript 〜スクロールイベント・リサイズイベント編〜

結論: JavaScriptは必要です。もっともっと選択肢を増やしましょう。

- フロントエンドのプログラムを見直す話
- Intersection/Resize Observer API
- matchMedia API
- addEventListener Passive Option

1adcc39bcb4268334437c9c12b84d7a4?s=128

Yusuke Hirao

June 29, 2018
Tweet

Transcript

  1. ຊ౰ʹඞཁͰ͔͢ʁͦͷ+BWB4DSJQU ʙεΫϩʔϧΠϕϯτɾϦαΠζΠϕϯτฤʙ ೥ τϨϯυͷ8FCςΫϊϩδʔͱɺ ίϛϡχέʔγϣϯ"1*ʢ5XJMJPʣ!෱Ԭ

  2. ©2018 Yusuke Hirao ࣗݾ঺հ ฏඌ༏యʢͻΒ͓Ώ͏ͯΜʣ גࣜձࣾσΟʔθϩ ϑϩϯτΤϯυΤϯδχΞ #-0(IUUQTOPUFNVZVTVLFIJSBP Yusuke Hirao

    @cloud10designs
  3. ©2018 Yusuke Hirao NBSLVQMJOUԠԉ͓Ͷ͕͍͠·͢ Φʔϓϯιʔε/PEFKT੡)5.--JOUFS

  4. ©2018 Yusuke Hirao ຊ౰ʹඞཁͰ͔͢ʁͦͷ+BWB4DSJQU ʙεΫϩʔϧΠϕϯτɾϦαΠζΠϕϯτฤʙ

  5. ©2018 Yusuke Hirao ݁࿦͔Β

  6. ©2018 Yusuke Hirao +BWB4DSJQU͸ඞཁͰ͢

  7. ©2018 Yusuke Hirao ΋ͬͱ΋ͬͱબ୒ࢶΛ૿΍͠·͠ΐ͏

  8. ©2018 Yusuke Hirao ΋ͬͱ΋ͬͱબ୒ࢶΛ૿΍͠·͠ΐ͏ खࡳΛͨ͘͞Μ͍࣋ͬͯΔਓ͸ڧ͍ʂ

  9. ©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ  ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* NBUDI.FEJB"1* BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

  10. ©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ  ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* NBUDI.FEJB"1* BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

  11. ©2018 Yusuke Hirao ೔ʑͷίʔυɺ

  12. ©2018 Yusuke Hirao ೔ʑͷίʔυɺߋ৽ͯ͠·͔͢ʁ

  13. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 8FCͷਐԽ͸೔ਐ݄า ࡢ೔Ͱ͖ͳ͔ͬͨ͜ͱ͕ࠓ೔͸Ͱ͖Δ

  14. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 8FCͷਐԽ͸೔ਐ݄า ࡢ೔Ͱ͖ͳ͔ͬͨ͜ͱ͕ࠓ೔͸Ͱ͖Δ ͍ͭ΋΍͍ͬͯΔख๏͕ ࠷దղͰ͸ͳ͘ͳ͍ͯΔՄೳੑ͕͋Δ͔΋ ͱ͍ٙͬͯ·͔͢ʁ

  15. ©2018 Yusuke Hirao ॎʹ௕͍ϖʔδΛ εΫϩʔϧ͍ͯ͘͠ͱɺ ཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ

  16. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

  17. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

  18. ©2018 Yusuke Hirao ʮҐஔΛܭࢉͯ͠ʯʁʂ

  19. ©2018 Yusuke Hirao ຊ౰ʹܭࢉ͠ͳ͍ͱμϝͳͷʁ ΋ͬͱखܰʹΘ͔ΔΑ͏ʹͳΒͳ͍ͷʁ

  20. ©2018 Yusuke Hirao ৽͍͠"1*͋Γ·͢

  21. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ ˞ৄ͘͠͸ޙ΄Ͳ

  22. ©2018 Yusuke Hirao ͳͥ͜ͷ"1*͕ੜ·Εͨͷ͔എܠΛߟ͑Δ

  23. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

    *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ
  24. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

    *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ
  25. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

    *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ
  26. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

    *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ ͸ ඳըʹѱӨڹ
  27. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

    *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ ͸ ඳըʹѱӨڹ දࣔ͞Εͳ͍ ҐஔͰ΋ ॲཧ͸͞Εଓ͚Δ
  28. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

    *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ ͸ ඳըʹѱӨڹ දࣔ͞Εͳ͍ ҐஔͰ΋ ॲཧ͸͞Εଓ͚Δ ύϑΥʔϚϯε͕ඇৗʹѱ͍
  29. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

    *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ ϒϥ΢β͕಺෦తʹ؂ࢹ ඳըʹӨڹΛ༩͑ͳ͍
  30. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ ॎʹ௕͍ϖʔδΛεΫϩʔϧ͍ͯ͘͠ͱɺཁૉ͕ಈ͖ͳ͕Βग़ݱͯ͘͠ΔΞϨ ैདྷͷओͳ࣮૷ํ๏ ᶃεΫϩʔϧ͢Δͨͼʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺ ɹը໘ʹೖ͖ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ ᶄλΠϚʔΛ࢖ͬͯఆظతʹର৅ͷཁૉͷҐஔΛܭࢉͯ͠ɺɹ ɹը໘ʹೖ͍ͬͯͨΒΞχϝʔγϣϯΛ࣮ߦ

    *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ ϒϥ΢β͕಺෦తʹ؂ࢹ ඳըʹӨڹΛ༩͑ͳ͍ Α͘ར༻͞ΕΔ ࣮૷ͳͷͰ ϒϥ΢βࣗ਎͕౥ࡌͨ͠
  31. ©2018 Yusuke Hirao ϒϥ΢β͸ͪΌΜͱਐԽ͍ͯ͠Δʂ

  32. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 8FCͷਐԽ͸೔ਐ݄า ࡢ೔Ͱ͖ͳ͔ͬͨ͜ͱ͕ࠓ೔͸Ͱ͖Δ ͍ͭ΋΍͍ͬͯΔख๏͕ ࠷దղͰ͸ͳ͘ͳ͍ͯΔՄೳੑ͕͋Δʂʂ

  33. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 8FCͷਐԽ͸೔ਐ݄า ࡢ೔Ͱ͖ͳ͔ͬͨ͜ͱ͕ࠓ೔͸Ͱ͖Δ ͍ͭ΋΍͍ͬͯΔख๏͕ ࠷దղͰ͸ͳ͘ͳ͍ͯΔՄೳੑ͕͋Δʂʂ ຊ౰ʹͦͷ+BWB4DSJQUͷίʔυ͕ඞཁͳͷ͔ࠓҰ౓ݟ௚ͦ͏

  34. ©2018 Yusuke Hirao 2 ݹ͍ϒϥ΢βͰ΋ಈ͘ΜͰ͔͢ʁ

  35. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 2ݹ͍ϒϥ΢βͰ΋ಈ͘ΜͰ͔͢ʁ ౴͑͸/Pʂʂ Ͱ΋ϙϦϑΟϧͱ͍͏ݹ͍ϒϥ΢βͰ΋ ͦΕΛͰ͖Δ͚ͩ࠶ݱ͢ΔϥΠϒϥϦ͕͋Γ·͢ɻ ৽͍͠ϒϥ΢β͸౥ࡌ͞Ε͍ͯΔ"1*Λɺ ݹ͍ϒϥ΢β͸ैདྷͷํ๏ͰॲཧΛ͚͚ۙͮ·͢ɻ

  36. ©2018 Yusuke Hirao 2 ͑ʁ͡Ό͋ैདྷͷํ๏Ͱ͍͍͡Όͳ͍

  37. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 2͑ʁ͡Ό͋ैདྷͷํ๏Ͱ͍͍͡Όͳ͍ ͦΜͳ͜ͱ͸ͳ͍Ͱ͢ ৽͍͠ϒϥ΢βͰ͸͖ͪΜͱͦͷύϑΥʔϚϯεͷ ԸܙΛड͚Δ͜ͱ͕Ͱ͖·͢ɻ ৽͍͠ϒϥ΢βͰ͸ϝϦοτͷΈɻ ݹ͍ϒϥ΢βͰ͸ϝϦοτɾσϝϦοτ΋ͳ͘Ωʔϓɻ

  38. ©2018 Yusuke Hirao 2 ϙϦϑΟϧ͸όά͕͋Δͱฉ͖·ͨ͠

  39. ©2018 Yusuke Hirao ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ 2ϙϦϑΟϧ͸όά͕͋Δͱฉ͖·ͨ͠ Թ͔͍໨ͰݟकΓ·͠ΐ͏ ϙϦϑΟϧ͡Όͳͯ͘΋όά෇͖෺Ͱ͢ɻ ϒϥ΢βࣗମ͕όάΛ΋ͭ͜ͱ΋͋Δɻ ৺഑Ͱ͋Ε͹ɺ͋·ΓτϦοΩʔͳ࣮૷Λͤͣɺ "1*ͷϕʔγοΫͳ࢖͍ํʹཹΊΔͷ͕͍͍Ͱ͠ΐ͏ɻ

  40. ©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ  ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* NBUDI.FEJB"1* BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

  41. ©2018 Yusuke Hirao *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* !// ؂ࢹ໾ΦϒδΣΫτ const observer = new

    IntersectionObserver( !// ަࠩ࣌ͷॲཧ (entries) !=> { for (const entey of entries) { !// ަࠩͨ͠ཁૉͱͦͷ৘ใ͕ೖ͍ͬͯΔΦϒδΣΫτͷ഑ྻ !// ަࠩͨ͠ཁૉʹରͯ͠ͷॲཧ !// ྫ) CSSΫϥεΛ෇༩ entey.target.classList.add('enter'); } }, !// IntersectionObserverΦϓγϣϯ { !// ᮢ஋ threshold: 1, } ); !// ཁૉΛ؂ࢹ͢Δ observer.observe(document.querySelector('.inview')); *OUFSTFDUJPO0CTFSWFSཁૉ͕දࣔྖҬͱަ͔ࠩͨ͠؂ࢹ͢Δ
  42. ©2018 Yusuke Hirao *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* !// ؂ࢹ໾ΦϒδΣΫτ const observer = new

    ResizeObserver( !// αΠζ͕มԽͨ࣌͠ͷॲཧ (entries) !=> { for (const entey of entries) { !// αΠζ͕มԽͨ͠ཁૉͱͦͷ৘ใ͕ೖ͍ͬͯΔΦϒδΣΫτͷ഑ྻ !// αΠζ͕มԽͨ͠ཁૉʹରͯ͠ͷॲཧ !// ྫ) αΠζʹΑͬͯCSSΫϥεΛ෇༩ if (entry.contentRect.width < 300) { entey.target.classList.add('small'); } else { entey.target.classList.remove('small'); } } } ); !// ཁૉΛ؂ࢹ͢Δ observer.observe(document.querySelector('.elastic')); 3FTJ[F0CTFSWFSཁૉͷαΠζ͕มߋ͞Ε͔ͨ؂ࢹ͢Δ
  43. ©2018 Yusuke Hirao *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* ͦͷଞͷ0CTFSWFSܥͷ"1* .VUBUJPO0CTFSWFSཁૉͷ಺༰΍ଐੑ͕มߋ͞Ε͔ͨ؂ࢹ͢Δ 1FSGPSNBODF0CTFSWFSύϑΥʔϚϯεΛଌఆ͢Δ5JNJOH"1*ͷมߋΛ؂ࢹ͢Δ K2VFSZͷPOϝιου΍BEE&WFOU-JTUFOFSͷ࣮૷ํ๏ͱ ͪΐͬͱҟͳΔͷͰ࠷ॳ͸׳Εͳ͍͚Ͳɺ 0CTFSWFSܥͷ"1*͸ൺֱతࣅ͍ͯΔΠϯλʔϑΣΠεͳͷͰɺ

    ͜ͷύλʔϯ΋͓֮͑ͯ͘ͱ͍͍Ͱ͠ΐ͏ɻ const observer = new XXXObserver(callback); observer.observe(target);
  44. ©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ  ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* NBUDI.FEJB"1* BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

  45. ©2018 Yusuke Hirao NBUDI.FEJB"1* NBUDI.FEJB.FEJB2VFSZ-JTU$44ͷϝσΟΞΫΤϦʔͷ൑ఆΛ+BWB4DSJQUͰར༻Ͱ͖Δ !// CSSͷ@mediaͱಉ͡ΫΤϦʔΛఆٛ͢Δ const mediaQueryList =

    matchMedia('(max-width: 768px)'); !// ఆٛͨ͠ϝσΟΞΫΤϦʔʹϚον͍ͯ͠Δ͔Ͳ͏͔ͷ৚݅෼ذ if (mediaQueryList.matches) { console.log('εϚϗ༻ͷॲཧ'); } else { console.log('PC/λϒϨοτ༻ͷॲཧ'); } !// ϒϨʔΫϙΠϯτͷมߋΛݕ஌͢Δ͜ͱ΋Ͱ͖Δ !// มߋ࣌ͷΈ࣮ߦ͞ΕΔͷͰϦαΠζΠϕϯτͰৗʹαΠζΛଌΔඞཁ͕ͳ͘ͳΔ mediaQueryList.addListener(() !=> { if (mediaQueryList.matches) { console.log('εϚϗ༻ͷॲཧ'); } else { console.log('PC/λϒϨοτ༻ͷॲཧ'); } });
  46. ©2018 Yusuke Hirao NBUDI.FEJB"1* NBUDI.FEJB.FEJB2VFSZ-JTU$44ͷϝσΟΞΫΤϦʔͷ൑ఆΛ+BWB4DSJQUͰར༻Ͱ͖Δ !// CSSͷ@mediaͱಉ͡ΫΤϦʔΛఆٛͰ͖ΔͷͰɺ !// ϏϡʔϙʔταΠζҎ֎ͷ൑ఆ΋Ͱ͖Δ matchMedia('print');

    matchMedia('screen and (min-width: 640px)'); matchMedia('(orientation: portrait)'); matchMedia('(orientation: landscape)'); matchMedia('(min-resolution: 2dppx)’);
  47. ©2018 Yusuke Hirao ΞδΣϯμ ࠓ೔࿩͢͜ͱ  ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩ *OUFSTFDUJPO3FTJ[F0CTFSWFS"1* NBUDI.FEJB"1* BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

  48. ©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO ैདྷͷεΫϩʔϧΠϕϯτॲཧ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event)

    !=> { !// εΫϩʔϧ࣌ͷ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ event.preventDefault(); !// or return false; } ); ϒϥ΢βͷεΫϩʔϧΛڧ੍తʹࢭΊΔ͜ͱ͕Ͱ͖Δɻ
  49. ©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO ैདྷͷεΫϩʔϧΠϕϯτॲཧ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event)

    !=> { !// εΫϩʔϧ࣌ͷ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); ඞਢͳΘ͚Ͱ͸ͳ͍ͷͰ ϒϥ΢βͷεΫϩʔϧͷڍಈͱ ΠϕϯτϦεφʔͷॲཧΛ ͋Θ࣮ͤͯߦ͢Δ͜ͱ͕Ͱ͖Δ
  50. ©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO ैདྷͷεΫϩʔϧΠϕϯτॲཧ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event)

    !=> { !// εΫϩʔϧ࣌ͷॲཧ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); lTDSPMMzΠϕϯτൃੜ Ϛ΢εͷૢ࡞ͳͲ EP4PNFUIJOH  EFGBVMU1SFWFOUFE൑ఆ ϒϥ΢β͕ εΫϩʔϧҐஔΛมߋ
  51. ©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO ैདྷͷεΫϩʔϧΠϕϯτॲཧ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event)

    !=> { !// εΫϩʔϧ࣌ͷॲཧ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); lTDSPMMzΠϕϯτൃੜ Ϛ΢εͷૢ࡞ͳͲ EP4PNFUIJOH  EFGBVMU1SFWFOUFE൑ఆ ϒϥ΢β͕ εΫϩʔϧҐஔΛมߋ QSFWFOU%FGBVMU  ΛݺΜͰ͍Α͏͕ ͳ͔ΒΖ͏͕ ൑ఆ͕͋Δ
  52. ©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO ैདྷͷεΫϩʔϧΠϕϯτॲཧ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event)

    !=> { !// εΫϩʔϧ࣌ͷॲཧ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); lTDSPMMzΠϕϯτൃੜ Ϛ΢εͷૢ࡞ͳͲ EP4PNFUIJOH  EFGBVMU1SFWFOUFE൑ఆ ϒϥ΢β͕ εΫϩʔϧҐஔΛมߋ QSFWFOU%FGBVMU  ΛݺΜͰ͍Α͏͕ ͳ͔ΒΖ͏͕ ൑ఆ͕͋Δ ͜͜ͷॲཧ͕ॏ͍ͱ εΫϩʔϧδϟοΩϯά ൃੜ
  53. ©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO 1BTTJWF0QUJPOQSFWFOU%FGBVMU Λݺͼग़͞ͳ͍͜ͱΛࢦఆ͢ΔΦϓγϣϯ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ

    (event) !=> { !// εΫϩʔϧ࣌ͷॲཧ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ }, { passive: true, } ); lTDSPMMzΠϕϯτൃੜ Ϛ΢εͷૢ࡞ͳͲ EP4PNFUIJOH  ϒϥ΢β͕ εΫϩʔϧҐஔΛมߋ ϒϥ΢βͷ εΫϩʔϧ͸ ϦεφʔͷӨڹΛड͚ͳ͍
  54. ©2018 Yusuke Hirao ·ͱΊ

  55. ©2018 Yusuke Hirao ·ͱΊ ຊ౰ʹͦͷίʔυ͕ඞཁͳͷ͔ࠓҰ౓ݟ௚͢ ͍ͭ΋΍͍ͬͯΔख๏͕࠷దղͰ͸ͳ͍͔΋ ϒϥ΢β͸ਐԽ͍ͯ͠ΔͷͰ৽͍͠"1*Λظ଴ͯ͠ΈΔ

  56. ຊ౰ʹඞཁͰ͔͢ʁͦͷ+BWB4DSJQU ʙεΫϩʔϧΠϕϯτɾϦαΠζΠϕϯτฤʙ ೥ τϨϯυͷ8FCςΫϊϩδʔͱɺ ίϛϡχέʔγϣϯ"1*ʢ5XJMJPʣ!෱Ԭ