window.matchMediaを使用したレスポンシブ対応

matchMediaを使用する理由

Javascriptでレスポンシブ対応を行う場合、ウィンドウサイズを取得とresizeの監視により処理を行うという方法があります。しかし、それではウィンドウサイズを変更するたびに実行されるためパフォーマンスとして良くありません。

matchMediaを使用することでブレイクポイントの切り替わりに応じて処理を実行することができるため、resizeのように無駄な処理の実行を防ぐことができます。

使用方法

ブレイクポイントを決める

const mediaQuery = window.matchMedia('(min-width: 768px)');

まずはブレイクポイントを決めます。window.matchMediaを使用することで「MediaQueryListオブジェクト」が作られ、それを変数に格納します。こちらを基準として処理の切り替えを行います。

関数を定義

function checkWindow(windowSize) {
    if (windowSize.matches) {
        console.log('PCの処理');
    } else {
        console.log('SPの処理');
    }
}

次に、ウィンドウサイズによりどのような処理を行うか関数を定義します。windowSize.matchesは真偽値となります。関数を実行する際に、引数には変数mediaQueryを入れることになるので、'(min-width: 768px)'がtrueの場合はPCの処理、それ以外はSPの処理という分岐になります。

ブレイクポイントの切り替えに応じて関数を実行

mediaQuery.addEventListener('change', checkWindow);

定義した関数を実行するため、mediaQueryにイベントリスナー'change'を設定します。これで、ウィンドウサイズがブレイクポイントに差し掛かったタイミングで関数checkWindowが実行されます。

全体のコード

ここまでの内容をまとめると以下のようなコードになります。
resizeイベントよりも使い勝手が良さそうなのでおすすめです。

// ブレイクポイントを設定
const mediaQuery = window.matchMedia('(min-width: 768px)');

// 関数を定義
function checkWindow(windowSize) {
    // ウィンドウサイズが768px以上か
    if (windowSize.matches) {
        // 768px以上の時（PCの処理）
        console.log('PC');
    } else {
        // 上記以外の時（SPの処理）
        console.log('SP');
    }
}

// ロード時に判定
checkWindow(mediaQuery);

// ブレイクポイントが切り替わったら判定
mediaQuery.addEventListener('change', checkWindow);