window.matchmediaとは？初心者にもわかる使い方と基本を徹底解説共起語・同意語・対義語も併せて解説！

この記事を書いた人

高岡智則

年齢：33歳性別：男性職業：Webディレクター（兼ライティング・SNS運用担当）居住地：東京都杉並区・永福町の1LDKマンション出身地：神奈川県川崎市身長：176cm 体系：細身〜普通（最近ちょっとお腹が気になる）血液型：A型誕生日：1992年11月20日最終学歴：明治大学・情報コミュニケーション学部卒通勤：京王井の頭線で渋谷まで（通勤20分）家族構成：一人暮らし、実家には両親と2歳下の妹恋愛事情：独身。彼女は2年いない（本人は「忙しいだけ」と言い張る）

window.matchmediaとは？

window.matchmedia は、ウェブブラウザの機能の一つで、画面の大きさや解像度などの条件に合わせて、JavaScript から動きを変えるための道具です。実際のAPI名は window.matchMedia ですが、この記事では初心者にも理解しやすいように window.matchmedia をきっかけに説明します。

つまり、「画面サイズがこの条件を満たすときだけ何かを変えたい」という時に使います。例として、画面幅が 600px 以下のときにレイアウトを切り替えるという条件を考えます。

使い方の基本は次の通りです。まず条件を作り、結果を確認します。例えば、window.matchMedia('(max-width: 600px)') のように呼び出して MediaQueryList を手に入れます。ここには matches という真偽値と、変更が起きたときに知らせてくれる change イベントの情報が含まれています。

この matches プロパティは、現在の画面が条件を満たしているかを教えてくれます。もし true なら条件は成立、false なら成立していません。画面サイズが変わると条件も変わるため、change イベントを使って適切に対応します。

具体的な手順：1) window.matchMedia('(max-width: 600px)') で条件を作る。2) 返ってくる MediaQueryList の .matches を使って現在の状態を判断する。3) 画面サイズが変わったときに動作を実行したい場合は、change イベントを監視する。

コード風の説明を続けます。例として、次のような使い方を想定します。例: const mq = window.matchMedia('(max-width: 600px)'); // 現在の状態を確認 mq.matches; // true か false が返る mq.addEventListener('change', (e) => { console.log('変化後の状態:', e.matches); });

古いブラウザでは addEventListener が使えないことがあるため、互換性のために addListener を併用することがあります。新しい環境では addEventListener を使うのが主流です。

ブラウザ	サポート状況	備考
Chrome	◯	現行安定
Safari	◯	Safari 10 以降で動作
Firefox	◯	最新機能に対応
Edge	◯	Chromium系で動作

活用のコツ：画面サイズに応じて表示を切り替えたいときにだけ使うと、コードがすっきりします。条件をまとめておけば、後からデザインを変えるときにも修正が楽になります。

まとめ

この記事では、window.matchmedia の基本的な使い方、結果の読み方、変更を検知する方法、実際の書き方のイメージを解説しました。初心者でも理解しやすい言葉で説明することを心がけ、表を使ってブラウザの対応状況も確認できるようにしました。

window.matchmediaの同意語

window.matchMedia: 指定したメディアクエリ文字列に対して、現在のウィンドウ状態がそれに合致するかを評価し、結果と監視機能を提供する、ブラウザの組み込み API。
matchMedia: window.matchMedia と同じ API を指す呼称。実際には同一の機能を指す言葉として使われます。
CSS メディアクエリ API: CSS のメディアクエリをプログラムから扱えるようにする機能の総称。matchMedia はこの機能の一部です。
MediaQueryList: window.matchMedia が返すオブジェクト。現在のマッチ状態と、変更を通知するイベントリスナーを提供します。
MediaQueryList.change イベント: MediaQueryList のマッチ状態が変化したときに発生するイベント。リスナーで処理を実装します。
MediaQueryList.addEventListener: MediaQueryList に対して change などのイベントを登録する標準的な方法。
MediaQueryList.addListener (旧式): 古いブラウザで使われていた、マッチ状態の変化を検知する従来の API。現在は addEventListener の利用が推奨されています。
メディアクエリの評価機能: メディアクエリ文字列を評価して、現在のビューポート条件と一致するかを判定する機能の説明。

window.matchmediaの対義語・反対語

マッチしない: window.matchMediaで指定したメディアクエリが現在の環境と一致しない状態を指します。例として、768px未満の幅を要求するクエリが現在のウィンドウ幅で適用されていない場合など。
不一致: 現在の環境（画面サイズ・デバイス特性など）が、指定したメディアクエリの条件と食い違っている状態の表現。マッチしていないニュアンスの別の言い換えです。
非適合: メディアクエリの条件を環境が満たしていない・適合していない状態を示します。技術的には“この環境では条件を満たさない”という意味合いです。
非適用: 指定のメディアクエリが現在の文脈に適用されていない、つまり効果がない・適用外である状態を示します。
条件を満たさない: メディアクエリの条件（例: 幅・解像度・向きなど）を現在の環境が満たしていないことを表す、直感的な表現です。
直接の対義語は存在しない: window.matchMediaには厳密な直接の対義語はありません。概念的には“マッチしている状態”と“マッチしていない状態”の言い換えを使うのが実務的です。

window.matchmediaの共起語

window.matchMedia: 指定したCSSメディアクエリが現在の環境と一致するかを判定するJavaScriptの関数。MediaQueryListオブジェクトを返します。
MediaQueryList: window.matchMediaが返すオブジェクト。現在のマッチ状態を示す「matches」プロパティと、変更を検知するイベントリスナーを持ちます。
matches: MediaQueryListのプロパティ。指定したメディアクエリが現在の環境と一致していればtrue、一致しなければfalseを返します。
addListener: 旧来のAPIでMediaQueryListにリスナーを登録する方法。現在は非推奨で、代わりにaddEventListenerを使います。
removeListener: 旧来のAPIでリスナーを解除する方法。現在は非推奨です。
addEventListener: 現代的な方法でMediaQueryListのchangeイベントを購読します。イベントタイプは'change'。
removeEventListener: addEventListenerで登録したイベントリスナーを解除します。
MediaQueryListEvent: changeイベントで渡されるイベントオブジェクト。queryとmatchesプロパティを含みます。
change: MediaQueryListの状態が変化したときに発生するイベント名。
CSSメディアクエリ: 画面サイズ・向き・色設定などを条件にするCSSの表現。window.matchMediaの対象となります。
breakpoints / ブレークポイント: デザインの区切り点。matchMediaを使ってブレークポイントの適用を検出・切替します。
orientation: デバイスの向き（portrait / landscape）を判定するメディア機能。
prefers-color-scheme: ダークモード／ライトモードの好みを検知するメディア機能。テーマ切替の判断材料として使われます。
min-width: 下限幅を示すメディアクエリ。レスポンシブデザインで頻出します。
max-width: 上限幅を示すメディアクエリ。レスポンシブデザインで頻出します。
width / height: デバイスの幅・高さを表すメディア機能。matchMediaで条件化する際に使われます。
JavaScript: window.matchMediaを操作するプログラミング言語。DOMと組み合わせてUIを動的に変更します。
レスポンシブデザイン: 画面サイズに応じてレイアウトを変える設計思想。matchMediaはその実現手段の一つです。
モダンブラウザ対応: 最新のブラウザでwindow.matchMediaと関連APIがサポートされているかを示す文脈。
ポリフィル: 古い環境でwindow.matchMedia機能を模倣・補完する追加スクリプト。

window.matchmediaの関連用語

window.matchMedia: 正しくは window.matchMedia という、ビューポートが指定したメディアクエリと一致するかを判定する JavaScript の API。呼び出すと MediaQueryList が返され、matches や media の情報を利用して状態を知ることができます。
MediaQueryList: window.matchMedia の返り値となるオブジェクト。現在のクエリの状態を保持し、イベントで変化を通知します。
matches: MediaQueryList の真偽値プロパティ。true ならクエリに一致、false なら一致しません。
media: 返されるクエリ文字列。例: '(min-width: 600px)' のように現在のクエリを示します。
addListener: 古いブラウザでの通知登録方法。現在は非推奨となっています。
removeListener: 古い通知解除方法。現在は非推奨。
addEventListener: change イベントを利用してクエリの状態変化を監視する、現在の推奨方法。
removeEventListener: change イベントの登録解除方法。
MediaQueryListEvent: change イベントで渡されるイベントの型。e.matches で新しい状態を知ることができます。
change イベント: メディアクエリの状態が変化したときに発生するイベント。
CSS のメディアクエリ: CSS で条件分岐を行う仕組み。@media ルールとして使います。
@media: CSS 側の条件指定キーワード。幅や向きなどを条件にスタイルを切り替えます。
media features: min-width, max-width, width, height, orientation など、条件として使う機能群。
min-width: ビューポートの最小横幅を条件にするメディア機能。
max-width: ビューポートの最大横幅を条件にするメディア機能。
width: ビューポートの横幅を条件にする機能。
height: ビューポートの高さを条件にする機能。
orientation: 横向きまたは縦向きを判定する機能。
aspect-ratio: 縦横比を条件にする機能。
prefers-color-scheme: ユーザーの色の好みを検知しダーク/ライトモードを適用する手がかり。
prefers-reduced-motion: アニメーションの動作を抑制する設定を検知する機能。
ブレークポイント: デザインを切り替える目安となる画面幅の点。例: 768px, 1024px。
レスポンシブデザイン: 画面サイズに応じてレイアウトを変える設計思想。
SSR の注意点: サーバーサイドレンダリングでは window や matchMedia が利用できないため、クライアントサイドでの実行に依存します。
ポリフィル: 古いブラウザ対応のための代替実装。matchMedia を提供します。
ブラウザ互換性: 主要なブラウザでの matchMedia のサポート状況を確認します。
Chrome DevTools デバイスモード: デバイスモードを使って画面サイズを模擬し、matchMedia の挙動を確認できます。