JavaScriptにおけるブレークポイントのイベント

TIPS

JavaScriptでブレークポイントごとのイベント処理を実装する方法を解説します。これを利用すれば、レスポンシブデザインのブレークポイントごとに特定の処理を実行できます。

2023.07.192026.03.22

JavaScriptでは、画面のブレークポイント（通常はレスポンシブデザインでデバイスごとに異なる表示を切り替えるためのポイント）で特定の処理を発火させることが可能です。

//ブレークポイントで発火する処理
var mql = window.matchMedia('screen and (min-width: 769px)');
function checkBreakPoint(mql) {
  // SP
  if (!mql.matches) {

  }
  // PC 
  else {

  }
}
// ブレイクポイントの瞬間に発火
mql.addListener(checkBreakPoint);
// 初回の実行
checkBreakPoint(mql);

このコードでは、まずwindow.matchMediaを使ってメディアクエリを作成します。このメディアクエリがマッチするとき（つまり、画面幅が769px以上になるとき）に、checkBreakPoint関数が発火します。

その後、mql.addListenerを用いて、ブレークポイントが変わるたびにcheckBreakPoint関数が呼び出されるようにしています。そして、最後にcheckBreakPointを一度呼び出して初回の実行を行います。

Comment