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

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

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

*OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ

*OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ

*OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ

*OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ ͸ ඳըʹѱӨڹ

*OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ ͸ ඳըʹѱӨڹ දࣔ͞Εͳ͍ ҐஔͰ΋ ॲཧ͸͞Εଓ͚Δ

*OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ εΫϩʔϧ͢Δͨͼ ΋͘͠͸ ఆظతʹ ܭࢉͷॲཧ͕ඞͣൃੜ͢Δ සൟʹ ࣮ߦ͞ΕΔ ཁૉͷҐஔݕग़ ͸ ඳըʹѱӨڹ දࣔ͞Εͳ͍ ҐஔͰ΋ ॲཧ͸͞Εଓ͚Δ ύϑΥʔϚϯε͕ඇৗʹѱ͍

*OUFSTFDUJPO0CTFSWFS"1*Λ࢖͏ ཁૉ͕ը໘ͷදࣔྖҬʹݱΕͨ͜ͱΛݕ஌ͯ͠ ΞχϝʔγϣϯΛ࣮ߦ ϒϥ΢β͕಺෦తʹ؂ࢹ ඳըʹӨڹΛ༩͑ͳ͍

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

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

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

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

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

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

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

!=> { !// εΫϩʔϧ࣌ͷ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); ඞਢͳΘ͚Ͱ͸ͳ͍ͷͰ ϒϥ΢βͷεΫϩʔϧͷڍಈͱ ΠϕϯτϦεφʔͷॲཧΛ ͋Θ࣮ͤͯߦ͢Δ͜ͱ͕Ͱ͖Δ

!=> { !// εΫϩʔϧ࣌ͷॲཧ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); lTDSPMMzΠϕϯτൃੜ Ϛ΢εͷૢ࡞ͳͲ EP4PNFUIJOH EFGBVMU1SFWFOUFE൑ఆ ϒϥ΢β͕ εΫϩʔϧҐஔΛมߋ

!=> { !// εΫϩʔϧ࣌ͷॲཧ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); lTDSPMMzΠϕϯτൃੜ Ϛ΢εͷૢ࡞ͳͲ EP4PNFUIJOH EFGBVMU1SFWFOUFE൑ఆ ϒϥ΢β͕ εΫϩʔϧҐஔΛมߋ QSFWFOU%FGBVMU ΛݺΜͰ͍Α͏͕ ͳ͔ΒΖ͏͕ ൑ఆ͕͋Δ

!=> { !// εΫϩʔϧ࣌ͷॲཧ !// Կ͔͠Βͷॲཧ doSomething(); !// ộ } ); lTDSPMMzΠϕϯτൃੜ Ϛ΢εͷૢ࡞ͳͲ EP4PNFUIJOH EFGBVMU1SFWFOUFE൑ఆ ϒϥ΢β͕ εΫϩʔϧҐஔΛมߋ QSFWFOU%FGBVMU ΛݺΜͰ͍Α͏͕ ͳ͔ΒΖ͏͕ ൑ఆ͕͋Δ ͜͜ͷॲཧ͕ॏ͍ͱ εΫϩʔϧδϟοΩϯά ൃੜ

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

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

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

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

More Decks by Yusuke Hirao

Other Decks in Technology

Featured

Transcript