⚡ JavaScript async/await 完全ガイド — Promiseと非同期処理を理解する

非同期処理とは何か？

JavaScriptは基本的にシングルスレッドで動作する言語です。つまり、一度に1つの処理しか実行できません。しかし、サーバーへのリクエストやファイル読み込みのような時間がかかる処理を「待つ」あいだ、画面を完全に止めてしまっては困ります。

そこで登場するのが非同期処理（asynchronous processing）です。非同期処理を使うと、時間のかかる処理を「バックグラウンド」で進めながら、他のコードを実行できます。

コールバック地獄からの脱却

非同期処理のいちばん古い書き方はコールバック関数でした。しかしネストが深くなると、いわゆる「コールバック地獄」になります：

// コールバック地獄の例
getUser(userId, function(user) {
  getPosts(user.id, function(posts) {
    getComments(posts[0].id, function(comments) {
      console.log(comments);
      // さらに続くと地獄に...
    });
  });
});

この問題を解決するために登場したのが Promise、そしてそれをさらに読みやすくした async/await です。

Promiseの基礎

Promiseは「将来のいつか結果が返ってくる約束」を表すオブジェクトです。Promiseは3つの状態を持ちます：

• pending（待機中）：処理がまだ完了していない
• fulfilled（成功）：処理が成功して結果が返ってきた
• rejected（失敗）：処理が失敗してエラーが返ってきた

Promiseの作り方

// Promiseを返す関数
function fetchUserName(userId) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (userId > 0) {
        resolve(`ユーザー${userId}`);
      } else {
        reject(new Error("無効なユーザーID"));
      }
    }, 1000);
  });
}

// .then()で結果を受け取る
fetchUserName(1)
  .then(name => console.log(name))   // "ユーザー1"
  .catch(err => console.error(err));

Promiseチェーン

.then()はPromiseを返すので、続けてつなげられます：

fetchUserName(1)
  .then(name => {
    console.log(name);
    return fetchPosts(name);  // 次のPromiseを返す
  })
  .then(posts => {
    console.log(posts);
  })
  .catch(err => console.error(err));

async/await の登場

Promiseは便利ですが、.then()のチェーンが長くなると読みにくくなります。async/awaitを使うと、非同期処理を同期処理のように書けるようになります。

基本構文

// asyncをつけた関数の中でawaitが使える
async function showUserPosts(userId) {
  const name = await fetchUserName(userId);
  console.log(name);

  const posts = await fetchPosts(name);
  console.log(posts);
}

showUserPosts(1);

たったこれだけで、コールバック地獄もPromiseチェーンの煩雑さも解消されます。コードが「上から下へ」読めるのが大きな利点です。

asyncが返すのは常にPromise

async関数はreturnした値を自動的にPromiseでラップして返します：

async function getNumber() {
  return 42;  // 数値をreturn
}

// 使う側はPromiseとして扱う
getNumber().then(n => console.log(n));  // 42

// または別のasync関数の中でawait
async function main() {
  const n = await getNumber();
  console.log(n);  // 42
}

エラーハンドリング

async/awaitでは try...catch でエラーを捕捉できます。これは同期処理と同じ書き方です：

async function safeFetch(userId) {
  try {
    const name = await fetchUserName(userId);
    const posts = await fetchPosts(name);
    return posts;
  } catch (err) {
    console.error("エラーが発生しました:", err.message);
    return [];  // デフォルト値を返す
  } finally {
    console.log("処理完了");
  }
}

並列処理：Promise.all

独立した複数の非同期処理を 並行して 実行したい場合、await を順番に書くと逐次実行になり遅くなります：

// 遅い書き方（合計3秒）
async function slow() {
  const a = await fetch1();  // 1秒
  const b = await fetch2();  // 1秒
  const c = await fetch3();  // 1秒
}

// 速い書き方（合計1秒）
async function fast() {
  const [a, b, c] = await Promise.all([
    fetch1(),
    fetch2(),
    fetch3()
  ]);
}

Promise.allは配列内のすべてのPromiseが成功したら結果を配列で返し、ひとつでも失敗するとrejectされます。

失敗を許容する Promise.allSettled

「ひとつ失敗しても他は完了させたい」場合はPromise.allSettledを使います：

const results = await Promise.allSettled([
  fetch1(),
  fetch2(),
  fetch3()
]);

results.forEach((result, i) => {
  if (result.status === "fulfilled") {
    console.log(`${i}: 成功`, result.value);
  } else {
    console.log(`${i}: 失敗`, result.reason);
  }
});

実践例：APIからデータ取得

fetch APIを使った典型的な非同期処理のパターンです：

async function getUserProfile(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);

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

    const data = await response.json();
    return data;
  } catch (err) {
    console.error("取得失敗:", err);
    throw err;  // 上位に伝搬
  }
}

// 呼び出し側
async function showProfile() {
  const profile = await getUserProfile(123);
  document.getElementById("name").textContent = profile.name;
}

よくある落とし穴

1. forEachの中でawaitしても順次実行されない

// ❌ 期待通りに動かない
[1, 2, 3].forEach(async (id) => {
  await processItem(id);  // 並行に走り、順序保証もなし
});

// ✅ for...of を使う（順次実行）
for (const id of [1, 2, 3]) {
  await processItem(id);
}

// ✅ 並列に走らせたいなら Promise.all
await Promise.all([1, 2, 3].map(processItem));

2. awaitを忘れる

// ❌ awaitなし → Promiseオブジェクトがそのまま代入される
const data = fetch("/api/data");
console.log(data);  // Promise { ... } と表示される

// ✅ awaitを忘れずに
const data = await fetch("/api/data").then(r => r.json());

3. 直列処理になっているのに気づかない

独立した処理を await で順番に書くと、不必要に直列実行になり遅くなります。並行できる処理はPromise.allでまとめましょう。

まとめ

JavaScript の非同期処理を扱うために覚えておきたいポイント：

• Promiseは「未来の結果」を表すオブジェクト
• async/awaitを使えば非同期処理を同期処理のように読みやすく書ける
• エラーはtry...catchで捕捉する
• 並行実行できる処理はPromise.allでまとめてパフォーマンスを上げる
• 失敗を許容したい場合はPromise.allSettledを使う
• forEachとawaitは相性が悪いのでfor...ofかPromise.allを使う

非同期処理はJavaScriptの最重要スキルのひとつです。最初は混乱しやすいですが、Promise → async/await → 並列処理の順で段階的に理解していけば、必ず使いこなせるようになります。