window.matchMedia

2020.12.06

JavaScript

JavaScriptを使用して、ブラウザの幅に応じて処理を分ける必要があることはよくあります。

今までは以下のようにしてブラウザの幅を取得し、loadとresizeイベントごとに処理を実行していました。
しかし、リサイズ時に常に処理が実行されるため、本来ブレイクポイントが切り替わるタイミングでのみ処理を実行したい場合には最適ではありません。

const setVideoFile = function(){
    const video = document.querySelector('.js-video');
    let file;

    const onResize = function(){
        if( window.innerWidth < 1024 ){
            file = './assets/video/hoge-sp.mp4';
        } else{
            file = './assets/video/hoge-pc.mp4';
        }
        video.setAttribute('src',file);
    }

    const onLoad = onResize;

    window.addEventListener('load',onLoad);
    window.addEventListener('resize',onResize);
}
setVideoFile();

window.matchMedia

「window.matchMedia」を使うと、よりシンプルに、無駄な処理を減らすことができます。

const setVideoFile = function(){
    const video = document.querySelector('.js-video');
    let file;

    const mediaQuery = window.matchMedia( 'screen and ( max-width: 1023px )' );

    function checkBreakPoint( mediaQuery ) {
        if ( mediaQuery.matches ) {
            file = './assets/video/hoge-sp.mp4';
        } else{
            file = './assets/video/hoge-pc.mp4';
        }

        video.setAttribute('src',file);
    }

    mediaQuery.addListener( checkBreakPoint ); // ブレイクポイントの度に
    checkBreakPoint( mediaQuery ); // 初回
}
setVideoFile();

console.logなどで確認すると分かりますが、ブレイクポイントが切り替わったときのみ処理が実行されます。
また、mediaQueryはCSSの書き方と同様に使用することができるため、直感的に理解できると思います。