matchMediaを関数化してみた

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

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

特に処理がない場合は空を入れられるようにmediaQuery(e)を修正しました

任意のブレークポイントを設定して、min, maxで処理を分ける関数を追加しました

2022.12.21
初期のフラグ設定は不要だったので削除

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

index.html

<h2>matchMedia関数化テストの結果↓↓↓</h2>
<p class="js-mediaText02">matchMedia関数化テスト対象</p>

main.js

import { matchMedia, matchMediaBP } from './scripts/matchMedia';
const { log } = console;

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

+ matchMediaBP(1280, bptest, "");
+ function bptest() {
+   log("matchMediaBPを実行しました");
+ }

matchMedia.js

'use strict';
const { log } = console;

- export function matchMedia(el, funcSP, funcPC, funcTAB = funcPC ) {
+ export function matchMedia(funcSP, funcPC, funcTAB = funcPC ) {
-   let target = typeof el == "string" ? document.querySelector(el) : el;
-   if (!target) return;

  const md = 768;
  const tab = 1024;
  
  //matchMedia
  //const mqMD = window.matchMedia(`(min-width: ${md}px)`);
  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判別用のフラグ

-   //フラグ初期設定
-   checkFlagSP(mqSP);
-   checkFlagTAB(mqTAB);
-   checkFlagPC(mqPC);

  //処理の初期設定
  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)`);

-   //フラグ初期設定
-   checkFlagMin(min);
-   checkFlagMax(max);

+   //処理の初期設定
+   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();
+       }
+     }
+   }
+ }