JavaScript: JavaScript 非同期プログラミング

最終更新：2026-10-13

JavaScript はシングルスレッドです。一度に1つのことしかできません。しかし、ネットワークリクエストに3秒かかる場合、ページが3秒間フリーズするのは困りますよね？非同期プログラミングがこの問題を解決します。待つ代わりに番号札を受け取り、準備ができたら戻ってきます。レストランの行列システムのようなもので、キッチンのドアの前で立つのではなく、座って番号が呼ばれるのを待ちます。

関連する非同期メソッド：async/await Promise.allSettled Promise.race Promise.all setTimeout Promise catch then

1. 同期 vs 非同期

同期：コードは行ごとに実行されます。次の行は現在の行が完了するまで待ちます。列に並ぶようなもので、前の人が終わるまで待ちます。

非同期：特定の操作（ネットワークリクエスト、タイマー、ファイル I/O）は後続のコードをブロックせずに開始されます。完了時にコールバックや Promise で通知を受けます。

<script>
console.log('1');
setTimeout(function() {
  console.log('2');
}, 1000);
console.log('3');
</script>

出力順は 1 → 3 → 2 です。setTimeout は非同期で、そのコールバックは1秒後に console.log('3') をブロックせずに実行されます。

コールバックは最も基本的な非同期パターンです。関数を引数として渡し、非同期操作が完了した時に呼び出されます。

(1) サンプル：基本的なコールバックの使用

(2) コールバック地獄

非同期操作が順番に依存し合うと、コールバックが深くネストされます。これが悪名高い「コールバック地獄」です。

<script>
getUser(function(user) {
  getOrders(user.id, function(orders) {
    getOrderDetail(orders[0].id, function(detail) {
      getItems(detail.itemId, function(items) {
        console.log('4レベルの深さ。さらに複雑になると読みにくくなる');
      });
    });
  });
});
</script>

2. Promise

Promise は非同期操作の最終結果を表すオブジェクトです。3つの状態があります。

Promise が pending から fulfilled または rejected に遷移すると、二度と元に戻りません。射た矢は召回できないようなものです。

(1) Promise の作成

<script>
const promise = new Promise(function(resolve, reject) {
  // 非同期操作
  // 成功時は resolve(result) を呼び出す
  // 失敗時は reject(error) を呼び出す
});
</script>

(2) then / catch / finally

<script>
promise
  .then(function(result) { console.log(result); })   // 成功時に実行
  .catch(function(error) { console.error(error); })    // 失敗時に実行
  .finally(function() { console.log('完了'); });       // 常に実行
</script>

(3) サンプル：Promise でリクエストをシミュレート

(4) チェーン

then 自体が Promise を返すため、呼び出しをチェーンできます。コールバック地獄が直線になります。

<script>
fetchUser()
  .then(function(user) { return fetchOrders(user.id); })
  .then(function(orders) { return fetchDetail(orders[0].id); })
  .then(function(detail) { console.log(detail); })
  .catch(function(err) { console.error(err); });
</script>

3. async / await

async/await は Promise のシンタシュガーです。非同期コードを同期的に見せかけ、可読性を大幅に向上させます。

• async：自動的に Promise を返す非同期関数を宣言
• await：Promise が解決するまで実行を一時停止し、結果を返す

(1) サンプル：上記のリクエストを async/await で書き直す

(2) エラー処理

async/await は try/catch でエラー処理を行います。同期コードと同じパターンです。

<script>
async function loadAll() {
  try {
    const user = await fetchUser();
    const orders = await fetchOrders(user.id);
    console.log(orders);
  } catch (err) {
    console.error('何か問題がありました:', err);
  }
}
</script>

4. Promise.all と Promise.race

(1) サンプル：Promise.all による並行リクエスト

関連する非同期メソッド：async/await Promise.allSettled Promise.race Promise.all setTimeout Promise catch then

❓ よくある質問

📖 まとめ

• 同期コードは後続の実行をブロックするが、非同期コードはブロックしない。シングルスレッドでも「複数のことができる」
• コールバックは最も基本的な非同期パターン。深いネストはコールバック地獄を生む
• Promise には3つの状態：pending → fulfilled または pending → rejected。状態遷移は不可逆
• then/catch/finally は Promise を消費する。チェーンはコールバック地獄を解決
• async/await は Promise のシンタシュガー。await は async 関数内でのみ使用可能
• Promise.all はすべての成功を待つ。Promise.race は最初に完了したものを取る

📝 練習問題

1. 基礎：Promise + setTimeout を使って2秒の遅延をシミュレートし、成功時に「完了」と出力してください。
2. 中級：上記を async/await で書き直し、try/catch のエラー処理を追加してください。
3. チャレンジ：Promise.all を使って、異なる遅延（1秒/2秒/3秒）の3つのシミュレートリクエストを同時に発火し、すべて完了した時の合計経過時間を計算して表示してください。

Web-Tutorial 技術チーム

複数の開発者によって共同維持されているプログラミングチュートリアルプラットフォーム。各チュートリアルは専門分野の開発者が執筆・レビューしています。正確で信頼性の高いコンテンツを目指しています — 問題を見つけた場合はお知らせください。

私たちについて