JSのレスポンシブ対応をresizeからmatchMediaに移行した

/**
 * イベントリスナー
 */
const listener = () => {
  // リサイズ時に行う処理

  if (window.innerWidth >= 768) {
    // 768px以上
    console.log('PC用ブレークポイント用処理');
  } else {
    // 768px未満
    console.log('SP用ブレークポイント用処理');
  }
};

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

// 初期化処理
listener();

/**
 * イベントリスナー
 */
const listener = () => {
  // リサイズ時に行う処理
  if (window.matchMedia('(min-width: 768px)').matches) {
    // 768px以上
    console.log('PC用ブレークポイント用処理');
  } else {
    // 768px未満
    console.log('SP用ブレークポイント用処理');
  }
};

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

// 初期化処理
listener();

const mediaQueryList = window.matchMedia('(min-width: 768px)');

/**
 * イベントリスナー
 */
const listener = (event) => {
  // リサイズ時に行う処理
  if (event.matches) {
    // 768px以上
    console.log('PC用ブレークポイント用処理');
  } else {
    // 768px未満
    console.log('SP用ブレークポイント用処理');
  }
};

// リスナー登録
// mediaQueryList.addListener(listener); // @deprecated
mediaQueryList.addEventListener("change", listener);

// 初期化処理
listener(mediaQueryList);