JavaScriptの非同期処理とは

2025-07-28

はじめに

JavaScriptを学び始めた皆さん、基本的な構文や操作をマスターした後、次に立ちはだかる大きな壁が「非同期処理」ではないでしょうか？この概念はJavaScriptにおいて非常に重要であり、現代のWeb開発では避けて通れません。この記事では、非同期処理とは何か、なぜ必要なのか、どのように動作するのかを、初心者の方にもわかりやすく詳しく解説していきます。

非同期処理とは何か？

基本的な定義

非同期処理（Asynchronous Processing）とは、コードの実行が上から順番に（同期的に）進むのではなく、特定の処理が完了するのを待たずに次の処理を進めることができるプログラミングの手法です。

対照的なのが同期処理（Synchronous Processing）で、これはコードが書かれた順番に1つずつ処理が実行され、前の処理が終わるまで次の処理は開始されません。

日常生活での例え

非同期処理を理解するために、日常生活の例で考えてみましょう。

同期処理の例: レストランの注文

客が注文する
料理人が注文を受けて料理を作る
料理が完成するまで客は待つ
料理が完成したら客は食べ始める
次の客の注文を受ける

この方法では、1人の客の料理が完成するまで次の客の注文を受け付けられません。非常に非効率です。

非同期処理の例: 実際のレストラン

客Aが注文する
料理人は客Aの注文をキッチンに伝える
すぐに客Bの注文を受け付ける
料理人が並行して料理を作る
料理が完成した客から順に提供する

これが非同期処理の考え方です。複数の作業を並行して進めることで、全体の効率を上げることができます。

なぜJavaScriptで非同期処理が必要なのか？

JavaScriptのシングルスレッドモデル

JavaScriptは「シングルスレッド」で動作します。これは、一度に1つのことしか処理できないという意味です。他の言語のようにマルチスレッドで並列処理を行うことができません。

しかし、Webブラウザでは多くのタスクを同時に処理する必要があります:

ユーザーのクリックやキー入力への反応
サーバーからのデータ取得
アニメーションの描画
タイマー処理

これらの処理を同期処理だけで行うと、時間のかかる処理（例えばサーバーからのデータ取得）の間、ブラウザは完全にフリーズしてしまいます。

ブラウザ環境での制約

Webブラウザでは、以下のような時間のかかる処理が頻繁に発生します:

ネットワークリクエスト: API呼び出し、データ取得
ファイル操作: ローカルファイルの読み書き
データベース操作: IndexedDBへのアクセス
タイマー処理: setTimeoutやsetInterval

これらの処理を同期的に行うと、ユーザー体験が著しく損なわれます。非同期処理はこの問題を解決するための重要な手法なのです。

非同期処理の動作原理

イベントループとコールバックキュー

JavaScriptの非同期処理は「イベントループ」という仕組みで実現されています。簡単に説明すると:

すべての同期処理は「コールスタック」で実行される
非同期処理はWeb APIに渡され、バックグラウンドで実行される
非同期処理が完了すると、そのコールバック関数が「コールバックキュー」に追加される
イベントループはコールスタックが空になると、コールバックキューから関数を取り出して実行する

この仕組みにより、長時間かかる処理でもメインの処理フローをブロックせずに実行できるのです。

非同期処理の具体例

実際のコードで見てみましょう:

console.log("処理1");

setTimeout(() => {
  console.log("処理2 (非同期)");
}, 1000);

console.log("処理3");

このコードの実行結果は:

処理1
処理3
処理2 (非同期)

となります。setTimeoutは非同期処理なので、1秒待つのではなく、1秒後に実行するようにスケジュールしてすぐに次の処理（処理3）に進みます。

非同期処理の種類

JavaScriptには主に3つの非同期処理の手法があります:

コールバック関数: 伝統的な方法だが「コールバック地獄」の問題がある
Promise: ES6で導入されたより構造化された方法
async/await: ES2017で導入された同期処理のような見た目で非同期処理を書ける方法

この記事では概要のみ説明し、詳細は後の章で解説します。

非同期処理のメリットとデメリット

メリット

UIの応答性向上: 時間のかかる処理でもUIがフリーズしない
効率的なリソース利用: 待ち時間を他の処理に活用できる
パフォーマンス向上: 複数の操作を並行して実行できる
ユーザー体験の向上: 待ち時間を減らせる

デメリット

コードの複雑化: 処理の流れが直感的でなくなる
エラー処理の難しさ: エラーが発生した場所を追跡しにくい
デバッグの難しさ: 実行順序がコードの記述順と異なる
コールバック地獄: ネストが深くなり可読性が低下する（コールバック関数使用時）

非同期処理の実際の使用例

1. データフェッチング

// 同期的なアプローチ（現実的ではない）
const data = fetchDataFromServer(); // ここでブロック
displayData(data);

// 非同期なアプローチ
fetchDataFromServerAsync((data) => {
  displayData(data);
});
// この間も他の処理を続行可能

2. タイマー処理

console.log("開始");

setTimeout(() => {
  console.log("3秒後");
}, 3000);

console.log("終了");
// 結果: 開始 → 終了 → 3秒後

3. イベントリスナー

button.addEventListener("click", () => {
  console.log("ボタンがクリックされました");
});
// クリックされるまで他の処理を続行

非同期処理のよくある間違い

1. 実行順序の誤解

let data;
fetchDataFromServer((result) => {
  data = result;
});
console.log(data); // undefined - コールバックが実行される前にここが実行される

2. ループ内での非同期処理

for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i); // すべて5が出力される
  }, 100);
}

3. エラー処理の忘れ

fetchDataFromServer((data) => {
  processData(data); // エラーが発生する可能性があるがキャッチできない
});

非同期処理のベストプラクティス

コールバック地獄を避ける: Promiseやasync/awaitを使用
適切なエラー処理: すべての非同期操作でエラーをキャッチ
コードの可読性を考慮: 非同期処理がわかりやすいようにコメントを追加
並列処理を活用: 複数の独立した非同期処理は並行して実行
状態管理を明確に: どの処理が完了したか/していないか明確にする

非同期処理の歴史

JavaScriptの非同期処理は進化してきました:

初期: 単純なコールバック関数
jQuery時代: Deferredオブジェクト
ES6 (2015): Promiseの標準化
ES2017: async/awaitの導入

この進化により、非同期処理はより書きやすく、読みやすくなっています。

まとめ

非同期処理はJavaScriptにおいて非常に重要な概念です。その主なポイントは:

非同期処理はコードの実行をブロックせず、効率的な処理を可能にする
JavaScriptのシングルスレッドモデルでは特に重要
イベントループとコールバックキューという仕組みで実現されている
コールバック関数、Promise、async/awaitという進化を遂げてきた
正しく使えばパフォーマンスとユーザー体験を向上させられる
誤った使い方はバグや予期せぬ動作の原因になる

非同期処理は最初は理解が難しいかもしれませんが、JavaScript開発者として成長するためには避けて通れない道です。次の章では、非同期処理の具体的な実装方法である「コールバック関数」について詳しく学んでいきましょう。

練習問題

理解を深めるための簡単な問題を用意しました。

問題1

以下のコードの実行結果を予想してください。

console.log("A");

setTimeout(() => {
  console.log("B");
}, 0);

console.log("C");

問題2

次の非同期処理の特徴について、正しいものには○、間違っているものには×をつけてください。

非同期処理を使うと、コードは常に書かれた順番に実行される ( )
setTimeoutは非同期処理の一例である ( )
非同期処理はJavaScriptのシングルスレッドモデルの制約を克服するために必要である ( )
非同期処理を使うと、必ずプログラムの実行速度が速くなる ( )

問題3

以下のコードのどこに問題があるか指摘してください。

function getUserData(userId) {
  let user;
  fetchUserFromServer(userId, (data) => {
    user = data;
  });
  return user;
}

const data = getUserData(123);
console.log(data);

解答例

問題１解答例

実行結果：
A
C
B

理由：
JavaScriptはシングルスレッドで動作し、まず同期処理を実行する。
setTimeoutのコールバックは「タスクキュー」に入り、同期処理終了後に実行されるため、
“A” → “C” → “B” の順になる。

問題２解答例

非同期処理を使うと、コードは常に書かれた順番に実行される (×)
setTimeoutは非同期処理の一例である (○)
非同期処理はJavaScriptのシングルスレッドモデルの制約を克服するために必要である (○)
非同期処理を使うと、必ずプログラムの実行速度が速くなる (×)

問題３解答例

async function getUserData(userId) {
  const data = await fetchUserFromServer(userId);
  return data;
}

(async () => {
  const data = await getUserData(123);
  console.log(data);
})();

問題点：
fetchUserFromServerは非同期処理なのに、結果が返ってくる前に
getUserData関数がreturnしてしまうため、常にundefinedが返る。

修正案：
コールバックの中で処理を行う、またはPromise/async-awaitを使って非同期の完了を待つ。

同じカテゴリーの記事