【JavaScript】matchMediaを使ったレスポンシブ対応を便利にする【備忘録】

JavaScriptのレスポンシブ対応には、MediaQueryList（window.matchMedia）を使って書くのが好きなのですが、様々な処理をレスポンシブ切り替えする場合、以下を毎回JavaScript内のいろいろなところで書くのは長い……。

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

function hoge(e) {
  if (e.matches) {
    //マッチしたらやりたいこと
  } else {
    //マッチしなかったときはこっち
  }
}
mql.addEventListener("change", hoge);//画面リサイズしたとき用
hoge(mql);//最初に開いたとき用

……関数にしてまとめたらもう少し楽ができないか？　ということでまとめました。

コード

関数

const responsiveMatch = (onMatch,onUnMatch,media = 'max-width: 768px') => {
  //第3引数に入れたメディアクエリもしくは768pxのところでMediaQueryList作成
  const mql = window.matchMedia('('+media+')');

  //MediaQueryListにマッチした時の動作、しなかった時の動作を引数から受け取る
  function mediaChange(e) {
    if (e.matches) {
      onMatch();
    } else {
      onUnMatch();
    }
  }

  //MediaQueryListのChangeイベント時に発火させる
  mql.addEventListener("change", mediaChange);
  //ページ読み込み時にも発火させる
  mediaChange(mql);
}

使う方

responsiveMatch(
  () => {
    console.log("match")
  },
  () => {
    console.log("unMatch")
  },
  "max-width: 500px"//768pxの場合は省略可
);

使用例：スライド枚数とメディアクエリの２つの基準でSplideの発火を切り替え

「PCの時はperPageが3、SPのときはperPageが1のカルーセルスライダー」を、PCの時はスライド枚数が4枚以上あるときだけ発火させたいが、SPの時は枚数2枚以上で発火にしたい。
という場合の使用例。

あわせて読みたい

スライド枚数とメディアクエリの２つの基準でSplideの発火・非発火を管理する ...

document.addEventListener("DOMContentLoaded", function () {
  const slides = document.querySelectorAll(".splide__slide");
  let spSlide, pcSlide;
  responsiveMatch(
    () => {
      if (pcSlide) {
        pcSlide.destroy();
      }
      //SPはスライド枚数が2枚以上の時だけ発火
      if (slides.length > 1) {
        spSlide = new Splide(".splide", {
          type: "loop",
          rewind: true,
          perPage: 1
        });
        spSlide.mount();
      }
    },
    () => {
      //PCはスライド枚数が4枚以上の時だけ発火
      if (spSlide) {
        spSlide.destroy();
      }
      if (slides.length > 3) {
        pcSlide = new Splide(".splide", {
          type: "loop",
          rewind: true,
          perPage: 3,
          gap:16,
        });
        pcSlide.mount();
      }
    },
    "max-width: 500px" //768pxの場合は省略可
  );
});

参考資料

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

https://zenn.dev/no4_dev/articles/878f4afbff6668d4e28a-2