はじめに

JavaScript では、API 通信やデータベースアクセスなどの時間がかかる処理をスムーズに実行するために 非同期処理 が重要になります。

本記事では、Promise、.then()/.catch()、async/await、try/catch など、JavaScript の非同期処理の仕組みを整理し、それぞれの使い方を分かりやすく解説します。

✅ この記事で学べること

• Promise の基本構造と resolve/reject
• .then() / .catch() の使い方
• async/await と try/catch の仕組み
• Promise.all() を使った並列処理

1. Promise（プロミス）とは？

Promise（プロミス） は非同期処理の結果を表すオブジェクトで、3 つの状態 を持ちます。

1.1 Promise の作成

Promise は resolve（成功）と reject（失敗）の 2 つの関数を引数に取ります。

JAVASCRIPT
const myPromise = new Promise((resolve, reject) => {
  let success = true;

  setTimeout(() => {
    if (success) {
      resolve("成功しました！"); // fulfilled 状態
    } else {
      reject("エラーが発生しました！"); // rejected 状態
    }
  }, 2000);
});

• ✅ resolve(value) → 成功時の処理
• ✅ reject(error) → 失敗時の処理
• ✅ 非同期処理（API 通信など）をラップできる

2. .then() と .catch() の使い方

Promise の結果を受け取るには .then() と .catch() を使います。

JAVASCRIPT
myPromise
  .then((result) => {
    console.log(result); // "成功しました！"
  })
  .catch((error) => {
    console.error(error); // "エラーが発生しました！"
  });

• ✅ .then(result => { ... }) → resolve() の結果を取得
• ✅ .catch(error => { ... }) → reject() のエラー処理

3. async/await の基本

async/await は Promise をより直感的に書ける構文です。

JAVASCRIPT
async function fetchData() {
  try {
    const result = await myPromise;
    console.log(result); // "成功しました！"
  } catch (error) {
    console.error(error); // "エラーが発生しました！"
  }
}

fetchData();

• ✅ await → Promise の完了を待つ
• ✅ async → 関数を非同期化
• ✅ try/catch → エラーハンドリングが簡単

4. .then() / .catch() と async/await の比較

✅ 結論: async/await の方が可読性が高く、エラーハンドリングも統一できる

5. Promise.all() を使った並列処理

複数の非同期処理を並列実行する場合は Promise.all() を使います。

JAVASCRIPT
async function fetchMultipleData() {
  try {
    const [data1, data2] = await Promise.all([
      fetch("https://api.example.com/data1").then((res) => res.json()),
      fetch("https://api.example.com/data2").then((res) => res.json()),
    ]);

    console.log("Data1:", data1);
    console.log("Data2:", data2);
  } catch (error) {
    console.error("エラー:", error);
  }
}

fetchMultipleData();

✅ 複数の API を並列処理して高速化

6. まとめ

今回は JavaScript の非同期処理 について、Promise と async/await の違いを整理しました。

✅ 学んだこと

• Promise は resolve（成功）と reject（失敗）の 2 つの関数を引数に取る
• .then() / .catch() で Promise を処理できる
• async/await は 可読性が向上し、直感的な記述が可能
• try/catch で エラーハンドリングが簡単
• Promise.all() で 並列処理を最適化できる