window.matchMediaで作ったレスポンシブJSが効率悪いので直したい

JS初心者です。
###Bootstrapと同じブレイクポイントで、window.matchMediaを使ったレスポンシブ用のクラス振り分けJS作りました。

xs:0575px
sm:576767px
md:768991px
lg:9921199px
xl:1200px~

Bootstrapがメディアクエリでmin-width：◯◯◯px以上という考え方だったので、それに合わせてます。

###いろんな記事見ながら書いてみてとりあえず動いたのですが、ちょっと気になるところがあります。

スマホファースト前提で汎用性がない（PCファーストに切り替えるには？）
ループを多用して処理速度が不安
単純に書き方は問題ないか
Babel使ってビルドしたら大量にwarning出てしまった。（eslintかも）

みなさんならどのように書かれますか？

// breakpoints.js
const Breakpoints = (xs,sm,md,lg,xl) => {

  document.addEventListener('DOMContentLoaded', () => {

    const mqXs = window.matchMedia('(min-width:' + xs + 'px)');
    const mqSm = window.matchMedia('(min-width:' + sm + 'px)');
    const mqMd = window.matchMedia('(min-width:' + md + 'px)');
    const mqLg = window.matchMedia('(min-width:' + lg + 'px)');
    const mqXl = window.matchMedia('(min-width:' + xl + 'px)');

    const checkItem = document.getElementsByTagName('html');
    const mq = [mqXs,mqSm,mqMd,mqLg,mqXl];
    const mqPx = [xs,sm,md,lg,xl];
    const mqClass = ['xs','sm','md','lg','xl'];

    const reloadBreakPoint = () => {
      for (let i = mq.length - 1; i >= 0; i--) {
        if (mq[i].matches) {
          console.log(i);
          let index = i;
          for (let j = 0; j <= index; j++) {
            checkItem[0].classList.add(mqClass[j]);
          }
          break;
        }
      }
    };

    const checkBreakPoint = (mq) => {
      const index = mqClass.indexOf(mq);
      const thisClass = mqPx[index];
      const nextClass = mqPx[index + 1];
      if (mq == 'xl') {
        var minWidth = '(min-width:' + thisClass + 'px)';
      } else {
        var minWidth = '(min-width:' + thisClass + 'px)' + ' and (max-width:' + (nextClass - 1) + 'px)';
      }
      window.matchMedia(minWidth).addListener(function(){
        if (window.matchMedia('(min-width:' + thisClass + 'px)').matches) {
          checkItem[0].classList.remove('xl','lg','md','sm','xs');
          for (let j = 0; j <= index; j++) {
            checkItem[0].classList.add(mqClass[j]);
          }
        }
      });
    };

    // ブレイクポイントの瞬間に発火
    checkBreakPoint('xs');
    checkBreakPoint('sm');
    checkBreakPoint('md');
    checkBreakPoint('lg');
    checkBreakPoint('xl');

    // 初回チェック
    reloadBreakPoint();
  });

  return;

};

export default Breakpoints;

// common.js
import Breakpoints from './_breakpoints.js';
Breakpoints(0,576,768,992,1200);

<!-- 結果 992px ~ 1199pxなら -->
<html class="xs sm md lg">
</html>

// エラー eslint
      10:36  warning  Unexpected string concatenation                   prefer-template
      11:36  warning  Unexpected string concatenation                   prefer-template
      12:36  warning  Unexpected string concatenation                   prefer-template
      13:36  warning  Unexpected string concatenation                   prefer-template
      14:36  warning  Unexpected string concatenation                   prefer-template
      25:15  warning  'index' is never reassigned. Use 'const' instead  prefer-const
      39:9   warning  Unexpected var, use let or const instead          no-var
      39:24  warning  Unexpected string concatenation                   prefer-template
      41:9   warning  Unexpected var, use let or const instead          no-var
      41:13  error    'minWidth' is already defined                     no-redeclare
      41:24  warning  Unexpected string concatenation                   prefer-template
      43:47  warning  Unexpected function expression                    prefer-arrow-callback
      44:31  warning  Unexpected string concatenation                   prefer-template

karamarimo

2017/12/12 05:00

その warning は babel ではなく eslint のものではないですか？

kumakuma112

2017/12/12 05:49

そうかもしれないです。そこら辺あまり区別できてなくて…　ご指摘ありがとうございます。

karamarimo

2017/12/12 05:51

右側にルール名が書いてありますので、公式サイトでそれを検索すれば詳しい情報が見つけられますよ。 https://eslint.org/docs/rules/no-var

行動規範の内容に同意します

回答1件

現在の挙動を見る限り、難しいことをしなくても、各 media query のリスナーごとに独立にクラスを add/remove すればいいのではないでしょうか。

例えば sm なら 576px 以上になったときsmクラスを追加、576px 未満になったときsmクラスを削除、という感じです。

DEMO (jsFiddle)

js
1function setBreakpoints(target, bps) {
2  const bpNames = Object.getOwnPropertyNames(bps)
3
4  for (let bpName of bpNames) {
5    const bp = bps[bpName]
6    const mql = window.matchMedia(`(min-width: ${bp}px)`)
7    mql.addListener(e => {
8      setClass(bpName, e.target)
9    })
10    setClass(bpName, mql) // initial check
11  }
12
13  function setClass(name, mql) {
14    if (mql.matches) {
15      target.classList.add(name)
16    } else {
17      target.classList.remove(name)
18    }
19  }
20}
21
22// 使用例
23const bla = document.querySelector('#bla')
24setBreakpoints(bla, {
25  xs: 200,
26  sm: 300,
27  md: 400,
28  lg: 500,
29  xl: 600
30});