【ITニュース解説】CSS Media Query in Javascript

現代のWebサイトは、様々なデバイスやユーザー環境に対応する必要がある。例えば、スマートフォンの小さな画面とPCの大きな画面では、表示すべき情報量やレイアウトが異なるし、ユーザーがダークモードを好むかライトモードを好むかによって、サイトの配色も変えるべきだろう。このようなデバイスの特性やユーザーの設定に応じて、Webサイトのデザインや動作を調整する技術として、CSSメディアクエリは非常に効果的で最適化された方法として広く利用されている。しかし、CSSメディアクエリは主にスタイルの変更に特化しており、JavaScriptを使った動的な処理と連動させるには、これまで少し工夫が必要な場面があった。

そこで登場するのが、JavaScript内でCSSメディアクエリを扱うための機能だ。window.matchMediaというメソッドがそれにあたる。このメソッドは、windowオブジェクトに備わっており、ドキュメント上で特定のCSSメディアクエリに合致しているかどうかを確認したり、その合致状況の変化を追跡したりするために利用できる。システムエンジニアを目指す初心者にとっては、JavaScriptがCSSの条件を直接「理解」し、それに基づいてプログラムの動作を制御できる、画期的な機能だと考えると良いだろう。

matchMediaの使い方は非常にシンプルだ。例えば、CSSで画面の最大幅が480ピクセル以下の場合にスタイルを適用するメディアクエリとして@media (max-width: 480px)と書く場合、matchMediaに渡すのは@mediaより後の部分、つまり(max-width: 480px)という文字列だ。具体的な記述例としては、const matchMobileQuery = window.matchMedia("(max-width: 480px)");のようになる。

このmatchMobileQueryという変数には、単にメディアクエリが合致しているか否かの真偽値が直接入るわけではない。実際にはMediaQueryListと呼ばれる特別なオブジェクトが格納される。このMediaQueryListオブジェクトには、いくつかのプロパティがあるが、特に重要なのはmatchesというプロパティだ。このmatchesプロパティの値は、現在の環境が指定したメディアクエリの条件に合致していればtrue、合致していなければfalseとなる。したがって、プログラムの中でif (matchMobileQuery.matches)のように条件分岐を書くことで、メディアクエリの合致状況に応じて異なる処理を実行できる。

matchMediaの真価は、単に現在の状況を一度確認するだけでなく、メディアクエリの条件が変化したときに、それをリアルタイムで追跡し、自動的に処理を実行できる点にある。これは、MediaQueryListオブジェクトに対してイベントリスナーを設定することで実現する。具体的には、addEventListenerメソッドを使って'change'イベントを登録する。

例えば、ユーザーのOS設定がダークモードかライトモードかによってWebサイトの見た目を変えるprefers-color-scheme: darkというメディアクエリを考えてみよう。このクエリの変化を追跡するには、まずconst mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');のようにMediaQueryListオブジェクトを取得する。次に、mediaQuery.addEventListener('change', handleChange);のようにchangeイベントに対するハンドラ関数handleChangeを登録する。

handleChange関数が呼び出される際には、イベントオブジェクトが引数として渡される。このイベントオブジェクトにもmatchesプロパティが含まれており、変更後のメディアクエリの合致状況を知ることができる。例えば、ユーザーがOSの設定でライトモードからダークモードへ切り替えた場合、handleChange関数が自動的に実行され、そのイベントオブジェクトのmatchesプロパティがtrueになるため、Webサイト側でダークモード用の処理（例えば、JavaScriptでクラスを追加して要素の色を変更するなど）を実行できる。逆に、ダークモードからライトモードへ戻った場合はmatchesがfalseとなり、ライトモード用の処理を実行できる。このように、ユーザーがシステム設定を変更した際に、JavaScriptが即座に反応してサイトの動作を調整することが可能になるのだ。

matchMediaは、様々な場面で活用できる。これまでは、画面の幅をJavaScriptで検出するためにwindow.innerWidthなどのプロパティが使われていたが、matchMediaを使えば、CSSのメディアクエリで設定したブレークポイントと完全に同期した形で、JavaScriptの処理を切り替えることができる。これにより、CSSとJavaScriptの間で画面サイズに関する定義の重複を防ぎ、より一貫性のあるレスポンシブな挙動を実現できる。

また、特定のHTML要素のサイズ変更を監視するresizeObserverという機能もあるが、もし要素のサイズ変更が間接的に画面全体のサイズ変更、つまりメディアクエリの条件変更によって決まるようなケースであれば、matchMediaの方がよりシンプルで効率的な解決策となる場合がある。

さらに重要なのは、matchMediaが画面サイズだけでなく、より多様なデバイスの特性やユーザー設定に対応できる点だ。先に挙げたダークモード/ライトモードの設定（prefers-color-scheme）以外にも、デバイスの向き（orientation）、ユーザーがアニメーションを減らす設定をしているかどうか（prefers-reduced-motion）など、様々なメディアクエリをJavaScriptで扱うことができる。これにより、Webサイトの見た目だけでなく、JavaScriptで制御されるアニメーションの再生有無や、特定の機能の有効・無効化など、ユーザーの環境や好みに合わせた高度なカスタマイズが可能になる。

このように、window.matchMediaは、CSSメディアクエリの持つ柔軟性と表現力をJavaScriptの動的な制御と結びつけることで、よりパーソナライズされ、ユーザーフレンドリーなWebアプリケーションを開発するための強力な手段となる。システムエンジニアを目指す上で、ユーザー体験を向上させるためのこのような技術は、現代のWeb開発において不可欠な知識と言えるだろう。