matchMedia()でレスポンシブ対応！JavaScriptで画面サイズに応じた処理を実装する方法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
CSSのメディアクエリはレスポンシブ対応に欠かせない存在ですが、「JavaScript側でも画面幅に応じた処理を切り替えたい」と思ったことはありませんか？

例えば、

そんなときに便利なのが matchMedia()。
JavaScriptからメディアクエリを監視し、動的に処理を切り替えることができる強力なAPIです。
今回はその基本的な使い方から、実践的な応用方法まで解説していきます！

matchMedia() とは？

window.matchMedia() は、CSSと同じようなメディアクエリ文字列を使って、条件を満たすかどうかをJavaScriptで判定できるAPIです。
たとえば「画面が768px以下かどうか」といった条件をJSでチェックできます。

基本構文

const mq = window.matchMedia("(max-width: 768px)");
if (mq.matches) {
  // 768px以下の処理
} else {
  // 768pxを超える処理
}

このように、条件を満たす場合は mq.matches が true になります。

動的に画面サイズ変化を監視する

matchMedia() はイベントリスナーを追加することで、ウィンドウサイズの変更にも対応可能です。
以下のように使うと、リアルタイムで条件に応じた処理ができます。

const mq = window.matchMedia("(max-width: 768px)");
function handleMediaChange(e) {
  if (e.matches) {
    console.log("スマホ表示");
  } else {
    console.log("PC表示");
  }
}
// 初期実行
handleMediaChange(mq);
// リスナー登録
mq.addEventListener("change", handleMediaChange);

これで、ユーザーがウィンドウをリサイズしてもリアルタイムに処理を切り替えられます。

応用：ナビゲーションをデバイスごとに出し分け

以下は、スマホのときだけハンバーガーメニューを表示する例です。

 const mq = window.matchMedia("(max-width: 768px)");
const nav = document.querySelector(".nav");
function toggleMenu(e) {
  if (e.matches) {
    nav.classList.add("mobile");
  } else {
    nav.classList.remove("mobile");
  }
}
toggleMenu(mq);
mq.addEventListener("change", toggleMenu);

CSSで .mobile に対する表示非表示スタイルを切り替えれば、1つのナビ要素をデバイスごとに制御できます。

注意点：パフォーマンスと管理性

CSS変数やJavaScriptの管理ライブラリ（例：Breakpoints.js）と併用することで、メンテナンス性も向上します。

まとめ：レスポンシブJSを可能にするmatchMedia()

CSSだけでは表現しきれない「振る舞い」も、matchMediaで快適にコントロールしましょう！

satokotadesignキャンペーン実施中！