{ category: "Front-end" }
SPAなら関数の発火・その内容のコントロールはいろんなアプローチがあると思いますが、ベーシックなweb制作ではdata属性を用いることが多いと思います。
今やっている案件で、画面数（ブレークポイントで分かれているデザイン）が4種類あり、その時々でjsの振る舞いが違うという状況にあたっており、data属性からどうコントロールするかということになったのですが引数を文字列で渡せるwindow.matchMediaが最適解だということに行き着きました。
MDNの参考ページ https://developer.mozilla.org/ja/docs/Web/API/Window/matchMedia
コード例
// helper
export default class Helper {
static isMediaMatch(media) {
return window.matchMedia(media).matches;
}
}
■ 一つのブレークポイント内のみで発火するコントロール
// html
<div data-media="(min-width: 768px)">...</div>
// js
class Hoge {
constructor(trigger) {
this.trigger = trigger;
this.media = this.trigger.dataset.media;
}
}
fuga() {
// this.mediaの存在確認をしたあとに下記
if (Helper.isMediaMatch(this.media)) {
returnするなど
}
}
■ 複数のブレークポイント内で設定の出し分けする場合
// html
<div data-media-config='{ "mediaAll": [{ "media": "(max-width: 991px)", "config": { "hoge": ... } }]}'>...</div>
// js
class Hoge {
constructor(trigger) {
this.trigger = trigger;
this.mediaData = this.trigger.dataset.mediaConfig;
this.config = null;
if (this.mediaData) {
for (let i = 0; i < this.mediaData.mediaAll.length; i++) {
if (Helper.isMediaMatch(this.mediaData.mediaAll[i].media)) {
this.configでなにかやる
}
}
}
}
結構使えるテクニックだと思うので、公開してみました！