プログラミング

JavaScriptのPromise完全ガイド

最終更新： 29/03/2025
1 分の読み

JavaScriptにおけるPromiseの完全かつ包括的な記事を以下に示します。Promiseは非同期処理を簡潔に扱うための重要な概念です。本記事ではPromiseの基礎から応用まで、実際の使い方を交えながら解説します。

Promiseの基本概念

JavaScriptでは非同期処理を扱う際、従来はコールバック関数を使用することが一般的でした。しかし、コールバック関数はネストが深くなりやすく、「コールバック地獄（Callback Hell）」と呼ばれる問題が発生しました。これを解決するために登場したのが「Promise」です。

関連記事

Promiseは、非同期操作の結果が「成功」または「失敗」によって決定される処理を表現します。Promiseは以下の三つの状態を持っています。

  1. 待機中（Pending）: Promiseがまだ解決されていない状態。

  2. 解決（Fulfilled）: Promiseが成功裏に完了した状態。

  3. 拒否（Rejected）: Promiseが失敗した状態。

Promiseを使用することで、非同期処理をより読みやすく、エラー処理も簡潔に行えるようになります。

Promiseの構造

Promiseは次のように生成します：

javascript
let promise = new Promise(function(resolve, reject) {
    // 非同期操作
    let success = true; // 処理が成功したかどうかを示すフラグ
    
    if(success) {
        resolve("成功しました！"); // 処理成功時
    } else {
        reject("エラーが発生しました。"); // 処理失敗時
    }
});

上記のコードでは、new Promise()にコールバック関数を渡し、resolve()とreject()という二つの関数を使って、非同期処理の結果を表現しています。

Promiseの使い方

Promiseを使用する際、.then()メソッドと.catch()メソッドを使います。

.then()メソッド

.then()メソッドは、Promiseが解決された時に呼び出されるコールバックを設定します。成功時と失敗時の両方に対応することができます。

javascript
promise
    .then(function(result) {
        console.log(result); // "成功しました！"
    })
    .catch(function(error) {
        console.log(error); // "エラーが発生しました。"
    });

then()はPromiseが解決された時に呼び出され、結果を受け取ります。失敗した場合はcatch()が呼ばれ、エラーメッセージを処理します。

.catch()メソッド

.catch()メソッドはPromiseが失敗した時に呼ばれるコールバックを設定するために使います。これにより、エラー処理を簡潔に行うことができます。

javascript
promise
    .then(function(result) {
        console.log(result);
    })
    .catch(function(error) {
        console.error("エラー: " + error);
    });

チェーンによる非同期処理の整理

Promiseはチェーンによる非同期処理を可能にします。これにより、非同期の一連の処理を順番に実行することができます。

javascript
let promise1 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("処理1完了"), 1000);
});

let promise2 = new Promise((resolve, reject) => {
    setTimeout(() => resolve("処理2完了"), 500);
});

promise1
    .then(result1 => {
        console.log(result1); // "処理1完了"
        return promise2; // 次のPromiseを返す
    })
    .then(result2 => {
        console.log(result2); // "処理2完了"
    })
    .catch(error => {
        console.log("エラー: " + error);
    });

上記のコードでは、最初のPromise（promise1）が完了した後、次にpromise2が実行される流れになっています。then()内で次のPromiseを返すことで、順番に処理が行われます。

Promise.all()とPromise.race()

複数のPromiseを一度に扱いたい場合には、Promise.all()やPromise.race()を使用します。

Promise.all()

Promise.all()は、複数のPromiseを並列で実行し、すべてのPromiseが解決された時に結果を返します。いずれかのPromiseが失敗した場合は、その時点で失敗として扱われます。

javascript
let promise1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, "A"));
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 500, "B"));

Promise.all([promise1, promise2])
    .then(results => {
        console.log(results); // ["A", "B"]
    })
    .catch(error => {
        console.error("エラー: " + error);
    });

Promise.race()

Promise.race()は、最初に解決または拒否されたPromiseの結果を返します。複数の非同期処理が並列で実行され、最初に完了したものが結果として扱われます。

javascript
let promise1 = new Promise((resolve, reject) => setTimeout(resolve, 1000, "A"));
let promise2 = new Promise((resolve, reject) => setTimeout(resolve, 500, "B"));

Promise.race([promise1, promise2])
    .then(result => {
        console.log(result); // "B"（最初に解決したPromise）
    })
    .catch(error => {
        console.error("エラー: " + error);
    });

非同期関数とasync/await

JavaScriptではasyncとawaitを使って、より簡潔に非同期処理を記述できます。asyncは関数の前に付け、awaitはPromiseの解決を待つために使用します。

javascript
async function fetchData() {
    try {
        let response = await fetch('https://api.example.com/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("エラー:", error);
    }
}

上記の例では、fetchData関数内でawaitを使って非同期処理が完了するのを待っています。これにより、非同期処理を同期的に扱えるようになります。

まとめ

Promiseは非同期処理を効率的に扱うための強力なツールです。非同期の操作を簡潔に、読みやすく書くために、then()やcatch()で結果を処理し、複数の非同期処理をPromise.all()やPromise.race()で一度に扱うことができます。また、async/awaitを使用すれば、さらに直感的に非同期コードを記述することができます。

Promiseの概念を理解し、効果的に活用することで、JavaScriptでの非同期処理が格段に扱いやすくなります。

最終更新： 29/03/2025
1 分の読み
Back to top button