画面幅が変わった時の処理をmatchMediaでやってみた #MediaQuery

resizeで実装した場合

画面幅が変わった時の処理はresizeというイベントを用いて行うことが一般的です。

// イベントリスナー
const listener = () => {
  // 600px以上のときの処理
  if (window.innerWidth >= 600) {
    console.log('600px以上だよ！');
  } else {
    // 600px未満のときの処理
    console.log('600px未満だよ！');
  }
};

// リスナー登録
window.addEventListener('resize', listener);

// 初期化
listener();

しかしこれだと画面幅がresizeされるたびにイベントリスナーを呼び出すことになります。そこでmatchMediaという手法を使っていきましょう。

matchMediaで実装した場合

mdn：https://developer.mozilla.org/ja/docs/Web/API/MediaQueryList

MediaQueryListオブジェクトはメディアクエリの情報を格納します。

MediaQueryListオブジェクトを生成するにはwindow.matchMedia()とします。さらにwindow.matchMedia("(max-width: 600px)")のようにすると、600px未満のメディアクエリーリストが生成されます。

画面幅がメディアクエリーリストと一致するか否かを判別するには、matchesプロパティを使います。このプロパティはboolean型で、メディアクエリーリストと一致する場合はtrue、一致しない場合はfalseを返します。こうして画面幅によって処理を条件分岐できます。

メディアクエリーが変化するイベントをresizeではなくchangeとして、イベントリスナーを呼び出します。

const mql = window.matchMedia("(max-width: 600px)");

function screenTest(e) {
  if (e.matches) {
    console.log('一致したよ!600px未満だよ！');
  } else {
    console.log('不一致だったよ！600px以上だよ！');
  }
}

mql.addEventListener("change", screenTest);

まとめ

メディアクエリーリストを作って、それと一致したらAの処理、一致しなかったらBの処理という風に書けた。

なのでwindow.addEventListener('resize', イベントリスナー)のようにwindowがリサイズするたびにイベントリスナーを呼び出す必要がなく、

window.matchMedia(幅).addEventListener('change', イベントリスナー)のようにメディアクエリが変わった時だけイベントリスナーを呼び出せるようになった。

画面幅が変わった時の処理をmatchMediaでやってみた

目次

resizeで実装した場合

matchMediaで実装した場合

まとめ