JavaScript における Promise とコールバックの理解

認定テストに関する主な質問と回答

1. コールバック関数とは何ですか?通常の関数との違いは何ですか?

   • コールバック関数は引数として別の関数に渡され、非同期操作を処理するために呼び出されます。通常の関数とは異なり、コールバックは特定のタスクが完了した後に実行されるように設計されています。

2. コールバックと比較して、Promise はどのようにコードの可読性を向上させ、非同期操作を管理しますか?

   • Promise により、チェーン化とエラー処理の改善が可能になり、コードがより読みやすく保守しやすくなります。これらは、「コールバック地獄」として知られる深くネストされた構造を回避するのに役立ちます。

3. Promise の主な状態は何ですか?また、これらの状態の間はどのように遷移しますか?

   • 主な状態は、保留中 (初期状態)、履行済み (操作が正常に完了した)、および拒否済み (操作が失敗した) です。 Promise は保留中から履行または拒否に移行します。

4. Promises を使用してエラーを処理するにはどうすればよいですか?また、コールバックによるエラー処理と比較するとどうなりますか?

   • Promis は合理的な方法でエラーを処理するための catch メソッドを提供しますが、コールバックによるエラー処理では、多くの場合、エラー オブジェクトを渡したり、ネストされたコールバックで複数のチェックを行う必要があります。

5. Promise.all と Promise.race の違いは何ですか?それぞれをいつ使用しますか?

   • Promise.all は、すべての入力 Promise が解決されると解決されるため、複数の非同期操作が完了するのを待つのに役立ちます。 Promise.race は、入力 Promise の 1 つが解決されるとすぐに解決されます。これは、最初に完了した操作の結果が必要なシナリオに役立ちます。

6. async/await 構文は Promise の操作をどのように簡素化しますか?また、await を使用するためのルールは何ですか?

   • async/await 構文を使用すると、非同期コードを同期的に記述できるため、読みやすさが向上します。 await は非同期関数内でのみ使用でき、Promise が解決されるまで実行を一時停止します。

導入

進化する JavaScript の状況では、非同期操作を効率的に管理することが、パフォーマンスの高い Web アプリケーションを構築するための鍵となります。コールバックが元のアプローチでしたが、Promise では、非同期タスクを処理するためのより構造化された読みやすい方法が導入されました。このブログでは、Promise とコールバックの使用の複雑さを詳しく掘り下げます。ただし、これらの概念についてすでに基礎を理解していることを前提としています。

コールバックに対する Promise の利点

可読性と保守性の向上

コールバックは機能しますが、多くの場合、「コールバック地獄」として知られる深く入れ子になった構造になり、コードの読み取りと保守が困難になります。

コールバック地獄の例:

fetchData(function(response1) {
  fetchMoreData(response1, function(response2) {
    fetchEvenMoreData(response2, function(response3) {
      console.log(response3);
    });
  });
});

Promise による改善:

fetchData()
  .then(response1 => fetchMoreData(response1))
  .then(response2 => fetchEvenMoreData(response2))
  .then(response3 => console.log(response3))
  .catch(error => console.error(error));

エラー処理

コールバックを使用すると、エラー オブジェクトを渡して各レベルで処理する必要があるため、エラー処理が煩雑になる可能性があります。

コールバックを使用したエラー処理:

function fetchData(callback) {
  setTimeout(() => {
    if (/* error condition */) {
      callback(new Error('An error occurred'), null);
    } else {
      callback(null, 'data');
    }
  }, 1000);
}

fetchData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

Promise によるエラー処理:

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (/* error condition */) {
        reject(new Error('An error occurred'));
      } else {
        resolve('data');
      }
    }, 1000);
  });
}

fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

高度な Promise メソッド

Promise.all

Promise.all は、続行する前に複数の非同期操作が完了するまで待つ必要がある場合に便利です。

例：

const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 42, "foo"]
});

プロミスレース

Promise.race は、最速の操作の結果が必要な場合に役立ちます。

例：

const promise1 = new Promise((resolve, reject) => {
  setTimeout(resolve, 500, 'one');
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'two');
});

Promise.race([promise1, promise2]).then(value => {
  console.log(value); // "two"
});

async/await を使用して非同期コードを簡素化する

async/await 構文を使用すると、同期しているように見える非同期コードを作成できるため、可読性が向上し、Promise の連鎖の複雑さが軽減されます。

例：

async function fetchData() {
  return 'data';
}

async function processData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

processData();

結論

コールバックは JavaScript で非同期操作を処理するための基礎を築きましたが、Promise は非同期コードの可読性、保守性、およびエラー処理機能を大幅に向上させました。これらのツールをいつ、どのように効果的に使用するかを理解することは、最新の JavaScript 開発にとって重要です。 Promises と async/await 構文を使用すると、開発者はよりクリーンで管理しやすいコードを作成でき、より堅牢なアプリケーションへの道が開かれます。