window.matchMedia()を使って画面サイズごとに何かする方法[JavaScript, window.matchMedia]

以前の記事で、いくつかのブレイクポイントを定義しておき、それを現在のウインドウ幅と比較。
その比較結果によって処理を分ける方法について書きました。

今回の記事では、その記事の中でも出てきた方法よりも簡潔に書け、
かつcssのメディアクエリの概念をそのまま使う事ができる

window.matchMedia()

を使った分岐方法について書いていきます。

それでは早速、上記の方法について、次のセクションより書いていきたいと思います。

window.matchMedia を使って、画面サイズごとに何かする方法

さて「window.matchMedia() を使って、画面サイズごとに何かする方法」ですが、
使い方はとてもシンプルです。
cssのメディアクエリと同じ要領で、「このサイズからこのサイズ間はこれ」
といった制御が可能です。具体的には次のとおりです。

if (window.matchMedia( "(min-width: 576px) and (max-width: 767px)" ).matches) {
  console.log('小サイズのタブレットサイズ想定');
} else if (window.matchMedia( "(min-width: 768px) and (max-width: 1023px)" ).matches) {
  console.log('やや大きめタブレット〜小さめのPCモニタまでを想定');
} else if (window.matchMedia( "(min-width: 1024px) and (max-width: 1335px)" ).matches) {
  console.log('小さめのPCモニタ〜1366pxより下までを想定');
} else if (window.matchMedia( "(min-width: 1366px)" ).matches) {
  console.log('1366px以上を想定');
} else {
  console.log('デフォルトの挙動を想定(スマートフォンの挙動を想定)');
}

使いどころ

この window.matchMedia() 、cssのメディアクエリと同じ感覚で使えるかつ、
window.innerWidth を使ってウインドウ幅を取得、それを定数と比較する場合と比べて短く書けるので、

「この画面サイズのデバイスではこの処理をさせたい」という様な場合に
便利かと思います。

それぞれの分岐を
window.addEventListener(‘resize’, () => {…実行したい処理…});
↑このようにリサイズイベントを仕込むなりしておけば、ユーザー操作によってブラウザ幅が変わった場合にも対応できます。
具体的には次のとおり。

const matchMediaChecker = () => {
  if (window.matchMedia( "(min-width: 576px) and (max-width: 767px)" ).matches) {
    console.log('小サイズのタブレットサイズ想定');
  } else if (window.matchMedia( "(min-width: 768px) and (max-width: 1023px)" ).matches) {
    console.log('やや大きめタブレット〜小さめのPCモニタまでを想定');
  } else if (window.matchMedia( "(min-width: 1024px) and (max-width: 1335px)" ).matches) {
    console.log('小さめのPCモニタ〜1366pxより下までを想定');
  } else if (window.matchMedia( "(min-width: 1366px)" ).matches) {
    console.log('1366px以上を想定');
  } else {
    console.log('デフォルトの挙動を想定(スマートフォンの挙動を想定)');
  }
}

// 初回判定
matchMediaChecker();

// リサイズ検知
window.addEventListener('resize', () => {
  matchMediaChecker();
});

上記のコードは、すこしだけ気に留めておく点があります。実務で使う際には、この次のセクションに書いてある留意点をよく読んで事前によく検証することをおすすめします。

以前ご紹介した方法に似ていますが、上記の方がすっきり書ける印象です。
また、cssのメディアクエリと同じ書き方を指定できるので
Webデザイナーの方にも親和性が高く、理解が得られやすい書き方かと思います。

留意すべき点など

上のセクションでご紹介したコードは、すこしだけ気に留めておく点があります。実務で使う際には、このセクションに書いてあることをよく読んで事前によく検証することをおすすめします。

上のセクションの末尾にある、「リサイズ検知」とコメントが書かれている部分について。
こちら、window.addEventListener(‘resize’ …
としてリサイズイベントを検知。
その都度 matchMediaChecker(); を実行して、
ユーザー操作によって画面幅が変わった際に、任意の処理を実行できるようになっている部分です。

一見何の問題もないように思えるのですが、
実は、iOS端末(iPhone等)や一部のスマートフォン端末では、
「ブラウザを縦スワイプしただけで resize イベントが検知されてしまう」という事象があります。

そのため、「条件を満たしたら、classを付与して状態を変える」
などの処理をここで実行していた場合、
「縦スワイプするたびにそれが実行されてしまう」ため、意図しない挙動を起こすことになります。

そもそも、よくよく考えるとWebサイトを普通に閲覧している際、
この「リサイズ検知機能」自体が必要になるケースはあまりないかもしれませんので、
必要ないならこの記述は入れないのがベターです。

もし何らかの理由でこれを仕込んでおきたい場合は、
・ユーザーエージェントを判定する
・もしスマートフォンからのアクセスだった場合には、リサイズ検知を実行させない

↑上記のような対策を一緒に仕込んでおく必要があります。
実機で実際に見ないと気づかないタイプの事象になりますので(PC上でのエミュレーター検証では発生しない)、
この点にじゅうぶん留意した上で使うことをおすすめします。

MDN内の解説など

この記事で登場した、用語などに関するMDN内の詳しい解説は次のとおりとなります。
[window.matchMedia()]
window.matchMedia – Web API | MDN

↑そしてこちらの「MDN」ですが、何かWeb技術で知りたい事がある時、ひとまず読んでおけば基本的な知見が得られるとても良質なリファレンスサイトです(Mozilla ≒ Webブラウザの挙動そのものの仕様を決めてる人達、が運営してるので当然と言えば当然ですが)。ぜひ一読することをおすすめします。