【JavaScript】Promiseとasync/awaitの違いと使い分け

非同期処理を扱うJavaScriptでは、Promiseとasync/awaitが代表的な書き方として使われています。どちらも非同期処理を分かりやすく記述できますが、適した場面や使い方には違いがあります。ここでは両者の基本と違い、使い分けのポイントを整理します。

Promiseの基本

Promiseは「非同期処理の結果を表すオブジェクト」です。処理が成功したときはresolve、失敗したときはrejectが呼ばれ、thenとcatchで結果を受け取ります。

// Promiseを使った非同期処理
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve("データ取得成功");
      } else {
        reject("エラーが発生しました");
      }
    }, 1000);
  });
}

fetchData()
  .then(result => {
    console.log(result);
  })
  .catch(error => {
    console.error(error);
  });

async/awaitの基本

async/awaitはPromiseをより同期処理のように書ける構文です。関数にasyncを付けると、その関数は常にPromiseを返し、中でawaitを使うとPromiseの結果を待機できます。

// async/awaitを使った非同期処理
async function fetchDataAsync() {
  try {
    const result = await fetchData(); // Promiseを返す関数を待つ
    console.log(result);
  } catch (error) {
    console.error(error);
  }
}

fetchDataAsync();

Promiseとasync/awaitの違い

使い分けのポイント

– 短い非同期処理や簡単な処理結果の受け渡しにはPromiseチェーンでも十分
– 複数の非同期処理を順番に実行する場合やエラーハンドリングを分かりやすくしたい場合はasync/awaitが有効
– 並列処理が必要な場合はPromise.allを使い、async/awaitと組み合わせて使うと効率的

複数の非同期処理を扱う例

// Promise.allで並列処理
async function fetchAll() {
  try {
    const [a, b] = await Promise.all([fetchData(), fetchData()]);
    console.log(a, b);
  } catch (error) {
    console.error(error);
  }
}
fetchAll();

まとめ

Promiseとasync/awaitはいずれも非同期処理を管理する仕組みですが、async/awaitを使うとコードが読みやすく、エラーハンドリングも自然に書けます。一方、Promiseチェーンは短い処理や並列処理で有効です。両者を適切に使い分けて、状況に応じた可読性と効率を確保することが大切です。