ネストされたコールバック関数はもう古い: max-nested-callbacks ルール徹底解説

ESLint ルール: max-nested-callbacks

max-nested-callbacks は、コード内のネストされたコールバック関数の最大数を制限する ESLint ルールです。このルールは、コードの読みやすさと保守性を向上させるために役立ちます。

設定

このルールは、オブジェクトリテラル形式で設定できます。以下のオプションが使用可能です。

• max: ネストされたコールバック関数の最大数 (デフォルト: 5)

例

// max-nested-callbacks: 2

function foo(callback) {
  callback(function() {
    // 2 levels of nesting
  });
}

上記の例では、foo 関数は 2 つのコールバック関数をネストしています。max-nested-callbacks ルールを 2 に設定すると、このコードはエラーになります。

利点

• コードの読みやすさが向上します。
• コードの保守性が向上します。
• コードのバグを見つけやすくなります。

欠点

• 複雑なロジックを実装する際に、制限が煩わしくなる場合があります。

代替案

• complexity ルール: コードの複雑さを測定します。
• max-depth ルール: コードのネストレベルを制限します。

max-nested-callbacks ルールは、コードの読みやすさと保守性を向上させるために役立ちます。ただし、複雑なロジックを実装する際は、制限が煩わしくなる場合もあります。他のルールと組み合わせて、適切な設定値を選択することが重要です。

• 上記の解説は、あくまで基本的な内容です。詳細は、上記の参考資料を参照してください。

max-nested-callbacks ルールのサンプルコード

// 1 level of nesting
function foo(callback) {
  callback();
}

// 2 levels of nesting
function bar(callback) {
  callback(function() {
    // 2 levels of nesting
  });
}

エラーとなるコード例

// 3 levels of nesting (error)
function baz(callback) {
  callback(function() {
    callback(function() {
      // 3 levels of nesting
    });
  });
}

// max-nested-callbacks: 2
function qux(callback) {
  callback(function() {
    // 2 levels of nesting
  });
}

max-nested-callbacks ルールを回避する例

// Using promises to avoid nested callbacks
function foo(callback) {
  return new Promise(function(resolve, reject) {
    callback(resolve, reject);
  });
}

// Using async/await to avoid nested callbacks
async function bar() {
  const result = await foo();
  // ...
}

max-nested-callbacks ルールを回避する他の方法

コールバック関数を分割する

ネストされたコールバック関数を分割して、個別の関数に抽出することができます。

// Original code
function foo(callback) {
  callback(function() {
    // 2 levels of nesting
  });
}

// Refactored code
function foo(callback) {
  function innerCallback() {
    // 1 level of nesting
  }
  callback(innerCallback);
}

Promise を使用する

コールバック関数の代わりに Promise を使用することができます。

// Original code
function foo(callback) {
  callback(function() {
    // 2 levels of nesting
  });
}

// Refactored code
function foo() {
  return new Promise(function(resolve, reject) {
    // 1 level of nesting
    resolve();
  });
}

async/await を使用する

Promise と async/await を組み合わせて、コールバック関数を回避することができます。

// Original code
function foo(callback) {
  callback(function() {
    // 2 levels of nesting
  });
}

// Refactored code
async function foo() {
  // 1 level of nesting
  await somethingAsync();
}

その他の方法

• ジェネレータを使用する
• 状態マシンを使用する

注意事項

上記の方法には、それぞれメリットとデメリットがあります。コードの状況に合わせて、適切な方法を選択する必要があります。