【JavaScript】レスポンシブな条件分岐にはwindow.matchMediaを使う

JavaScriptを書いていて良く使用するレスポンシブな条件分岐は下記2つのパターンだと思います。どちらもwindow.matchMediaを使えば簡単に実装することができます。

• デバイス幅が〇〇px以上と以下で処理を分岐したい
• 特定のデバイス幅を通過したときに処理を実行したい

今回はこちらの2つの頻出パターンについて紹介します。

デバイス幅が〇〇px以上と以下で処理を分岐したい

こちらの条件分岐は、PCとスマホで処理を分けたいときなどに重宝します。一番良く使いますね。

JavaScript

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

if (matchMedia.matches) {
  // 1000px以下で行う処理
} else {
  // 1001px以上で行う処理
}

ちなみにif (!matchMedia.matches)とすることで、条件にマッチしないときといった条件分岐を行うこともできます。

特定のデバイス幅を通過したときに処理を実行したい

特定のデバイス幅を通過したときに何か必ず実行したい処理があるときなんかに便利です。

JavaScript

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

// 1000px通過時にmyFuncを実行する
matchMedia.addListener(myFunc);

Twitterアカウント

Twitterも更新していますので、よかったらフォローお願いします！
Twitterアカウントはこちら