JavaScriptでMediaQueryをトリガーにしたい場合は「MediaQueryList」を利用する

始めての投稿になります。
よろしくお願いします。

---

いつ使う？

JavaScriptでMedia Queriesを使用したいとき。

• UIを変更したい
• レイアウトを変更したい（CSSだけでは実現できない）

使い方

• MediaQueryListオブジェクトを作る
• 実行したい処理を作る
• 予約する

例

// MediaQueryの文字列（例：'(max-width: 414px)'）を引数にして、objを受け取る
const mql = window.matchMedia(MediaQuery); 

//コールバック
const callback = (event)=>{
***
}

// MediaQueryのイベントからコールバックを実行する。
mql.addListener(callback); 

その他

MediaQueryListはいくつかプロパティをもっています。
例えばmatchesはビューポートの状態に応じてBooleanを返します。

コールバックの例

const callback = (event) = {
  if(event.matches) {
    // trueの場合の処理
  } else {
    // falseの場合の処理
  }
}

参考

MediaQueryList
https://developer.mozilla.org/ja/docs/Web/API/MediaQueryList

window.matchMedia をそろそろ活用してもいい頃
https://qiita.com/amamamaou/items/a29b29f5267196a5e4ea

---

以上になります。
有難うございました。