【JavaScript基礎】画面サイズに応じて処理を分ける

参考URL

参考著書

画面サイズがブレークポイントを超えたときに処理をする

画面サイズに応じて処理を分けたいときは、下記のメソッドとプロパティが役立ちます。

メソッド

メソッド	意味	戻り値
matchMedia(メディアクエリ)	メディアクエリの情報	オブジェクト(MediaQueryList)
matchMedia(メディアクエリ).addListener(処理)	メディアクエリに一致したときに処理を実行する	なし

matchMedia()メソッドは、引数に応じたメディアクエリの情報を返します。

例えば、「ウィンドウ幅が768px以上」を示す「(min-width:768px)」を渡すと、下記の情報が返ってきます。

const mediaQueryList = matchMedia('(min-width:768px)');
console.log(mediaQueryList);

// 出力結果
// {
//     matches: true, 　//ウィンドウサイズが768px以上のとき
//     media: "(min-width: 768px)",
//     onchange: null
// }

プロパティ

プロパティ	内容	型
matchMedia(メディアクエリ).matches	メディアクエリに一致するかどうか	真偽値

matchesプロパティを用いて、ブラウザウィンドウのサイズがメディアクエリに一致するかどうかを調べられます。

// ウィンドウサイズが768px以下ならtrue
matchMedia('(min-width:768px)').matches;

// ウィンドウサイズが500px以上1000px以下ならtrue
matchMedia('(min-width:500px) and (max-width:1000px)').matches;

スマートフォンの縦向き・横向き変更を検知したいとき

スマートフォンの縦向き・横向き変更を検知したいときは、下記のようにコールバック処理が設定できます。

// (orientation:portrait)は横持ちを示す
const mediaQueryList = matchMedia('(orientaton: portrait)');

mediaQueryList.addListener(() => {
    console.log('デバイスの向きが変更されました。');
});

画面幅の変更タイミングで処理を行いたいとき

画面幅の変更（メディアクエリの変更タイミング）で処理を行いたい時は、下記のようにコールバック処理が設定できます。

// メディアクエリ情報
const mediaQueryList = matchMedia('(min-width:768px)');

mediaQueryList.addEventListener('change', (e) => {
    if (e.matches) {
        /**画面幅が768px以上のときの処理 */
        console.log('画面幅が768px以上です。');
    } else {
        /**画面幅が768px以上のときの処理 */
        console.log('画面幅が768px未満です。');
    }
});