Q. 削除された変数への参照が、グローバル変数と一致しているためエラーが出ない

状況#

まず event という名前の引数を受け取る次のようなコンポーネントがあった。

1
const SomeComponent = ({ event }) => {
2
  return (
3
    <div>
4
      <Button
5
        onClick={() => {
6
          // eventを利用した処理
7
        }}
8
      >
9
        Click me
10
      </Button>
11
      {/* とても長いコード */}
12
    </div>
13
  );
14
};

次に click event を利用したくなり、次のように引数から受け取る event を rename した。

1
const SomeComponent = ({ someEvent }) => {
2
  return (
3
    <div>
4
      <Button
5
        onClick={(event) => {
6
          // someEventとeventを利用した処理
7
        }}
8
      >
9
        Click me
10
      </Button>
11
      {/* とても長いコード */}
12
    </div>
13
  );
14
};

このとき、変更箇所自体は想定通りの挙動をしていたが、それ以降のコードで event という変数を利用している箇所が残っていた。

通常の変数であれば、このような参照があるとエラーが出るが、グローバル変数である event と重複していたためエラーが検出されなかった。

対応策#

このような問題を防ぐために、ESLint の no-restricted-globals ルールを利用することができる。

https://eslint.org/docs/latest/rules/no-restricted-globals

1
{
2
  rules: {
3
    "no-restricted-globals": ["error", "event"]
4
  }
5
}

このルールで指定されたグローバル変数を利用する場合、明示的にglobalThis.eventのように指定しなければエラーが出るようになるため、意図しないグローバル変数への参照を防ぐことができる。

余談#

no-restricted-globalsルールでeventという変数名は名指しで言及されている。

For instance, early Internet Explorer versions exposed the current DOM event as a global variable event, but using this variable has been considered as a bad practice for a long time. Restricting this will make sure this variable isn’t used in browser code. - https://eslint.org/docs/latest/rules/no-restricted-globals

このように歴史的な経緯などにより、ブラウザ環境には非常に多くのグローバル変数が存在し、中にはeventのように変数名が被ってしまいそうなものが複数存在する。

ESLint で利用するglobalsパッケージのbrowserフィールドを見ると、event以外にもerror、length、name、status、topなどが存在している。

https://github.com/sindresorhus/globals/blob/v15.11.0/globals.json#L29