JavaScript 開発者のための安全なコーディング：no-unsafe-negation ルール徹底解説

ESLint ルール "no-unsafe-negation" の解説

問題点

否定演算子は、式の結果を逆転させるために使用されます。例えば、以下のコードは x が 0 ではないことをチェックします。

if (x !== 0) {
  // ...
}

しかし、このコードは以下のように書き換えることもできます。

if (!x === 0) {
  // ...
}

一見同じように見えますが、2番目のコードは誤解を招きやすく、バグを引き起こす可能性があります。これは、=== 演算子が == 演算子とは異なる動作をするからです。

• === 演算子は、値と型が一致するかどうかをチェックします。
• == 演算子は、値のみを比較します。

つまり、2番目のコードは、x が 0 と 型 が一致する場合にのみ true になります。これは、x が 0 ではないことをチェックしたい場合に、意図しない動作を引き起こす可能性があります。

no-unsafe-negation ルールは、このような誤解を招く否定演算子の使い方を検出し、警告を発します。このルールを有効にすることで、コードの安全性を向上させることができます。

ルールの設定

no-unsafe-negation ルールは、ESLint のデフォルトルールではありません。有効にするには、.eslintrc.json ファイルに以下の設定を追加する必要があります。

{
  "rules": {
    "no-unsafe-negation": "error"
  }
}

例

以下のコードは、no-unsafe-negation ルールによって警告されます。

if (!x === 0) {
  // ...
}

// 警告: '!' と '===' の間にスペースが必要です。

このコードを修正するには、以下のいずれかの方法があります。

• === 演算子の前にスペースを追加する:

if (! x === 0) {
  // ...
}

• !== 演算子を使用する:

if (x !== 0) {
  // ...
}

ESLint ルール no-unsafe-negation は、コードの安全性を向上させるために、潜在的なバグを引き起こす可能性のある否定演算子の使い方を検出するのに役立ちます。このルールを有効にすることで、コードの品質を向上させることができます。

ESLint ルール "no-unsafe-negation" のサンプルコード

警告されるコード

// 型と値の両方を確認したい場合
if (!x === 0) {
  // ...
}

// 型のみを確認したい場合
if (!x === '') {
  // ...
}

// 変数が null か undefined かを確認したい場合
if (!x === null) {
  // ...
}

// 文字列が空文字かどうかを確認したい場合
if (!str === '') {
  // ...
}

// 配列が空かどうかを確認したい場合
if (!arr === []) {
  // ...
}

// オブジェクトが空かどうかを確認したい場合
if (!obj === {}) {
  // ...
}

警告を回避するコード

// 型と値の両方を確認したい場合
if (x !== 0) {
  // ...
}

// 型のみを確認したい場合
if (typeof x === 'string') {
  // ...
}

// 変数が null か undefined かを確認したい場合
if (x === null || x === undefined) {
  // ...
}

// 文字列が空文字かどうかを確認したい場合
if (str === '') {
  // ...
}

// 配列が空かどうかを確認したい場合
if (arr.length === 0) {
  // ...
}

// オブジェクトが空かどうかを確認したい場合
if (Object.keys(obj).length === 0) {
  // ...
}

その他の例

// 正しいコード
if (x === true) {
  // ...
}

if (x === false) {
  // ...
}

// 警告されるコード
if (!x === true) {
  // ...
}

if (!x === false) {
  // ...
}

上記のサンプルコードを参考に、コードの安全性を向上させてください。

ESLint ルール "no-unsafe-negation" の代替方法

no-unsafe-negation ルールの代わりに、以下の方法でコードの安全性を向上させることができます。

型ガードを使用する

TypeScript では、型ガードを使用して、変数の型を安全に確認することができます。例えば、以下のコードは、x が 0 ではないことを安全に確認します。

function isNotZero(x: number): boolean {
  return typeof x === 'number' && x !== 0;
}

if (isNotZero(x)) {
  // ...
}

nullish coalescing 演算子を使用する

JavaScript では、nullish coalescing 演算子 (??) を使用して、null または undefined の値を安全にチェックすることができます。例えば、以下のコードは、x が null または undefined ではないことを安全に確認します。

if (x ?? 0 !== 0) {
  // ...
}

삼항演산자を使用する

삼항演算子 (?:) を使用して、条件分岐を安全に記述することができます。例えば、以下のコードは、x が 0 ではないことを安全に確認します。

const result = x === 0 ? 'x は 0 です' : 'x は 0 ではありません';

console.log(result);

独自の関数を作成する

上記のいずれの方法も適切ではない場合は、独自の関数を作成して、コードの安全性を向上させることができます。例えば、以下のコードは、x が 0 ではないことを安全に確認する関数を作成します。

function isNotZero(x: number): boolean {
  // ...
}

if (isNotZero(x)) {
  // ...
}

ESLint ルール no-unsafe-negation は、コードの安全性を向上させるための有効な手段ですが、必ずしも最適な方法とは限りません。上記の代替方法を参考に、コードの状況に合わせて適切な方法を選択してください。