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

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

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

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

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

Yusuke Hirao

June 29, 2018
Tweet

More Decks by Yusuke Hirao

Other Decks in Technology

Transcript

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

    τϨϯυͷ8FCςΫϊϩδʔͱɺ
    ίϛϡχέʔγϣϯ"1*ʢ5XJMJPʣ!෱Ԭ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  5. ©2018 Yusuke Hirao
    ݁࿦͔Β

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  9. ©2018 Yusuke Hirao
    ΞδΣϯμ
    ࠓ೔࿩͢͜ͱ

    ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩
    *OUFSTFDUJPO3FTJ[F0CTFSWFS"1*
    NBUDI.FEJB"1*
    BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

    View Slide

  10. ©2018 Yusuke Hirao
    ΞδΣϯμ
    ࠓ೔࿩͢͜ͱ

    ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩
    *OUFSTFDUJPO3FTJ[F0CTFSWFS"1*
    NBUDI.FEJB"1*
    BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  31. ©2018 Yusuke Hirao
    ϒϥ΢β͸ͪΌΜͱਐԽ͍ͯ͠Δʂ

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  40. ©2018 Yusuke Hirao
    ΞδΣϯμ
    ࠓ೔࿩͢͜ͱ

    ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩
    *OUFSTFDUJPO3FTJ[F0CTFSWFS"1*
    NBUDI.FEJB"1*
    BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

    View Slide

  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ཁૉ͕දࣔྖҬͱަ͔ࠩͨ͠؂ࢹ͢Δ

    View Slide

  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ཁૉͷαΠζ͕มߋ͞Ε͔ͨ؂ࢹ͢Δ

    View Slide

  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);

    View Slide

  44. ©2018 Yusuke Hirao
    ΞδΣϯμ
    ࠓ೔࿩͢͜ͱ

    ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩
    *OUFSTFDUJPO3FTJ[F0CTFSWFS"1*
    NBUDI.FEJB"1*
    BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

    View Slide

  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/λϒϨοτ༻ͷॲཧ');
    }
    });

    View Slide

  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)’);

    View Slide

  47. ©2018 Yusuke Hirao
    ΞδΣϯμ
    ࠓ೔࿩͢͜ͱ

    ϑϩϯτΤϯυͷϓϩάϥϜΛݟ௚͢࿩
    *OUFSTFDUJPO3FTJ[F0CTFSWFS"1*
    NBUDI.FEJB"1*
    BEE&WFOU-JTUFOFS1BTTJWF0QUJPO

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    ΛݺΜͰ͍Α͏͕
    ͳ͔ΒΖ͏͕
    ൑ఆ͕͋Δ

    View Slide

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

    ΛݺΜͰ͍Α͏͕
    ͳ͔ΒΖ͏͕
    ൑ఆ͕͋Δ
    ͜͜ͷॲཧ͕ॏ͍ͱ
    εΫϩʔϧδϟοΩϯά
    ൃੜ

    View Slide

  53. ©2018 Yusuke Hirao
    BEE&WFOU-JTUFOFS1BTTJWF0QUJPO
    1BTTJWF0QUJPOQSFWFOU%FGBVMU
    Λݺͼग़͞ͳ͍͜ͱΛࢦఆ͢ΔΦϓγϣϯ
    window.addEventListener(
    'scroll',
    !// ΠϕϯτϦεφʔ
    (event) !=> {
    !// εΫϩʔϧ࣌ͷॲཧ
    !// Կ͔͠Βͷॲཧ
    doSomething();
    !// ộ
    },
    {
    passive: true,
    }
    );
    lTDSPMMzΠϕϯτൃੜ
    Ϛ΢εͷૢ࡞ͳͲ
    EP4PNFUIJOH

    ϒϥ΢β͕
    εΫϩʔϧҐஔΛมߋ
    ϒϥ΢βͷ
    εΫϩʔϧ͸
    ϦεφʔͷӨڹΛड͚ͳ͍

    View Slide

  54. ©2018 Yusuke Hirao
    ·ͱΊ

    View Slide

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

    View Slide

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

    τϨϯυͷ8FCςΫϊϩδʔͱɺ
    ίϛϡχέʔγϣϯ"1*ʢ5XJMJPʣ!෱Ԭ

    View Slide