🐈
画面幅に応じて処理を発火させる
例えば、ハンバーガーメニューを画面幅が広がった時に閉じたい、などブレイクポイントに応じて、処理を発火させたいことがあるかと思います。いくつか方法をメモしておきます。
方法１：windowにresizeイベントをセットする
ビューポート幅が変わった時に何かしら処理を動かしたい時に今まで以下のように書いていました。
ただし、この方法ですとリサイズの度に細かく発火してしまい、サイトが重くなる原因になってしまいます。
window.addEventListener("resize", () => {
const mdSize = 768
const windowWidth = document.body.clientWidth
if (windowWidth > mdSize) {
console.log(`${mdSize}pxより大きいです！`)
} else if (windowWidth <= mdSize) {
console.log(`${mdSize}px以下です！`)
}})
方法2：MediaQueryListのchangeイベントを使う
今日学んだのはこの方法です。指定した閾値(ビューポート幅)を通過した時に発火します。
const mdSize = 768
const mediaQueryList = window.matchMedia(`(min-width: ${mdSize}px)`)
mediaQueryList.addEventListener("change", (event) => {
if (event.matches) {
console.log(`${mdSize}pxより大きいです！`)
} else {
console.log(`${mdSize}px以下です！`)
}
})
MediaQueryListってなに？
メディアクエリの情報を格納したオブジェクトです。
MediaQueryListオブジェクトはmatchMediaをwindow オブジェクト上で呼び出すことで作成することができます。
MediaQueryListのmatchesプロパティで、現在のメディアクエリに一致しているかを判定できます。
また、メディアクエリ内か否かが変更された場合にchangeイベントが発生します。
こういった特定の閾値でイベントを発火させたい、という時にとても便利ですね。
積極的に使っていこうと思います。
Discussion