JavaScriptでメディアクエリの判定を行いたい場合、`window.matchMedia()`メソッドを使用することで簡単に実装できます。このメソッドを使えば、画面サイズの変更を検知して処理を実行することが可能です。

matchMedia()メソッドの基本的な使い方

// メディアクエリの条件をチェック
const mediaQuery = window.matchMedia('(max-width: 768px)');

// 現在の状態を確認
if (mediaQuery.matches) {
    console.log('768px以下です');
} else {
    console.log('768px超です');
}

リサイズ時の検知方法

画面サイズが変更された時に処理を実行したい場合は、`addListener()`または`addEventListener()`を使用します。

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

// リサイズ時の処理
const handleMediaQuery = (event) => {
    if (event.matches) {
        console.log('768px以下になりました');
    } else {
        console.log('768px超になりました');
    }
};

// 変更検知を登録
mediaQuery.addListener(handleMediaQuery);  // 従来の方法
// または
mediaQuery.addEventListener('change', handleMediaQuery);  // 新しい方法

複数の条件を設定する場合

const mediaQueryPC = window.matchMedia('(min-width: 1024px)');
const mediaQueryTablet = window.matchMedia('(min-width: 768px) and (max-width: 1023px)');
const mediaQuerySP = window.matchMedia('(max-width: 767px)');

const checkDeviceSize = () => {
    if (mediaQueryPC.matches) {
        console.log('PCサイズです');
    } else if (mediaQueryTablet.matches) {
        console.log('タブレットサイズです');
    } else if (mediaQuerySP.matches) {
        console.log('スマートフォンサイズです');
    }
};

// 初期チェック
checkDeviceSize();

// リサイズ時のチェック
mediaQueryPC.addEventListener('change', checkDeviceSize);
mediaQueryTablet.addEventListener('change', checkDeviceSize);
mediaQuerySP.addEventListener('change', checkDeviceSize);

注意点

1. `addListener()`は非推奨となっているため、新しいプロジェクトでは`addEventListener()`を使用することを推奨します。

2. イベントリスナーを削除する場合は、以下のように実装します：

// リスナーの削除
mediaQuery.removeEventListener('change', handleMediaQuery);

3. ブラウザの互換性に注意が必要です。古いブラウザでは`matchMedia()`がサポートされていない場合があります。

まとめ

`matchMedia()`メソッドを使用することで、JavaScriptでメディアクエリの判定を簡単に実装できます。画面サイズの変更を検知して動的に処理を変更したい場合に非常に便利な機能です。レスポンシブデザインの実装や、デバイスに応じた機能の出し分けなど、様々なケースで活用できます。

---

このメソッドを使用することで、CSSのメディアクエリと連携しながら、よりインタラクティブなWebサイトを構築することが可能になります。実装時は、ブラウザの互換性とパフォーマンスを考慮しながら適切に使用することが重要です。