JSにおけるwindow.matchMediaでのウィンドウサイズ判定方法8選

●window.matchMediaとは？

皆さん、レスポンシブデザインという言葉を耳にしたことがあるでしょう。

スマートフォンやタブレットの普及により、様々なデバイスやウィンドウサイズに対応したWebサイトやアプリケーションが求められています。

そこで重要になるのが、JavaScriptのwindow.matchMediaメソッドです。

window.matchMediaは、メディアクエリを使ってウィンドウサイズを判定し、指定した条件に合致するかどうかを真偽値で返してくれる強力なメソッドです。

これを活用することで、ウィンドウサイズに応じた柔軟な処理を実装することができるのです。

では、具体的にはどのように使うのでしょうか？

基本的な使い方とサンプルコードを見ていきましょう。

○window.matchMediaの基本的な使い方

window.matchMediaメソッドの基本的な使い方は次のようになります。

const mediaQuery = window.matchMedia('(min-width: 600px)');

if (mediaQuery.matches) {
  // ウィンドウ幅が600px以上の場合の処理
} else {
  // ウィンドウ幅が600px未満の場合の処理
}

window.matchMediaメソッドにメディアクエリを引数として渡すことで、MediaQueryListオブジェクトを取得します。

このオブジェクトのmatchesプロパティを使って、指定したメディアクエリに合致するかどうかを判定できるのです。

上記の例では、ウィンドウ幅が600px以上の場合とそれ未満の場合で異なる処理を実行しています。

これにより、ウィンドウサイズに応じた柔軟なレイアウトや機能を実現することができます。

○サンプルコード1：シンプルなウィンドウサイズ判定

それでは、実際にwindow.matchMediaを使ったシンプルなウィンドウサイズ判定のサンプルコードを見てみましょう。

function handleMediaQuery(mediaQuery) {
  if (mediaQuery.matches) {
    console.log('ウィンドウ幅が600px以上です');
  } else {
    console.log('ウィンドウ幅が600px未満です');
  }
}

const mediaQuery = window.matchMedia('(min-width: 600px)');
mediaQuery.addListener(handleMediaQuery);
handleMediaQuery(mediaQuery);

このコードでは、handleMediaQuery関数内でウィンドウサイズに応じた処理を行っています。

mediaQuery.addListenerを使って、メディアクエリの状態が変化した際にhandleMediaQueryを呼び出すようにしています。

これにより、ウィンドウサイズが変更された時にも動的に処理を切り替えることができます。

実行結果は次のようになります。

ウィンドウ幅が600px以上の場合

ウィンドウ幅が600px以上です

ウィンドウ幅が600px未満の場合

ウィンドウ幅が600px未満です

このように、window.matchMediaとメディアクエリを組み合わせることで、簡単にウィンドウサイズに応じた処理を実装できます。

○サンプルコード2：複数の条件を組み合わせた判定

次に、複数のメディアクエリを組み合わせた、より実践的なウィンドウサイズ判定の例を見ていきましょう。

function handleMediaQuery(mediaQuery) {
  if (mediaQuery.matches) {
    console.log('ウィンドウ幅が1200px以上です');
  } else {
    const mediaQueryTablet = window.matchMedia('(min-width: 600px)');
    if (mediaQueryTablet.matches) {
      console.log('ウィンドウ幅が600px以上1200px未満です');
    } else {
      console.log('ウィンドウ幅が600px未満です');
    }
  }
}

const mediaQueryDesktop = window.matchMedia('(min-width: 1200px)');
mediaQueryDesktop.addListener(handleMediaQuery);
handleMediaQuery(mediaQueryDesktop);

このサンプルコードでは、ウィンドウ幅が1200px以上の場合、600px以上1200px未満の場合、600px未満の場合で異なる処理を行っています。

window.matchMediaを複数回使用することで、より詳細な条件分岐が可能になります。

実行結果は次のようになります。

ウィンドウ幅が1200px以上の場合

ウィンドウ幅が1200px以上です

ウィンドウ幅が600px以上1200px未満の場合

ウィンドウ幅が600px以上1200px未満です

ウィンドウ幅が600px未満の場合

ウィンドウ幅が600px未満です

このように、window.matchMediaとメディアクエリを駆使することで、ウィンドウサイズに応じたきめ細やかな処理を実装できるのです。

●レスポンシブデザインへの応用

window.matchMediaを使ったウィンドウサイズ判定は、レスポンシブデザインを実現する上で非常に重要な役割を果たします。

レスポンシブデザインとは、デバイスやウィンドウサイズに応じて柔軟にレイアウトや機能を変化させる手法のことです。

ウィンドウサイズに合わせて要素の表示/非表示を切り替えたり、スタイルシートを動的に切り替えたりすることで、ユーザーにとって最適な表示と操作性を提供することができるのです。

それでは、実際にwindow.matchMediaを活用したレスポンシブデザインの実装例を見ていきましょう。

○サンプルコード3：要素の表示/非表示の切り替え

まずは、ウィンドウサイズに応じて要素の表示/非表示を切り替える例です。

<div id="content">
  <p>この要素はウィンドウ幅が600px以上の場合に表示されます。</p>
</div>

function handleMediaQuery(mediaQuery) {
  const content = document.getElementById('content');

  if (mediaQuery.matches) {
    content.style.display = 'block';
  } else {
    content.style.display = 'none';
  }
}

const mediaQuery = window.matchMedia('(min-width: 600px)');
mediaQuery.addListener(handleMediaQuery);
handleMediaQuery(mediaQuery);

このサンプルコードでは、ウィンドウ幅が600px以上の場合にのみ、id属性が”content”の要素を表示しています。

window.matchMediaとaddListenerを使って、メディアクエリの状態変化を監視し、適切に表示/非表示を切り替えています。

ウィンドウ幅が600px以上の場合の表示

<div id="content">
  <p>この要素はウィンドウ幅が600px以上の場合に表示されます。</p>
</div>

ウィンドウ幅が600px未満の場合の表示

<div id="content" style="display: none;"></div>

このように、window.matchMediaを使うことで、簡単に要素の表示/非表示を切り替えられます。

レスポンシブデザインにおいて、デバイスやウィンドウサイズに応じてコンテンツを最適化する際に役立つテクニックです。

○サンプルコード4：スタイルシートの動的な切り替え

次に、ウィンドウサイズに応じてスタイルシートを動的に切り替える例を見てみましょう。

<link id="stylesheet" rel="stylesheet" href="style.css">

function handleMediaQuery(mediaQuery) {
  const stylesheet = document.getElementById('stylesheet');

  if (mediaQuery.matches) {
    stylesheet.href = 'style-large.css';
  } else {
    stylesheet.href = 'style.css';
  }
}

const mediaQuery = window.matchMedia('(min-width: 1200px)');
mediaQuery.addListener(handleMediaQuery);
handleMediaQuery(mediaQuery);

このサンプルコードでは、ウィンドウ幅が1200px以上の場合には”style-large.css”を、それ未満の場合には”style.css”をスタイルシートとして適用しています。

動的にスタイルシートを切り替えることで、デバイスやウィンドウサイズに合わせたデザインを実現できます。

ウィンドウ幅が1200px以上の場合のスタイルシート

<link id="stylesheet" rel="stylesheet" href="style-large.css">

ウィンドウ幅が1200px未満の場合のスタイルシート

<link id="stylesheet" rel="stylesheet" href="style.css">

スタイルシートを動的に切り替えることで、レスポンシブデザインの柔軟性がさらに高まります。

デバイスやウィンドウサイズごとに最適化されたデザインを提供できるようになるのです。

○サンプルコード5：イベントリスナーを使った動的な処理

ウィンドウサイズの変更をリアルタイムに検知し、動的に処理を行う例も見ていきましょう。

function handleMediaQuery(mediaQuery) {
  if (mediaQuery.matches) {
    console.log('ウィンドウ幅が800px以上になりました');
  } else {
    console.log('ウィンドウ幅が800px未満になりました');
  }
}

const mediaQuery = window.matchMedia('(min-width: 800px)');
mediaQuery.addListener(handleMediaQuery);

window.addEventListener('resize', () => {
  handleMediaQuery(mediaQuery);
});

このサンプルコードでは、window.matchMediaとaddListenerに加えて、window.addEventListenerを使ってウィンドウのリサイズイベントを監視しています。

ウィンドウサイズが変更されるたびに、handleMediaQuery関数が呼び出され、適切な処理が実行されます。

ウィンドウ幅が800px以上になった場合の実行結果

ウィンドウ幅が800px以上になりました

ウィンドウ幅が800px未満になった場合の実行結果

ウィンドウ幅が800px未満になりました

イベントリスナーを活用することで、ウィンドウサイズの変更に応じたリアルタイムな処理が可能になります。

レスポンシブデザインにおいて、動的な要素の配置や機能の切り替えなどに利用できるでしょう。

○サンプルコード6：画像の遅延読み込みへの応用

最後に、window.matchMediaを使った画像の遅延読み込みの例を見てみましょう。

<img data-src="image.jpg" alt="サンプル画像">

function loadImage(img) {
  const src = img.getAttribute('data-src');
  if (src) {
    img.src = src;
    img.removeAttribute('data-src');
  }
}

function handleMediaQuery(mediaQuery) {
  const images = document.querySelectorAll('img[data-src]');

  if (mediaQuery.matches) {
    images.forEach(loadImage);
  }
}

const mediaQuery = window.matchMedia('(min-width: 600px)');
mediaQuery.addListener(handleMediaQuery);
handleMediaQuery(mediaQuery);

このサンプルコードでは、ウィンドウ幅が600px以上の場合にのみ、data-src属性を持つ画像を遅延読み込みしています。

小さな画面では画像を表示しないことで、データ通信量を削減し、ページの読み込み速度を改善できます。

ウィンドウ幅が600px以上の場合の表示

<img src="image.jpg" alt="サンプル画像">

ウィンドウ幅が600px未満の場合の表示

<img data-src="image.jpg" alt="サンプル画像">

画像の遅延読み込みは、レスポンシブデザインにおけるパフォーマンス最適化の手法の一つです。

window.matchMediaを活用することで、デバイスやウィンドウサイズに応じて柔軟に画像の読み込みを制御できるのです。

承知しました。ペルソナ設定、メタ情報、文章のフォーマット、非推奨のフォーマット、推奨のフォーマットを踏まえて、指定された目次の範囲でSEOライティングを続けます。

●よくあるエラーと対処法

JavaScriptのwindow.matchMediaを使ってウィンドウサイズ判定を行う際、時にはエラーに遭遇することがあります。

初心者のエンジニアにとっては、これらのエラーに悩まされることも多いでしょう。

そこで、window.matchMediaを使う上でよく発生するエラーとその対処法について解説します。

これらのエラーを理解し、適切に対処できるようになることが、スムーズなレスポンシブデザインの実装につながります。

それでは、代表的なエラーを1つずつ見ていきましょう。

○matchMediaがundefinedになるエラーと対処法

初めに紹介するのは、matchMediaがundefinedになるエラーです。

このエラーは、window.matchMediaメソッドが使用できない環境で発生します。

エラーメッセージの例

Uncaught TypeError: window.matchMedia is not a function

このエラーが発生する原因は、主に古いブラウザやウィンドウオブジェクトが存在しない環境（例えばNode.js）で、window.matchMediaを使用しようとした場合です。

対処法としては、window.matchMediaが使用可能かどうかを事前にチェックすることが有効です。

if (typeof window.matchMedia === 'function') {
  // window.matchMediaが使用可能な場合の処理
} else {
  // window.matchMediaが使用できない場合の代替処理
}

このように、window.matchMediaの存在をチェックすることで、エラーを回避し、適切な処理を行うことができます。

○メディアクエリの記述ミスによるエラーと対処法

2つ目は、メディアクエリの記述ミスによるエラーです。

メディアクエリの構文が正しくない場合、window.matchMediaは期待通りに動作しません。

エラーメッセージの例

Uncaught SyntaxError: Failed to execute 'matchMedia' on 'Window': '(min-width: 600px' is not a valid media query

このエラーは、メディアクエリの構文に誤りがある場合に発生します。

例えば、かっこの閉じ忘れやプロパティ名の誤記などが原因として考えられます。

対処法は、メディアクエリの構文を見直し、正しく記述することです。

// 誤ったメディアクエリの例
const mediaQuery = window.matchMedia('(min-width: 600px');

// 正しいメディアクエリの例
const mediaQuery = window.matchMedia('(min-width: 600px)');

メディアクエリの構文には十分注意を払い、誤りがないようにすることが大切です。

○イベントリスナーの設定ミスによるエラーと対処法

最後に、イベントリスナーの設定ミスによるエラーを取り上げます。

window.matchMediaを使う際、addListenerメソッドを使ってイベントリスナーを設定することがありますが、ここで間違いがあるとエラーが発生します。

エラーメッセージの例

Uncaught TypeError: Cannot read property 'matches' of undefined

このエラーは、イベントリスナーに渡されるコールバック関数の引数が正しくない場合などに発生します。

対処法は、イベントリスナーの設定を見直し、コールバック関数の引数を正しく指定することです。

// 誤ったイベントリスナーの設定例
mediaQuery.addListener(() => {
  if (mediaQuery.matches) {
    // 処理
  }
});

// 正しいイベントリスナーの設定例
mediaQuery.addListener((event) => {
  if (event.matches) {
    // 処理
  }
});

イベントリスナーの設定では、コールバック関数の引数に注意し、正しく指定する必要があります。

●window.matchMediaの応用例

ここまで、JavaScriptのwindow.matchMediaメソッドの基本的な使い方やレスポンシブデザインへの応用について解説してきました。

皆さんは、ウィンドウサイズ判定の方法やよくあるエラーへの対処法など、実践的なテクニックを身につけられたのではないでしょうか。

そこで、最後にwindow.matchMediaのさらなる応用例を2つ紹介します。

これらの事例を通じて、ウィンドウサイズ判定がどのようにWebサイトやアプリケーションの機能を向上させるのか、具体的にイメージできるはずです。

それでは、実際のサンプルコードを交えながら、window.matchMediaの応用例を見ていきましょう。

○サンプルコード7：レスポンシブなナビゲーションメニュー

1つ目の応用例は、レスポンシブなナビゲーションメニューの実装です。

ウィンドウサイズに応じて、ナビゲーションメニューの表示形式を切り替えることで、ユーザビリティを向上させることができます。

<nav id="globalNav">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">製品情報</a></li>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

function handleMediaQuery(mediaQuery) {
  const globalNav = document.getElementById('globalNav');

  if (mediaQuery.matches) {
    globalNav.classList.add('is-open');
  } else {
    globalNav.classList.remove('is-open');
  }
}

const mediaQuery = window.matchMedia('(min-width: 768px)');
mediaQuery.addListener(handleMediaQuery);
handleMediaQuery(mediaQuery);

このサンプルコードでは、ウィンドウ幅が768px以上の場合にナビゲーションメニューにクラス名”is-open”を付与し、それ未満の場合にはクラス名を削除しています。

これにより、CSS側でメディアクエリと連動したスタイルを定義することで、ナビゲーションメニューのレスポンシブデザインを実現できます。

ウィンドウ幅が768px以上の場合のナビゲーションメニュー

<nav id="globalNav" class="is-open">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">製品情報</a></li>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

ウィンドウ幅が768px未満の場合のナビゲーションメニュー

<nav id="globalNav">
  <ul>
    <li><a href="#">ホーム</a></li>
    <li><a href="#">製品情報</a></li>
    <li><a href="#">会社概要</a></li>
    <li><a href="#">お問い合わせ</a></li>
  </ul>
</nav>

このように、window.matchMediaを活用することで、ウィンドウサイズに応じたレスポンシブなナビゲーションメニューを実装できます。

ユーザーにとって使いやすく、快適なWebサイトやアプリケーションの構築につながるでしょう。

○サンプルコード8：デバイスごとに最適化された広告の表示

2つ目の応用例は、デバイスごとに最適化された広告の表示です。

ウィンドウサイズを判定し、それに応じて適切な広告を表示することで、広告効果を高めることができます。

<div id="adContainer"></div>

function loadAd(mediaQuery) {
  const adContainer = document.getElementById('adContainer');

  if (mediaQuery.matches) {
    adContainer.innerHTML = '<img src="ad-desktop.jpg" alt="デスクトップ向け広告">';
  } else {
    adContainer.innerHTML = '<img src="ad-mobile.jpg" alt="モバイル向け広告">';
  }
}

const mediaQuery = window.matchMedia('(min-width: 600px)');
mediaQuery.addListener(loadAd);
loadAd(mediaQuery);

このサンプルコードでは、ウィンドウ幅が600px以上の場合にはデスクトップ向けの広告画像を、それ未満の場合にはモバイル向けの広告画像を表示しています。

window.matchMediaとaddListenerを使って、ウィンドウサイズの変更を監視し、適切な広告を動的に読み込んでいます。

ウィンドウ幅が600px以上の場合の広告表示

<div id="adContainer">
  <img src="ad-desktop.jpg" alt="デスクトップ向け広告">
</div>

ウィンドウ幅が600px未満の場合の広告表示

<div id="adContainer">
  <img src="ad-mobile.jpg" alt="モバイル向け広告">
</div>

このように、window.matchMediaを活用することで、デバイスごとに最適化された広告表示を実現できます。

ユーザーにとって relevantな広告を提供することで、広告効果の向上やユーザーエクスペリエンスの改善が期待できるでしょう。

まとめ

JavaScriptのwindow.matchMediaメソッドは、レスポンシブデザインを実現する上で欠かせない機能です。

この記事では、基本的な使い方からレスポンシブデザインへの応用、よくあるエラーと対処法、そして実践的な応用例まで、幅広く解説してきました。

window.matchMediaを活用することで、要素の表示/非表示の切り替え、スタイルシートの動的な切り替え、イベントリスナーを使った動的な処理など、様々なレスポンシブデザインのテクニックを実現できます。

皆さんには、この記事で学んだ知識を活かして、自身のWebサイトやアプリケーションにレスポンシブデザインを取り入れていただきたいと思います。

window.matchMediaを使いこなすことで、あなたのスキルアップにつながり、チームやプロジェクトへの貢献も期待できます。

ぜひ、レスポンシブデザインの実装にチャレンジし、ユーザーにとって使いやすく、印象に残るWebサイトやアプリケーションを開発していってください。