matchMediaサンプル

resizeイベントをmatchMediaに置き換えた場合のサンプルとして残しておきます。
resizeイベントはwindow幅を変えている間は常にイベント発動しているが、matchMediaは設定したブレイクポイントを通解する場合のみ発動する。
そのためパフォーマンス向上が見込まれるのではないかと思い、書いてみました。

「matchMediaを関数化してみた」の記事で関数化したので修正しました

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

resizeイベントの場合

const md = 768;

//ウィンドウ幅変更時の挙動
window.addEventListener('resize', () => {
  let window_width = window.innerWidth;
  if (window_width >= md) { //PCにした時
    drawer.style.display = "";
    drawerReset();
  } else { //SP

  }

matchMediaを使った場合

- const md = 768;
- const mqMD = window.matchMedia(`(min-width: ${md}px)`);
- mqMD.addEventListener("change", mediaQuery);
- mediaQuery(mqMD);

- function mediaQuery(e) {
-   if(e.matches) {
-     addEventResize();
-   } else {
      
-   }
- }

function addEventResize() {
  drawer.style.display = "";
  drawerReset();
}

+ matchMedia("", addEventResize);