これまでの記事で、JavaScriptを使ってDOMを操作し、イベントに反応してWebサイトを動かす方法を学びましたね。しかし、あなたのWebサイトが、外部のサーバーから画像やデータを取得しようとしたとき、処理が終わるまで画面全体がフリーズしてしまうとしたら、どうでしょうか？
ユーザーは待ってくれません。Webサイトは、時間がかかる処理を実行している間も、画面の表示やボタンの操作といった他の作業を止めない必要があります。この「待っている間に他のことをする」仕組みこそが、**非同期処理（Asynchronous Processing）**です。
今回は、JavaScriptをモダンなWebアプリケーションにするために必須の非同期処理の基本、特にsetTimeoutとPromiseの概念について解説します。
1. 同期処理と非同期処理の違い
同期処理（Synchronous）
コードが書かれた順番通りに、一つずつ処理が完了するまで次の処理に移らない方式です。
- イメージ: レジに並ぶ人の列のように、前の人の会計が終わらないと、次の人の会計が始まらない。
- 問題点: データ取得など時間がかかる処理があると、その間すべての処理が停止してしまう。
非同期処理（Asynchronous）
時間がかかる処理を一旦バックグラウンドに任せて、その処理を待っている間に次の処理を進めてしまう方式です。
- イメージ: レストランで注文する様子。料理ができるのを待つ間も、ウェイターは他の客の注文を聞いたり、席を案内したりできる。
- 利点: Webサイトがフリーズせず、ユーザーはスムーズに操作を続けられる。
2. 非同期処理の基本：setTimeoutとコールバック関数
最も基本的な非同期処理は、特定の時間後に処理を実行する**setTimeout**関数です。
setTimeoutは、実行したい関数（これをコールバック関数と呼びます）と、遅延時間（ミリ秒）を引数に取ります。
JavaScript
console.log("① 処理開始");
setTimeout(function() {
console.log("③ 2秒後に実行される処理（非同期）");
}, 2000); // 2000ミリ秒 = 2秒
console.log("② 処理続行（同期）");
実行順序: 「①」→「②」→（2秒後）→「③」となります。
setTimeoutの行が実行されたとき、JavaScriptはタイマーをセットするだけで、すぐに次の行（②）に進みます。タイマーが切れたときに初めて、コールバック関数（③）が実行されます。これが非同期処理の基本動作です。
3. モダンな非同期処理：Promiseの概念
setTimeoutは単純な遅延処理に使えますが、実際のWeb開発では、データの取得が「成功した」のか「失敗した」のかを管理する必要があります。この成功・失敗の状態を管理するために使われるのが**Promise（プロミス、約束）**オブジェクトです。
Promiseは、未来のある時点で結果（成功または失敗）を返すことを約束するオブジェクトです。
Promiseの3つの状態
- Pending（保留中）: 処理がまだ完了していない状態。
- Fulfilled（成功）: 処理が成功し、結果が返された状態。
- Rejected（失敗）: 処理が失敗し、エラーが返された状態。
Promiseの使い方（thenとcatch）
Promiseを返す非同期関数を使う場合、その結果を受け取るために**.then()と.catch()**メソッドを連結（チェーン）して使います。
JavaScript
// 仮のデータ取得関数（Promiseを返す）
function fetchData() {
return new Promise((resolve, reject) => {
// 2秒後に成功としてデータを返す
setTimeout(() => {
const data = { id: 1, content: "非同期データ" };
resolve(data); // 成功した結果を返す
}, 2000);
});
}
fetchData()
.then(data => {
// 成功（Fulfilled）したときの処理
console.log("データ取得成功:", data);
})
.catch(error => {
// 失敗（Rejected）したときの処理
console.error("データ取得失敗:", error);
});
まとめ：PromiseはWeb開発の必須スキル
非同期処理は、現代のWebアプリケーションでは避けて通れないテーマです。
- 非同期：時間がかかる処理をバックグラウンドに任せ、他の処理を続行させる。
setTimeout：特定の時間後に処理を実行する最も基本的な非同期関数。Promise：非同期処理の「成功」と「失敗」の状態を管理する仕組み。
特にPromiseは、Web APIからデータを取得するfetch関数など、今後の学習で必ず遭遇します。まずは「時間がかかる処理は非同期で、成功か失敗か結果が返ってくる」という概念を理解することから始めてみましょう。
