意外とハマってしまった比較演算子のタイポ=>｜デバッグの記録

単純なタイポですがjavascriptで遭遇し恥ずかしながら少しハマったので
改めて原因や対策などをまとめてみます。

>=が正解

aはb以上はa >= b。
aはb以下はa <= b。

大なりイコールと読み方で覚えるのや
アロー関数と逆という覚え方も良いかも。
これでも実際コード見ている時は映像として馴染んでしまってわかりづらいので
やっぱり後述するIDEのLintをしっかり設定するのが最優先だと思います。
特にPHPのアロー演算子=>やjavascriptのアロー関数=>をいじってたりすると
目がなれてしまって見逃しがちなんですよね。。。と言い訳してみる。

状況

window.innerWidthで判定している部分でそれをresizeイベントで呼び出していました。

changeWidth.js

const changeWidth = () => {
    const nowWidth = window.innerWidth;

    if (nowViewPortWidth => 768) {
        alert("判定true")
    }
}
window.addEventListener('resize', changeWidth);

これでどのような動きになったかというと
ぬるぬる動きながらランダムにバグ的な動きが発動するという感じでした。

具体的な動きを書くと、changeWidthはresizeイベントで設定している関数ですが
スクロールしたときに発動し「判定true」が表示され、そのタイミングがよくわからない
（早くスクロールすると発動したり、トップに移動したときに発動したり、はたまたしなかったり）
という状況でした。

resizeはiosでスクロールでも発動する

こちらの独特な挙動もあり、原因を特定するのに手惑いました。
iOS Safariでスクロールしただけでリサイズイベントが発生する原因と対処法

IDEにESLintが設定されていなかった。

ESLintが設定されていないと警告も出ないんですね。
またデベロッパーツールでも特に警告もエラーも出ていませんでした。
個人的にはこの辺りがハマりポイントだな〜という感じがしています。

PhpStorm
WebStorm

上記のページを参考にESLintを設定したら無事警告を出してくれるようになりました。

所感｜自戒

IDEの設定は継続的に見直した方が良さそう。
複数のバグが重なると原因がよくわからなくなる傾向があるので問題の切り分けを細かくしたほうがよい。
デベロッパーツールでも捕捉されず動くバグがあるということを忘れない。