【JavaScript】Promiseとasync/awaitの使い方｜非同期処理の基本から実務パターンまで

この記事で学べること

• コールバック地獄の問題点とPromiseによる解決
• Promiseの3つの状態（pending / fulfilled / rejected）
• async/awaitによる直感的な非同期処理の書き方
• Promise.all / allSettled / race / any の使い分け
• fetch・リトライ・タイムアウトなど実務パターン集
• よくあるミスと注意点

// コールバック関数を使った非同期処理の例
function fetchUserData(userId, callback) {
  setTimeout(() => {
    const user = { id: userId, name: '田中太郎' };
    callback(user);
  }, 1000);
}

// 使用例
fetchUserData(1, (user) => {
  console.log(user.name); // 田中太郎
});

// ユーザー取得 → 注文取得 → 商品取得 → 在庫確認
getUser(userId, (user) => {
  getOrders(user.id, (orders) => {
    getProduct(orders[0].productId, (product) => {
      checkStock(product.id, (stock) => {
        console.log('在庫数:', stock);
        // さらにネストが続く...
      });
    });
  });
});

コールバック地獄の問題点：

• ネストが深くなり、コードの可読性が著しく低下する
• エラーハンドリングが複雑になる（各コールバックで個別に処理が必要）
• 処理の流れを追いにくく、デバッグが困難
• コードの再利用性が低い

ポイント：Promiseの状態は pending → fulfilled または pending → rejected のどちらか一方向にしか変化しません。一度 fulfilled や rejected になったら、もう変わることはありません。これを不変（immutable）と呼びます。

const promise = new Promise((resolve, reject) => {
  // 非同期処理を実行
  const success = true;

  if (success) {
    resolve('処理が成功しました'); // fulfilled 状態にする
  } else {
    reject(new Error('処理が失敗しました')); // rejected 状態にする
  }
});

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, title: 'JavaScript入門' };
      resolve(data);
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log('成功:', data.title);
    return data.id; // 次のthenに渡せる
  })
  .then((id) => {
    console.log('ID:', id);
  })
  .catch((error) => {
    console.error('エラー:', error.message);
  })
  .finally(() => {
    console.log('処理完了');
  });

成功: JavaScript入門
ID: 1
処理完了

// Promiseチェーンでフラットに書ける
getUser(userId)
  .then((user) => getOrders(user.id))
  .then((orders) => getProduct(orders[0].productId))
  .then((product) => checkStock(product.id))
  .then((stock) => {
    console.log('在庫数:', stock);
  })
  .catch((error) => {
    console.error('エラー:', error);
  });

Promiseチェーンのメリット：ネストが1段で済み、エラーハンドリングも末尾の catch() 1つでまとめて行えます。どこでエラーが発生しても catch に集約されるため、コードの見通しが格段に良くなります。

// 即座に fulfilled になるPromise
const resolved = Promise.resolve('成功値');
resolved.then((v) => console.log(v)); // '成功値'

// 即座に rejected になるPromise
const rejected = Promise.reject(new Error('失敗'));
rejected.catch((e) => console.error(e.message)); // '失敗'

// テストやキャッシュで便利
function getData(useCache) {
  if (useCache && cache) {
    return Promise.resolve(cache); // キャッシュがあれば即返す
  }
  return fetch('/api/data').then((r) => r.json());
}

// 関数宣言
async function fetchData() {
  return 'データ';
}

// 関数式
const fetchData = async function() {
  return 'データ';
};

// アロー関数
const fetchData = async () => {
  return 'データ';
};

// async関数は常にPromiseを返す
fetchData().then((result) => {
  console.log(result); // 'データ'
});

// メソッドにも使える
class Api {
  async getUser(id) {
    const res = await fetch(`/api/users/${id}`);
    return res.json();
  }
}

async function main() {
  console.log('開始');

  // Promiseが解決されるまで待つ
  const result = await fetchData();
  console.log('結果:', result);

  // 前の処理が終わってから次が実行される
  const result2 = await fetchMore(result);
  console.log('結果2:', result2);

  console.log('完了');
}

main();

async function checkProductStock(userId) {
  const user = await getUser(userId);
  const orders = await getOrders(user.id);
  const product = await getProduct(orders[0].productId);
  const stock = await checkStock(product.id);
  console.log('在庫数:', stock);
}

読みやすさの比較：コールバック地獄 → Promiseチェーン → async/await と進むにつれ、コードが「上から下に順番に読める」自然な構造になっていることがわかります。

async function fetchUserData() {
  try {
    const response = await fetch('/api/user');

    // レスポンスのステータスチェック
    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }

    const data = await response.json();
    console.log('ユーザー:', data);
    return data;

  } catch (error) {
    // ネットワークエラー、HTTPエラー、JSONパースエラーなど
    console.error('データ取得に失敗:', error.message);
    return null;

  } finally {
    console.log('通信処理完了');
  }
}

// ESモジュール（.mjs または type="module"）で使用可能

// async関数で囲まなくてOK
const response = await fetch('/api/config');
const config = await response.json();

console.log(config);

// 動的インポートとの組み合わせ
const module = await import('./utils.js');
module.doSomething();

注意：トップレベルawaitはESモジュール（<script type="module"> や .mjs ファイル）でのみ使用可能です。通常のスクリプト（<script>タグ）やCommonJS（require）では使えません。

結論：async/awaitはPromiseの上に構築された構文なので、どちらか一方だけを学べばいいというものではありません。Promiseの仕組みを理解した上でasync/awaitを使うのがベストプラクティスです。

// Promise版: ユーザー情報を取得して表示
function displayUser(userId) {
  return fetch(`/api/users/${userId}`)
    .then((response) => {
      if (!response.ok) throw new Error('取得失敗');
      return response.json();
    })
    .then((user) => {
      console.log(`名前: ${user.name}`);
      return user;
    })
    .catch((error) => {
      console.error('エラー:', error.message);
    });
}

// async/await版: 同じ処理をより読みやすく
async function displayUser(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    if (!response.ok) throw new Error('取得失敗');

    const user = await response.json();
    console.log(`名前: ${user.name}`);
    return user;

  } catch (error) {
    console.error('エラー:', error.message);
  }
}

// 3つのAPIを同時に呼び出す
async function fetchDashboardData() {
  try {
    const [user, posts, notifications] = await Promise.all([
      fetch('/api/user').then((r) => r.json()),
      fetch('/api/posts').then((r) => r.json()),
      fetch('/api/notifications').then((r) => r.json()),
    ]);

    console.log(user, posts, notifications);
  } catch (error) {
    // 1つでも失敗するとここに来る
    console.error('いずれかの取得に失敗:', error);
  }
}

パフォーマンスのメリット：3つのAPIリクエストを直列で実行すると合計3秒かかる処理が、Promise.allで並列実行すると最も遅い1つ分（約1秒）で完了します。独立した複数のリクエストは積極的にPromise.allを使いましょう。

const results = await Promise.allSettled([
  fetch('/api/user').then((r) => r.json()),
  fetch('/api/invalid-endpoint'),  // これが失敗しても…
  fetch('/api/posts').then((r) => r.json()),
]);

// 各結果を個別にチェック
results.forEach((result, index) => {
  if (result.status === 'fulfilled') {
    console.log(`#${index} 成功:`, result.value);
  } else {
    console.error(`#${index} 失敗:`, result.reason);
  }
});

#0 成功: { id: 1, name: "田中太郎" }
#1 失敗: TypeError: Failed to fetch
#2 成功: [{ id: 1, title: "記事1" }]

// タイムアウト処理の実装例
function timeout(ms) {
  return new Promise((_, reject) => {
    setTimeout(() => reject(new Error('タイムアウト')), ms);
  });
}

try {
  const result = await Promise.race([
    fetch('/api/data').then((r) => r.json()),
    timeout(5000), // 5秒でタイムアウト
  ]);
  console.log('データ取得成功:', result);
} catch (error) {
  console.error(error.message); // 'タイムアウト'
}

// 複数のCDNから最も速いものを使う
async function fetchFromFastestCDN() {
  try {
    const data = await Promise.any([
      fetch('https://cdn1.example.com/data.json').then((r) => r.json()),
      fetch('https://cdn2.example.com/data.json').then((r) => r.json()),
      fetch('https://cdn3.example.com/data.json').then((r) => r.json()),
    ]);
    console.log('最速のCDNから取得:', data);
  } catch (error) {
    // すべて失敗した場合のみ AggregateError
    console.error('全CDNで失敗:', error.errors);
  }
}

async function getUsers() {
  const response = await fetch('https://jsonplaceholder.typicode.com/users');

  if (!response.ok) {
    throw new Error(`HTTPエラー: ${response.status}`);
  }

  const users = await response.json();
  return users;
}

async function createUser(userData) {
  const response = await fetch('https://jsonplaceholder.typicode.com/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify(userData),
  });

  if (!response.ok) {
    throw new Error(`HTTPエラー: ${response.status}`);
  }

  return await response.json();
}

// 使用例
const newUser = await createUser({
  name: '田中太郎',
  email: 'tanaka@example.com',
});

注意：fetch() はネットワークエラー（サーバーに到達できない場合）でのみrejectされます。404や500などのHTTPエラーではrejectされないため、response.ok を必ずチェックしましょう。

async function getUserWithPosts(userId) {
  // 1. ユーザー情報を取得
  const userRes = await fetch(`/api/users/${userId}`);
  const user = await userRes.json();

  // 2. そのユーザーの投稿を取得（前の結果を使う）
  const postsRes = await fetch(`/api/users/${user.id}/posts`);
  const posts = await postsRes.json();

  // 3. 各投稿のコメント数を並列で取得
  const postsWithComments = await Promise.all(
    posts.map(async (post) => {
      const commentsRes = await fetch(`/api/posts/${post.id}/comments`);
      const comments = await commentsRes.json();
      return { ...post, commentCount: comments.length };
    })
  );

  return { ...user, posts: postsWithComments };
}

直列と並列の組み合わせ：上の例では、ユーザー取得→投稿取得は直列（前の結果が必要）、各投稿のコメント取得はPromise.allで並列（独立している）にしています。依存関係に応じて使い分けるのが実務のコツです。

async function fetchWithRetry(url, options = {}, maxRetries = 3) {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      const response = await fetch(url, options);

      if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
      }

      return await response.json();

    } catch (error) {
      console.warn(`試行 ${attempt}/${maxRetries} 失敗:`, error.message);

      if (attempt === maxRetries) {
        throw new Error(
          `${maxRetries}回の再試行後も失敗: ${error.message}`
        );
      }

      // 指数バックオフ（1秒→2秒→4秒...）
      const delay = 1000 * 2 ** (attempt - 1);
      console.log(`${delay}ms後にリトライ...`);
      await new Promise((r) => setTimeout(r, delay));
    }
  }
}

// 使用例
const data = await fetchWithRetry('/api/unstable-endpoint', {}, 3);

指数バックオフとは：リトライ間隔を1秒→2秒→4秒のように指数的に増やす手法です。サーバーに過度な負荷をかけないための一般的なプラクティスです。

async function fetchWithTimeout(url, timeoutMs = 5000) {
  const controller = new AbortController();

  // 指定時間後にリクエストを中断
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, timeoutMs);

  try {
    const response = await fetch(url, {
      signal: controller.signal,
    });
    return await response.json();

  } catch (error) {
    if (error.name === 'AbortError') {
      throw new Error(`リクエストが${timeoutMs}msでタイムアウトしました`);
    }
    throw error;

  } finally {
    clearTimeout(timeoutId);
  }
}

// 使用例
try {
  const data = await fetchWithTimeout('/api/slow-endpoint', 3000);
  console.log(data);
} catch (error) {
  console.error(error.message);
}

async function loadData() {
  const loadingEl = document.getElementById('loading');
  const contentEl = document.getElementById('content');
  const errorEl = document.getElementById('error');

  loadingEl.style.display = 'block';
  contentEl.style.display = 'none';
  errorEl.style.display = 'none';

  try {
    const data = await fetchWithRetry('/api/data');
    contentEl.textContent = JSON.stringify(data, null, 2);
    contentEl.style.display = 'block';

  } catch (error) {
    errorEl.textContent = error.message;
    errorEl.style.display = 'block';

  } finally {
    // 成功でも失敗でもローディングを非表示にする
    loadingEl.style.display = 'none';
  }
}

finallyの活用：finally ブロックは成功時も失敗時も必ず実行されるため、ローディング表示の解除に最適です。これを忘れると、エラー時にローディングが表示され続けるバグになります。

async function example() {
  // NG: awaitを付け忘れている
  const data = fetch('/api/data');
  console.log(data); // Promise {<pending>} ← 値ではなくPromiseオブジェクト

  // OK: awaitを付ける
  const response = await fetch('/api/data');
  const data2 = await response.json();
  console.log(data2); // 実際のデータ
}

const userIds = [1, 2, 3, 4, 5];

// NG: 直列実行（5秒かかる）
const users = [];
for (const id of userIds) {
  const user = await getUser(id); // 1つずつ順番に実行される
  users.push(user);
}

// OK: 並列実行（1秒で完了）
const users2 = await Promise.all(
  userIds.map((id) => getUser(id))
);

注意：ただし、前の結果を次のリクエストで使う場合は直列実行が正しい選択です。独立した処理にのみPromise.allを使いましょう。また、大量の並列リクエストはサーバーに負荷をかけるため、必要に応じて並列数を制限する仕組みも検討してください。

// NG: エラーを握りつぶしている
async function badExample() {
  try {
    const data = await fetch('/api/data');
  } catch (e) {
    // 何もしない → バグの原因が見つからなくなる
  }
}

// OK: 最低限ログを出す
async function goodExample() {
  try {
    const data = await fetch('/api/data');
  } catch (error) {
    console.error('APIリクエスト失敗:', error);
    // 必要に応じてリスロー、UIへの通知、フォールバック値の返却など
  }
}

// NG: Promiseのcatchなし → UnhandledPromiseRejection
fetch('/api/data').then((r) => r.json());
// ↑ エラー時に UnhandledPromiseRejection が発生

// OK: 必ずcatchを付ける
fetch('/api/data')
  .then((r) => r.json())
  .catch((error) => console.error(error));

async function getData() {
  return 'Hello'; // 自動的に Promise.resolve('Hello') になる
}

// NG: async関数の結果を直接使おうとする
const result = getData();
console.log(result); // Promise {<fulfilled>: 'Hello'}

// OK: awaitで結果を取り出す
const result2 = await getData();
console.log(result2); // 'Hello'

// OK: thenで結果を取り出す
getData().then((result3) => {
  console.log(result3); // 'Hello'
});

const urls = ['/api/a', '/api/b', '/api/c'];

// NG: forEachはawaitの完了を待たない
urls.forEach(async (url) => {
  const data = await fetch(url);
  console.log(data);
});
console.log('完了'); // fetchより先に実行される！

// OK: for...of を使う（直列）
for (const url of urls) {
  const data = await fetch(url);
  console.log(data);
}
console.log('完了'); // 全fetchの後に実行される

// OK: Promise.all + map を使う（並列）
await Promise.all(urls.map(async (url) => {
  const data = await fetch(url);
  console.log(data);
}));
console.log('完了'); // 全fetchの後に実行される

基本方針：迷ったらasync/awaitを使いましょう。可読性が高く、エラーハンドリングも直感的です。並列処理が必要な場面でのみ Promise.all を組み合わせ、短い処理には .then() を使う——これが現在のベストプラクティスです。

この記事のまとめ

• コールバック地獄を解決するためにPromiseが生まれ、さらにasync/awaitで読みやすくなった
• Promiseにはpending / fulfilled / rejectedの3つの状態がある
• async/awaitはPromiseのシンタックスシュガーで、同期処理のように書ける
• 並列処理にはPromise.all（全成功）、allSettled（全完了）、race（最速）、any（最初の成功）を使い分ける
• fetchのresponse.okチェック、リトライ、タイムアウトは実務で必須のパターン
• awaitの付け忘れ、forループ内await、エラーの握りつぶしに注意する
• 迷ったらasync/awaitをベースにし、並列処理にはPromise.allを組み合わせる