IE9のサポートが終了したのでwindow.matchMediaメソッドをあらためて見てみる

前回のCSSに引き続いて、今回はIE9のサポート終了に伴って積極的に利用していきたいJavaScirpt編になります。

今回紹介するwindow.matchMediaメソッドを利用すると、CSSのMedia Queriesによるスタイルの変更とともにJavaScriptの挙動も変更することができます。

以前からこのメソッドは存在していましたが、IE9では利用不可能でした。そのため、matchMediaのポリフィルを利用するか、ウィンドウのリサイズを監視する機能を自作する必要がありました。しかし、IE9のサポートが終了したことにより、今後新規で構築するWebサイトでは検証環境にIE9を入れることが少なくなります。つまり、window.matchMediaメソッドをそのまま利用できるようになるのです。

使い方

window.matchMediaメソッドは、引数にメディアクエリ文字列を指定することで、MediaQueryListオブジェクトを生成します。メディアクエリ文字列にはCSSのMedia Queriesと同じくさまざまなメディアクエリを指定できます。
生成されたMediaQueryListオブジェクトには、以下のプロパティとメソッドがあります。

プロパティ

matches

メディアクエリに一致しているかの真偽値を返します

media

メディアクエリ文字列を返します

メソッド

addListener()

MediaQueryListに新しいイベントリスナを追加され、メディアクエリの評価が変更されると実行されます

removeListener()

MediaQueryListからイベントリスナを削除します

実装例

jQueryのカスタムイベントとtrigger()メソッドを利用して複数の機能間で使いまわせるように実装してみます。

(function () {
    'use strict';

    // 例）ハンバーガーメニュー
    (function () {
        // ハンバーガーメニューに必要な処理は省略
        // ...

        // メディアクエリ用のカスタムイベントをセット
        $(window).on('customMatchMedia', function (event, bool) {
            if (bool) {
                // 768px以下の時
                $('body').addClass('enable-menu');
            } else {
                // 768px以上の時
                $('body').removeClass('enable-menu');
            }
        });
    }());

    // メディアクエリのイベントセット
    (function () {
        var mediaQueryList = window.matchMedia('(max-width: 768px)');

        // MediaQueryListにイベントリスナを登録
        mediaQueryList.addListener(mediaChange);

        // 初期状態の評価のためイベントリスナを一度実行
        mediaChange(mediaQueryList);

        // イベントリスナの定義
        function mediaChange(mql) {
            // カスタムイベントを呼び出す
            $(window).trigger('customMatchMedia', [mql.matches]);
        }
    }());
}());

まとめ

MediaQueryListから追加したイベントはメディアクエリの評価が変更されるときだけ実行されるので従来のresizeイベントを使用してウィンドウのリサイズを監視するより負荷が少なく済みます。

レスポンシブWebデザインでは、ブレイクポイントごとに機能が変わるデザインがありますので、これからはwindow.matchMediaメソッドを利用して柔軟にデザインの変更を行っていければと考えます。