Zenn
📚

matchMediaを関数化してみた

2022/12/19に公開
JavaScript
matchmedia
tech

matchMediaを関数化して、SP, PC, TAB時に処理を分けるようにしてみた。
matchMedia();の第一引数はDOMを格納した変数、または".js-hoge"のように指定どちらでもOKです。 ← 必要ありませんでした💦

こいつだけ関数化してSP, PC, TAB（必要なら）時に実行する関数を作って呼び出してあげればどこでもmatchMediaに応じて処理を実行できるます。

https://zenn.dev/icchicw/articles/1f39dbf3a840f1

index.html
<h2>matchMedia関数化テストの結果↓↓↓</h2>
<p class="js-mediaText02">matchMedia関数化テスト対象</p>
main.js
import { matchMediaFunc, matchMediaBP } from './scripts/matchMediaFunc';
const { log } = console;

const media02 = document.querySelector(".js-mediaText02");
const pcScr = () => {
  media02.innerText = "関数分け、PC処理!";
}
const tabScr = () => {
  media02.innerText = "関数分け、TAB処理!!";
}
const spScr = () => {
  media02.innerText = "関数分け、SP処理!!!";
}

matchMediaFunc(spScr, pcScr, tabScr);

matchMediaBP(1280, bptest, "");
  function bptest() {
    log("matchMediaBPを実行しました");
  }
matchMediaFunc.js
'use strict';
const { log } = console;


export function matchMediaFunc(funcSP, funcPC, funcTAB = funcPC ) {
  const md = 768;
  const tab = 1024;
  
  //matchMedia
  const mqSP = window.matchMedia(`(max-width: ${md - 1}px)`);
  const mqTAB = window.matchMedia(`(min-width: ${md}px) and (max-width: ${tab - 1}px)`);
  const mqPC = window.matchMedia(`(min-width: ${tab}px)`);
  let mediaFlag; //SP, TAB, PC判別用のフラグ

  //処理の初期設定
  mediaQuery(mqSP);
  mediaQuery(mqTAB);
  mediaQuery(mqPC);

  //ブレイクポイント通過時に実行する処理
  mqSP.addEventListener("change", mediaQuery);
  mqTAB.addEventListener("change", mediaQuery);
  mqPC.addEventListener("change", mediaQuery);

  /**
  * フラグチェック関数
  */
  function checkFlagSP(e) {
    if (e.matches) {
      mediaFlag = "sp";
    }
  }
  function checkFlagTAB(e) {
    if (e.matches) {
      mediaFlag = "tab";
    }
  }
  function checkFlagPC(e) {
    if (e.matches) {
      mediaFlag = "pc";
    }
  }

  /**
  * ブレイクポイント通過時に実行する処理
  * @param {*} e matchMedia
  */
  function mediaQuery(e) {
    if (e.matches) {
    //フラグ更新
    checkFlagSP(mqSP);
    checkFlagTAB(mqTAB);
    checkFlagPC(mqPC);
    
    //フラグによって処理を分ける
    if (mediaFlag == "sp") {
      if(!funcSP) return;
        funcSP();
      } else if (mediaFlag == "tab") {
        if(!funcTAB) return;
        funcTAB();
      } else if (mediaFlag == "pc") {
        if(!funcPC) return;
        funcPC();
      }
    }
  }
}

export function matchMediaBP(bp, funcMin, funcMax) {
  if(!bp) return;

  //breakepoints
  const breakpoints = bp;

  //min, max判別用のフラグ
  let bpFlag;

  //matchMedia
  let mq;

  //flag min or max and matchMedia
  const min = window.matchMedia(`(min-width: ${breakpoints}px)`);
  const max = window.matchMedia(`(max-width: ${breakpoints - 1}px)`);

  //処理の初期設定
  mediaQueryBP(min);
  mediaQueryBP(max);

  //ブレイクポイント通過時に実行する処理
  min.addEventListener("change", mediaQueryBP);
  max.addEventListener("change", mediaQueryBP);

  /**
  * フラグチェック関数
  */
  function checkFlagMin(e) {
    if (e.matches) {
      bpFlag = "min";
    }
  }
  function checkFlagMax(e) {
    if (e.matches) {
      bpFlag = "max";
    }
  }

  /**
  * ブレイクポイント通過時に実行する処理
  * @param {*} e matchMedia
  */
  function mediaQueryBP(e) {
    if (e.matches) {
      //フラグ更新
      checkFlagMin(min);
      checkFlagMax(max);

      //フラグによって処理を分ける
      if (bpFlag == "min") {
        if (!funcMin) return;
        funcMin();
      } else if (bpFlag == "max") {
        if (!funcMax) return;
        funcMax();
      }
    }
  }
}

Discussion