JavaScriptの非同期処理：Promiseとasync/awaitの基本

公開日: 2025年7月5日 | カテゴリ: JavaScript, プログラミング

JavaScriptを学ぶ上で避けて通れないのが「非同期処理」です。 特にウェブ開発では、APIからのデータ取得やファイルの読み込みなど、 時間がかかる処理を待たずに他の処理を進める必要が頻繁に発生します。 今回は、現代のJavaScriptで非同期処理を扱う上で不可欠なPromiseとasync/awaitについて解説します。

1. 非同期処理とは？

JavaScriptは基本的にシングルスレッドで動作します。つまり、一度に一つの処理しか実行できません。 しかし、ネットワーク通信などの時間のかかる処理を同期的に（順番に）実行すると、 その処理が終わるまでブラウザがフリーズしてしまうことになります。 これを避けるために、時間のかかる処理をバックグラウンドで実行し、 完了したらその結果を後で受け取る仕組みが「非同期処理」です。

2. Promise (プロミス)

Promiseは、非同期処理の最終的な完了（または失敗）と、その結果の値を表すオブジェクトです。 コールバック地獄（Callback Hell）を解消し、非同期処理をより読みやすく、管理しやすくするために導入されました。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true; // 仮に成功と失敗を切り替え
            if (success) {
                resolve("データ取得成功！");
            } else {
                reject("データ取得失敗...");
            }
        }, 2000); // 2秒後に実行
    });
}

fetchData()
    .then(data => {
        console.log(data); // データ取得成功！
    })
    .catch(error => {
        console.error(error); // データ取得失敗...
    })
    .finally(() => {
        console.log("処理が完了しました。");
    });
            

`then()` で成功時の処理を、`catch()` で失敗時の処理を記述できます。

3. async/await (エイシンク/アウェイト)

async/awaitは、Promiseをより直感的に、まるで同期処理を書くかのように記述できる構文です。 ES2017で導入され、非同期コードの可読性を劇的に向上させました。

async function loadData() {
    try {
        const data = await fetchData(); // fetchData()のPromiseが解決するまで待つ
        console.log(data); // データ取得成功！
    } catch (error) {
        console.error(error); // データ取得失敗...
    } finally {
        console.log("処理が完了しました。");
    }
}

loadData();
            

`async` キーワードは関数が非同期であることを示し、その関数内で `await` を使用できます。 `await` はPromiseの解決を待ち、その結果を返します。エラーハンドリングは `try...catch` で行います。

Promiseとasync/awaitを理解し使いこなすことで、よりクリーンで保守しやすい非同期コードを書くことができます。 現代のウェブ開発では必須の知識と言えるでしょう。