ESLint ルール「no-multi-assign」：初心者でも安心！分かりやすい解説

ESLintのルール「no-multi-assign」は、変数に複数回代入することを制限するルールです。これは、コードの読みやすさや意図の明確さを向上させるために役立ちます。

問題点

変数に複数回代入すると、コードの意味が分かりにくくなります。例えば、以下のコード:

let x = 1;
x = 2;
x = 3;

このコードは、x に 3 が代入されているように見えますが、実際には x は 1 から 3 まで全て代入されています。

ルール設定

このルールはデフォルトでは有効になっています。無効にする場合は、.eslintrc.js ファイルに以下のように記述します。

module.exports = {
  "rules": {
    "no-multi-assign": "off"
  }
};

例外

以下の場合、このルールは警告を発しません。

• 変数が異なる型に代入される場合
• 変数がループ内で代入される場合
• 変数が条件分岐内で代入される場合

例

以下のコードは、no-multi-assign ルールに違反しています。

let x = 1;
x = 2; // エラー

let y;
y = 1;
y = 2; // 警告なし

for (let i = 0; i < 10; i++) {
  x = i; // 警告なし
}

if (x > 0) {
  x = 1;
} else {
  x = 2;
} // 警告なし

代替案

変数に複数回代入したい場合は、以下の方法を使用できます。

• 別の変数を使用する
• オブジェクトを使用する
• 配列を使用する

// 別の変数を使用する
let x = 1;
let y = 2;

// オブジェクトを使用する
let person = {
  name: "John Doe",
  age: 30
};

// 配列を使用する
let numbers = [1, 2, 3];

ESLintのルール「no-multi-assign」は、コードの読みやすさや意図の明確さを向上させるために役立ちます。デフォルトでは有効になっているので、特に理由がない限り変更する必要はありません。

ESLint ルール「no-multi-assign」のサンプルコード

違反例

// 変数に複数回代入する
let x = 1;
x = 2; // エラー

// 異なる型に代入する
let y = 1;
y = "foo"; // エラー

// ループ内で代入する
for (let i = 0; i < 10; i++) {
  x = i; // エラー
}

// 条件分岐内で代入する
if (x > 0) {
  x = 1; // エラー
} else {
  x = 2; // エラー
}

代替案

// 別の変数を使用する
let x = 1;
let y = 2;

// オブジェクトを使用する
let person = {
  name: "John Doe",
  age: 30
};

// 配列を使用する
let numbers = [1, 2, 3];

// 変数を再宣言する
let x = 1;
x = 2; // エラー

// スコープを変えて代入する
function foo() {
  let x = 1;
  x = 2; // エラー
}

// デストラクチャリングを使用する
let [x, y] = [1, 2];
x = 3; // エラー
y = 4; // エラー

• ルールを無効にする

module.exports = {
  "rules": {
    "no-multi-assign": "off"
  }
};

• オプションを設定する

module.exports = {
  "rules": {
    "no-multi-assign": {
      "ignoreNonDeclaration": true
    }
  }
};

ESLint ルール「no-multi-assign」の代替方法

別の変数を使用する

変数に複数回代入したい場合は、別の変数を使用することができます。

// 変数に複数回代入する
let x = 1;
x = 2; // エラー

// 別の変数を使用する
let x = 1;
let y = 2;

オブジェクトを使用する

複数の値を関連付ける場合は、オブジェクトを使用することができます。

// オブジェクトを使用する
let person = {
  name: "John Doe",
  age: 30
};

配列を使用する

複数の値を順序付きで格納したい場合は、配列を使用することができます。

// 配列を使用する
let numbers = [1, 2, 3];

変数を再宣言すると、以前の値は破棄されます。

// 変数を再宣言する
let x = 1;
x = 2; // エラー

let x = 2; // 問題なし

スコープを変えて代入することで、異なる値を代入することができます。

// スコープを変えて代入する
function foo() {
  let x = 1;
  x = 2; // エラー
}

let x = 2; // 問題なし

デストラクチャリングを使用すると、複数の値を個別の変数に代入することができます。

// デストラクチャリングを使用する
let [x, y] = [1, 2];
x = 3; // エラー
y = 4; // エラー

let [x, y] = [3, 4]; // 問題なし

module.exports = {
  "rules": {
    "no-multi-assign": "off"
  }
};

module.exports = {
  "rules": {
    "no-multi-assign": {
      "ignoreNonDeclaration": true
    }
  }
};

上記以外にも、状況に応じて様々な方法があります。どの方法を使用するかは、コードの読みやすさや意図の明確さを考慮して決定する必要があります。