resizeもしくはwindow.matchMediaを用いてウィンドウの幅に合わせてJavascriptの処理を変える方法

はじめに

こんにちは。
私はフロントエンジニアとして働いていますが、未経験であるため現在課題を出されています。
その課題で「ウィンドウの幅に合わせてJavascriptの処理を変えたい！」ということがあったのでその方法を書いておきます。

jQueryのresizeを使用した方法

まず、方法として考えられるのがjQueryのresizeメソッドです。
resizeはウィンドウの幅が変わると実行するメソッドで、ウィンドウの幅に合わせて処理を変えたい時に使用できます。

$(window).resize(function(){
        //windowの幅をwindow_widに代入
        let window_wid = $(window).width();
        //windowの分岐幅をmdに代入
        let md = 1024;
        if (window_wid >= md) {
            //md以上の処理
         }else{
            //md未満の処理   
         }
})

上記のようにコードを書くとウィンドウの幅に合わせて処理を変えることができます。
しかし、大きなデメリットがあります。
それは、ウィンドウのサイズが変わるたびにこの処理が実行されてしまうことです。(console.logで確認するとわかりやすいと思います。)
resizeはウィンドウのサイズが変わるたびに発火するので、無駄が多いです。

window.matchMedia

もう一つの方法としてwindow.matchMediaを用いた方法があります。
こちらを使用することでブレークポイントを通過した時のみ処理を走らせることが可能です。
無駄が無くなることと、cssと同じ指定ができることがメリットとして挙げられます。

const md = window.matchMedia('(min-width: 1024px)');

function checkWindow(wid){
    if (wid.matches) {
        //min-width: 1024pxに合致する処理 
    } else {
       //min-width: 1024pxに合致しない処理 
    }
}

//load時にも処理を走らせる。
checkWindow(md);
md.addListener(checkWindow);

終わりに

ブレークポイントで処理を分けて実行したい場合にはwindow.matchMediaが便利かなっと思います。
resizeでも工夫をすればブレークポイントを通過したときだけ処理を実行することが可能なようですが、どうしても必要なとき以外はwindow.matchMediaで問題ないかと思います。

参考文献

window.matchMediaによる、メディアクエリに応じたJavaScriptの実行
window.matchMedia をそろそろ活用してもいい頃