Smart Communication Design Company
ホーム > ナレッジ > Blog > フロントエンドBlog > 2017年4月 > IE9のサポートが終了したのでwindow.matchMediaメソッドをあらためて見てみる

フロントエンドBlog

Webのフロントエンドを構成する技術、特にHTMLやCSS、JavaScript、またそれらに関連する話題を扱うBlogです。

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

UI開発者 郡司

前回の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メソッドを利用して柔軟にデザインの変更を行っていければと考えます。