同期処理と非同期処理

なぜ非同期が必要？

プログラムには2種類の「重い処理」があります。

• CPUバウンド：計算そのものが重い（画像処理、暗号化、巨大なソート）
• I/Oバウンド：計算は軽いが待ちが長い（ネットワーク通信、ファイル読み書き、DB問い合わせ）

ネットワークの応答は数十〜数百ミリ秒。その間CPUはほぼ遊んでいます。同期で書くと、この「待ち」の間プログラム全体が止まります。とくにブラウザでは、待っている間画面が固まりクリックも効かなくなる。非同期は、この待ち時間に他の仕事を進めるための仕組みです。

// 同期(イメージ)：応答が来るまでここで全部止まる
const data = fetchSync('/api/user'); // ← 200ms 待つ間、何もできない
console.log(data);
console.log('次の処理');             // 待ち終わってからやっと動く

ブロッキング vs ノンブロッキング

書き方の進化：コールバック → Promise → async/await

非同期の「終わったら受け取る」をどう書くか、JavaScript では3世代で進化しました。

1. コールバック

「終わったら呼んでね」と関数を渡す方式。素直ですが、待ちが連鎖すると右へ右へとネストが深くなり、いわゆるコールバック地獄になります。

getUser(id, (err, user) => {
  if (err) return handle(err);
  getPosts(user, (err, posts) => {      // どんどん深くなる
    if (err) return handle(err);
    getComments(posts, (err, comments) => {
      // ...ネストが続く
    });
  });
});

2. Promise

「いずれ値が入る箱」を返す方式。.then() で繋ぎ、.catch() でエラーをまとめて受けられます。ネストが横→縦のチェーンになり、見通しが改善します。

getUser(id)
  .then(user => getPosts(user))
  .then(posts => getComments(posts))
  .then(comments => render(comments))
  .catch(handle); // どこで失敗してもここに集約

Promise は3つの状態を持ちます：pending（待機）→ fulfilled（成功）／ rejected（失敗）。一度決まると変わりません。

3. async/await

Promise を同期コードのように書ける糖衣構文。await は「この Promise が解決するまで“この関数の中だけ”待つ」という意味で、見た目は同期、中身は非同期です。エラーは普通の try/catch で扱えます。

async function show(id) {
  try {
    const user = await getUser(id);
    const posts = await getPosts(user);
    const comments = await getComments(posts);
    render(comments);
  } catch (e) {
    handle(e);
  }
}

並行（concurrent）と並列（parallel）は別物

ここは混同しやすい最重要ポイント。

• 並行（concurrency）：複数の作業を切り替えながらこなす。同時に動いている“ように見える”。担当は1人でも成立する。
• 並列（parallelism）：複数の作業を物理的に同時に動かす。CPUのコアが複数必要。

イベントループ：1本のスレッドで“待たずに”捌く仕組み

「シングルスレッドなのに、なぜ待たずに次へ進めるのか？」の答えがイベントループです。流れはこうです。

1. 同期コードはコールスタックで上から順に実行される。
2. fetch などの非同期処理（I/O）は、実行環境（ブラウザ/Node.js）側に依頼して、スタックからは即座に抜ける。
3. 依頼した処理が完了すると、その続き（コールバック）がキューに積まれる。
4. イベントループが「スタックが空になった」のを見計らって、キューの続きをスタックへ戻す。

つまり「待つ」のは JS のスレッドではなく環境側。だから1本のスレッドでも固まらずに済みます。

console.log('1');
setTimeout(() => console.log('2'), 0); // 0ミリ秒でも“後回し”
Promise.resolve().then(() => console.log('3'));
console.log('4');

// 出力順: 1 → 4 → 3 → 2

つまずきポイント

// ❌ 直列：合計 = 各処理の合計時間
for (const id of ids) {
  results.push(await fetchUser(id));
}

// ✅ 並行：合計 ≒ 一番遅い1件
const results = await Promise.all(ids.map(id => fetchUser(id)));

いつ非同期にすべき？

判断はシンプルで、「待ちが長いか／止まると困るか」です。

• 非同期が効く：ネットワーク通信、ファイル/DBアクセス、外部API、タイマー —— つまりI/Oバウンド。
• 非同期にしても速くならない：純粋な計算が重いCPUバウンド。これは並列化（Web Worker や別プロセス）やアルゴリズム改善の領域。
• 順番が本質的に大事で待ち時間も短いなら、無理に非同期化せず同期のまま素直に書く方が読みやすい。