ESLint の "no-object-constructor" ルールについて

no-object-constructor ルールは、JavaScript において空のオブジェクトを作成する場合、オブジェクトリテラル の使用を推奨し、Object コンストラクタ の使用を禁止する ESLint ルールです。

なぜこのルールが存在するのか？

オブジェクトリテラルは、Object コンストラクタよりも以下の利点があります。

簡潔性: オブジェクトリテラルは、より簡潔で読みやすいコードになります。
明瞭性: オブジェクトリテラルは、オブジェクトのプロパティとその値を明確に示します。
再定義の防止: Object コンストラクタはグローバル変数であるため、再定義される可能性があります。オブジェクトリテラルはローカルスコープで定義されるため、この問題はありません。

例外

以下の場合は、Object コンストラクタの使用が許可されています。

オブジェクトを数値に変換する場合: Object(value) + 1
オブジェクトのプロトタイプチェーンを操作する場合: Object.setPrototypeOf(obj, prototype)
ポリフィルのために Object コンストラクタが必要な場合

このルールを有効にする方法

.eslintrc ファイルに以下の設定を追加することで、このルールを有効にすることができます。

{
  "rules": {
    "no-object-constructor": "error"
  }
}

例

以下は、no-object-constructor ルールに違反するコードです。

const obj = new Object(); //  禁止されています

const obj = {}; //  推奨されています

Object コンストラクタの使用例

const object1 = new Object();
const object2 = new Object();

console.log(object1); // {}
console.log(object2); // {}

このコードでは、new Object() を使用して 2 つの空のオブジェクト object1 と object2 が作成されています。

オブジェクトリテラルの使用例

以下のコードは、オブジェクトリテラルを使用して空のオブジェクトを作成する方法を示しています。

const object3 = {};
const object4 = {};

console.log(object3); // {}
console.log(object4); // {}

このコードでは、空のオブジェクト object3 と object4 が {} を使用して作成されています。

const value = 1;
const object5 = Object(value) + 1; // オブジェクトを数値に変換
console.log(object5); // 2

const prototype = {};
const object6 = Object.setPrototypeOf({}, prototype); // オブジェクトのプロトタイプチェーンを操作
console.log(object6); // {}

function SomeClass() {}
const object7 = new SomeClass(); // ポリフィルのために Object コンストラクタが必要
console.log(object7 instanceof SomeClass); // true

このコード例では、

Object(value) + 1 は、数値 value をオブジェクトに変換し、それに 1 を加算します。
Object.setPrototypeOf({}, prototype) は、空のオブジェクトに prototype をプロトタイプチェーンとして設定します。
new SomeClass() は、SomeClass クラスの新しいインスタンスを作成します。

"no-object-constructor" ルールの代替方法

このルールに準拠するには、オブジェクトリテラルを常に使用する必要があります。しかし、状況によっては、オブジェクトリテラルを使用することが難しい、または非推奨となる場合があります。

そのような場合は、以下の代替方法を検討することができます。

ファクトリー関数を使用する

ファクトリー関数は、オブジェクトを作成するための関数です。オブジェクトリテラルよりも複雑になりますが、より柔軟で再利用可能なコードを作成することができます。

function createObject(name, age) {
  return {
    name: name,
    age: age
  };
}

const person = createObject('John Doe', 30);
console.log(person); // { name: 'John Doe', age: 30 }

クラスを使用する

クラスは、オブジェクトのテンプレートとして使用することができます。オブジェクトリテラルよりも冗長になりますが、より強力で型安全なコードを作成することができます。

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
}

const person = new Person('John Doe', 30);
console.log(person); // Person { name: 'John Doe', age: 30 }

オブジェクトスプレッド構文を使用する

オブジェクトスプレッド構文は、既存のオブジェクトのプロパティを新しいオブジェクトにコピーするために使用することができます。オブジェクトリテラルよりも簡潔で、既存のオブジェクトを基に新しいオブジェクトを作成する場合に役立ちます。

const person = {
  name: 'John Doe',
  age: 30
};

const newPerson = {
  ...person,
  occupation: 'Software Engineer'
};

console.log(newPerson); // { name: 'John Doe', age: 30, occupation: 'Software Engineer' }

ES2020 のレコード構文を使用する

レコード構文は、ES2020 で導入された新しい構文で、簡潔で読みやすいオブジェクトを作成することができます。オブジェクトリテラルよりも新しく、まだ広く普及していないという点に注意が必要です。

const person = {
  name: 'John Doe',
  age: 30
};

console.log(person); // { name: 'John Doe', age: 30 }

注意点

これらの代替方法は、すべて状況によって適切な場合があります。どの方法を選択するかは、コードの複雑さ、可読性、保守性などを考慮する必要があります。

no-object-constructor ルールを無効にすることもできますが、コードの簡潔性と可読性を向上させるため、このルールを遵守することを一般的に推奨します。

no-object-constructor ルールには、オブジェクトリテラルの使用を推奨し、Object コンストラクタの使用を禁止するという利点があります。

しかし、状況によっては、オブジェクトリテラルを使用することが難しい、または非推奨となる場合があります。そのような場合は、上記の代替方法を検討することができます。