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

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

    *OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ ͸ ඳըʹѱӨڹ දࣔ͞Εͳ͍ ҐஔͰ΋ ॲཧ͸͞Εଓ͚Δ ύϑΥʔϚϯε͕ඇৗʹѱ͍
  3. ©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ཁૉ͕දࣔྖҬͱަ͔ࠩͨ͠؂ࢹ͢Δ
  4. ©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ཁૉͷαΠζ͕มߋ͞Ε͔ͨ؂ࢹ͢Δ
  5. ©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/λϒϨοτ༻ͷॲཧ'); } });
  6. ©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)’);
  7. ©2018 Yusuke Hirao BEE&WFOU-JTUFOFS1BTTJWF0QUJPO ैདྷͷεΫϩʔϧΠϕϯτॲཧ window.addEventListener( 'scroll', !// ΠϕϯτϦεφʔ (event)

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

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

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

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

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

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