JSのレスポンシブ対応 – 画面幅に応じて処理を切り替える

JavaScriptの処理をレスポンシブ対応させる時のメモです。ブレイクポイントを指定して処理を分ける方法について記載していきます。

window.matchMedia を使ってメディアクエリを設定

window.machMedia を使って、CSSのメディアクエリと同様に max-width もしくは min-width と切り替え時の画面幅を指定します。

matches プロパティを使用して条件分岐ができます。

const mediaQuery1 = window.matchMedia('(max-width:1000px)');
const mediaQuery2 = window.matchMedia('(min-width:1001px)');

if (mediaQuery1.matches) {
  // 1000px以下だったら...
}

if (mediaQuery2.matches) {
  // 1001px以上だったら...
}

リサイズイベントで処理を実行させる

上記のコードだとロード時のみに処理が行われます。画面をリサイズした時に反映されるようにするには、addEventListener() を使用し、change イベントを指定します。

const mediaQuery = window.matchMedia('(max-width:1000px)');

function windowSize(size) {
  if (mediaQuery.matches) {
    // 1000px以下だったら...
  } else {
    // それ以外だったら...
  }
}
mediaQuery.addEventListener('change', windowSize); // 
windowSize(); // 初期実行

最後に、この方法を調べている時に、現在は非推奨となっているコードが使用されていたコード例があったので、備忘録として記していきます。
あまり見ないコードではあるものの、非推奨であることが頭の片隅にでもあれば、サンプルコードをコピペする際に気が付けると思います。

メディアクエリを指定する際には max-width や min-width を使用しますが、max-device-width や min-device-width が指定されているコード例もありました。この device-width は非推奨のコードです。

device-width – CSS: カスケーディングスタイルシート | MDN

mediaQuery.addListener(func) といった形で、 addListener() メソッドを使用している記事もありましたが、こちらも非推奨。addEventListener() を使いましょう。

MediaQueryList: addListener() メソッド – Web API | MDN