JavaScript版メディアクエリのmatchMediaでレスポンシブ対応を楽にする

もはやレスポンシブ対応は当たり前になりつつある昨今。CSSでは必ず使うメディアクエリと同じ感覚で扱えるJavaScriptのメソッドがあります。数年前までは対応ブラウザの問題で微妙だったんですが、最近の環境なら問題なさそうなので使っていこうと思います。

現在のブラウザ対応状況はこんな感じです。https://caniuse.com/#search=matchMedia

基本的な書き方

matchMediaでメディアクエリの情報を定義して、それを専用のaddListenerメソッドに設定して処理します。
resizeイベントとは違い、指定サイズを超えた時に一度だけ実行されるので負荷が少ないです。

// matchMediaの設定
const mqs = window.matchMedia('(min-width: 768px)');

// addListener()はmatchMediaの指定に沿ってコールバックを実行
mqs.addListener(changeMediaQuery);

function changeMediaQuery(mqs){
    if (mqs.matches === true) {
        // 768px以上
        console.log('768px以上');
    } else {
        // 768px未満
        console.log('768px未満');
    }
}

// 初期読み込み時用
changeMediaQuery(mqs);

ちなみに書き方にCSSの様に複数指定やportraitを指定することも出来ます。

// 768px以上1280px未満
const mqs_and = window.matchMedia('(min-width: 768px) and (max-width: 1280px)');
// デバイスが横向きの場合（縦向きはこれのelseでやる）
const mqs_por = window.matchMedia('(orientation: portrait)');

これらを使って軽量なレスポンシブ対応を心がけたいものです。