ESLintでオブジェクトリテラルをもっとスマートに！「object-shorthand」ルール活用法

ESLint の "object-shorthand" ルールは、オブジェクトリテラルの記述方法を規制するものです。具体的には、キーと値が同じ名前の場合、短縮記法を使用することを推奨します。

利点

メンテナンス性の向上
読みやすさの向上
コードの簡潔化

ルール設定

このルールには、以下のオプションがあります。

"off": ルールを無効化します。
"warn": 省略記法を使用しない場合は警告を報告します。
"error": 省略記法を使用しない場合はエラーを報告します。

詳細オプション

さらに、以下の詳細オプションも設定できます。

"avoidExplicitReturnArrows": 明示的な return アロー関数を使用する場合は省略記法を使用しないようにします。
"properties": プロパティ定義では省略記法を使用しないようにします。
"methods": メソッド定義では省略記法を使用しないようにします。
"ignoreConstructors": コンストラクタの定義では省略記法を使用しないようにします。
"avoidQuotes": キーが引用符で囲まれている場合は省略記法を使用しないようにします。

例

// 省略記法を使用しない場合
const obj1 = {
  name: 'Taro',
  age: 30
};

// 省略記法を使用する場合
const obj2 = { name: 'Taro', age: 30 };

"consistent" オプション

"consistent" オプションを使用すると、オブジェクトリテラル全体で省略記法の使用が一貫していることを確認できます。つまり、オブジェクトリテラルの一部で省略記法を使用している場合は、他の部分でも省略記法を使用する必要があります。

"consistent-as-needed" オプション

"consistent-as-needed" オプションは "consistent" オプションに似ていますが、可能な限り省略記法を使用することを優先します。つまり、キーと値が同じ名前でない場合や、詳細オプションで禁止されている場合を除いて、省略記法を使用します。

基本的な例

// 省略記法を使用しない場合
const person1 = {
  name: 'Taro',
  age: 30,
  hobby: 'programming'
};

// 省略記法を使用する場合
const person2 = { name: 'Taro', age: 30, hobby: 'programming' };

詳細オプションの例

// "avoidQuotes" オプション：キーが引用符で囲まれている場合は省略記法を使用しない
const obj1 = { 'name': 'Taro', age: 30 }; // エラー

// "ignoreConstructors" オプション：コンストラクタの定義では省略記法を使用しない
class Person {
  constructor(name, age) { // エラー
    this.name = name;
    this.age = age;
  }
}

// "methods" オプション：メソッド定義では省略記法を使用しない
const obj2 = {
  greet() { // エラー
    console.log('Hello!');
  }
};

// "properties" オプション：プロパティ定義では省略記法を使用しない
const obj3 = {
  name: 'Taro',
  age: 30 // エラー
};

// "avoidExplicitReturnArrows" オプション：明示的な return アロー関数を使用する場合は省略記法を使用しない
const obj4 = {
  square: (x) => x * x // エラー
};

"consistent" オプションの例

// "consistent" オプション：オブジェクトリテラル全体で省略記法の使用が一貫していることを確認
const obj5 = {
  name: 'Taro', // エラー
  age: 30
};

// "consistent" オプション：オブジェクトリテラル全体で省略記法を使用
const obj6 = { name: 'Taro', age: 30 };

// "consistent-as-needed" オプション：可能な限り省略記法を使用
const obj7 = {
  name: 'Taro',
  age: 30,
  hobby: 'programming' // 省略記法を使用しない
};

// "consistent-as-needed" オプション：可能な限り省略記法を使用
const obj8 = { x: 10, y: 20 };

従来の形式を使用する

最も単純な代替方法は、従来の形式を使用することです。つまり、キーと値を個別の行に記述します。

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

この方法は、コードが冗長になる可能性がありますが、常に明確で分かりやすいという利点があります。

変数を使用する

キーと値が長い場合や複雑な場合、変数を使用するとコードをより読みやすくすることができます。

const name = 'Taro';
const age = 30;

const person = {
  name,
  age
};

デストラクチャリングを使用する

ES6 以降では、デストラクチャリングを使用してオブジェクトリテラルからプロパティを抽出することができます。

const [name, age] = ['Taro', 30];

const person = {
  name,
  age
};

クラスを使用する

より複雑なオブジェクトを扱う場合は、クラスを使用するとコードをより構造化しやすくなります。

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

const person = new Person('Taro', 30);

レコードを使用する

TypeScript では、レコード型を使用してオブジェクトリテラルの型を定義することができます。レコード型は、"object-shorthand" ルールと同様に、キーと値が同じ名前である場合に省略記法を使用することができます。

const person: Record<string, unknown> = {
  name: 'Taro',
  age: 30
};

"object-shorthand" ルールは便利なツールですが、常に最適な方法とは限りません。状況に応じて、上記の代替方法を検討してください。

必要に応じてコメントを追加して、コードをよりわかりやすくする
コードの可読性とメンテナンス性を常に念頭に置いてください。
チーム内で統一されたコーディング規約を遵守することが重要です。