ESLint の "Rules" における "no-empty" ルールとは？

空のブロック とは、{} で囲まれたブロック内に何も記述されていない状態を指します。一方、空の関数 とは、function キーワードで定義された関数内に何も記述されていない状態を指します。

no-empty ルールが有効な場合、以下のコードはエラーとなります。

// 空のブロック
if (true) {
  // 何も記述されていない
}

// 空の関数
function emptyFunction() {
  // 何も記述されていない
}

no-empty ルールを無効化するには、以下の設定を追加します。

// .eslintrc.json ファイル
{
  "rules": {
    "no-empty": "off"
  }
}

no-empty ルールには、以下のオプションが用意されています。

"allowEmptyCatch": true：catch ブロックが空であってもエラーを出さないようにします。
"allowEmptySwitchCase": true：switch 文の case ラベルが空であってもエラーを出さないようにします。
"allowEmptyBlocks": true：コメントを含む空のブロックを許可します。

no-empty ルールの利点

コードの読みやすさが向上します。
意図しないコードの混入を防ぎます。
コードの保守性が向上します。

意図的に空のブロックや空の関数を使用する場合には、コメントで説明を追加する必要があります。
一部のライブラリやフレームワークでは、空のブロックや空の関数を必要とする場合があります。

意図的に空のブロックを使用する例

function initialize() {
  // ここで初期化処理を実行する
  // ...

  // 初期化処理が成功したら、フラグを立てる
  if (initializationSuccessful) {
    isInitialized = true;
  } else {
    // 初期化処理が失敗したら、エラーメッセージを出力する
    console.error('Initialization failed');
  }
}

// ブロック内にコメントを追加することで、意図的に空であることを示す
if (!isInitialized) {
  // 初期化されていない場合は、処理を実行しない
  // ...
}

この例では、initialize 関数は意図的に空のブロック (// 初期化処理が成功したら、フラグを立てる) を含んでいます。コメントを追加することで、このブロックが意図的に空であることを示しています。

function createLoadingIndicator() {
  const loadingIndicator = document.createElement('div');
  loadingIndicator.classList.add('loading-indicator');

  // 非同期処理中に表示するローディングインジケータを作成する
  // ...

  return loadingIndicator;
}

function showLoadingIndicator() {
  const loadingIndicator = createLoadingIndicator();
  document.body.appendChild(loadingIndicator);
}

function hideLoadingIndicator() {
  const loadingIndicator = document.querySelector('.loading-indicator');
  if (loadingIndicator) {
    document.body.removeChild(loadingIndicator);
  }
}

説明:

この例では、showLoadingIndicator 関数は意図的に空の関数になっています。この関数は、非同期処理中にローディングインジケータを表示するために使用される予定ですが、まだ実装されていません。

"no-empty" ルールによってエラーとなるコード

function doSomething() {
  // 何も記述されていない
}

if (true) {
  // 何も記述されていない
}

switch (condition) {
  case 1:
    // 何も記述されていない
    break;
  case 2:
    // 何も記述されていない
    break;
}

"no-empty" ルールの代替方法

no-empty ルールの代替方法として、以下の方法が考えられます。

特定のブロックや関数を除外する

no-empty ルールには、オプションを使用して特定のブロックや関数を除外することができます。例えば、以下の設定を追加することで、catch ブロックと switch 文の case ラベルを空にしてもエラーを出さなくなります。

// .eslintrc.json ファイル
{
  "rules": {
    "no-empty": [
      "error",
      {
        "allowEmptyCatch": true,
        "allowEmptySwitchCase": true
      }
    ]
  }
}

コメントを追加する

空のブロックや空の関数を使用する場合には、コメントでその意図を説明することができます。コメントを追加することで、コードを読んだ人が意図を理解しやすくなります。

function doNothing() {
  // 何も処理を実行しない関数
}

if (condition) {
  // 特定の条件を満たさない場合は、処理を実行しない
}

別のルールを使用する

no-empty ルール以外にも、コードの読みやすさや保守性を向上させるために役立つ ESLint ルールは多数存在します。例えば、以下のルールを検討することができます。

no-unused-vars: 使用されていない変数を禁止するルール
no-unreachable: 到達不能なコードを禁止するルール
no-shadow: 同じ名前の変数を異なるスコープで定義することを禁止するルール