プログラミング

JavaScriptのPromise完全ガイド

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

JavaScriptにおける「Promise」の概念は、非同期プログラミングを効率的に扱うために重要な要素です。この「Promise」は、未来の値を表現するオブジェクトで、非同期操作が完了するか、失敗するまでの結果を取り扱います。本記事では、Promiseの基本的な使用方法から応用的な使い方までを完全かつ包括的に解説します。

1. Promiseの基本

Promiseは、非同期操作の結果を表現するオブジェクトです。非同期処理が成功するか、失敗するかに関わらず、結果を後で取得できるようにするための仕組みです。Promiseは、主に3つの状態を持っています。

関連記事

  • Pending（保留）: 初期状態。非同期操作がまだ完了していない状態。

  • Fulfilled（成功）: 非同期操作が成功し、結果が得られた状態。

  • Rejected（失敗）: 非同期操作が失敗し、エラーが発生した状態。

Promiseの構文は以下のようになります。

javascript
const promise = new Promise((resolve, reject) => {
    // 非同期処理
    let success = true;
    if (success) {
        resolve('処理が成功しました');
    } else {
        reject('処理が失敗しました');
    }
});

この例では、resolveが呼ばれるとPromiseは「成功」状態になり、rejectが呼ばれると「失敗」状態になります。

2. Promiseの使用方法

Promiseが返されると、.then()と.catch()メソッドを使って、その結果を扱います。

  • .then(): 非同期操作が成功した場合に呼び出される。

  • .catch(): 非同期操作が失敗した場合に呼び出される。

javascript
const promise = new Promise((resolve, reject) => {
    let success = true;
    if (success) {
        resolve('処理が成功しました');
    } else {
        reject('処理が失敗しました');
    }
});

promise
    .then(result => {
        console.log(result); // 成功時の処理
    })
    .catch(error => {
        console.error(error); // 失敗時の処理
    });

このコードでは、promiseが成功した場合、.then()内のコールバックが実行され、失敗した場合は.catch()が呼ばれます。

3. チェーン可能なPromise

Promiseはチェーンすることができ、前の.then()の結果を次の.then()に渡すことができます。これにより、非同期処理を連続して行う際に、直感的なコードを書くことができます。

javascript
const promise = new Promise((resolve, reject) => {
    resolve('初期処理');
});

promise
    .then(result => {
        console.log(result); // '初期処理'
        return '次の処理';
    })
    .then(result => {
        console.log(result); // '次の処理'
        return 'さらに次の処理';
    })
    .then(result => {
        console.log(result); // 'さらに次の処理'
    });

このように、thenを使って非同期処理を連続して実行することができます。

4. Promise.all()

複数の非同期操作を並行して実行し、その結果を一度に取得したい場合、Promise.all()を使うことができます。Promise.all()は、複数のPromiseが全て解決（成功）した時に結果を返します。

javascript
const promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000, '結果1');
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 2000, '結果2');
});

Promise.all([promise1, promise2])
    .then(results => {
        console.log(results); // ['結果1', '結果2']
    })
    .catch(error => {
        console.log(error); // いずれかのPromiseが失敗した場合
    });

Promise.all()は、複数の非同期操作がすべて成功した場合に、結果を配列として返します。いずれかが失敗すると、最初に失敗したPromiseのエラーが返されます。

5. Promise.race()

Promise.race()は、複数のPromiseのうち最初に解決（成功または失敗）したPromiseの結果を返します。複数の非同期処理が同時に行われている場合に、最初に完了した結果を扱いたいときに使用します。

javascript
const promise1 = new Promise((resolve, reject) => {
    setTimeout(resolve, 1000, '結果1');
});

const promise2 = new Promise((resolve, reject) => {
    setTimeout(resolve, 500, '結果2');
});

Promise.race([promise1, promise2])
    .then(result => {
        console.log(result); // '結果2'（500ms後に完了）
    })
    .catch(error => {
        console.log(error);
    });

Promise.race()は、最初に解決したPromiseの結果を返します。この例では、promise2が先に解決するため、'結果2'が返されます。

6. 非同期関数とPromise

async/awaitは、Promiseを使った非同期処理をより直感的に記述できる構文です。async関数内でawaitを使うことで、Promiseの結果を同期的に扱うことができます。

javascript
async function example() {
    const result = await new Promise((resolve, reject) => {
        setTimeout(resolve, 1000, '結果');
    });
    console.log(result); // '結果'
}

example();

awaitは、Promiseが解決するまで待機し、その結果を返します。async関数は必ずPromiseを返すため、awaitと組み合わせることで非同期処理を同期的に書けるようになります。

7. Promiseのエラーハンドリング

Promiseのエラーハンドリングには、.catch()を使う方法の他に、async/awaitとtry/catchを組み合わせる方法もあります。

.catch()を使用したエラーハンドリング

javascript
const promise = new Promise((resolve, reject) => {
    reject('エラーが発生しました');
});

promise
    .then(result => {
        console.log(result);
    })
    .catch(error => {
        console.error(error); // 'エラーが発生しました'
    });

async/awaitとtry/catchを使用したエラーハンドリング

javascript
async function example() {
    try {
        const result = await new Promise((resolve, reject) => {
            reject('エラーが発生しました');
        });
        console.log(result);
    } catch (error) {
        console.error(error); // 'エラーが発生しました'
    }
}

example();

8. Promiseの応用例

非同期処理を多用する実際のアプリケーションでは、Promiseを使うことでコードをシンプルかつ読みやすくすることができます。例えば、APIからデータを取得して処理する場合などに有効です。

javascript
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('データの取得に失敗しました', error);
    }
}

fetchData();

このコードは、fetch APIを使って非同期にデータを取得し、JSONとして解析しています。

まとめ

JavaScriptのPromiseは、非同期処理を扱う上で欠かせない重要なツールです。Promiseを理解し、.then(), .catch(), Promise.all(), Promise.race(), そしてasync/awaitなどの構文を使うことで、複雑な非同期処理も簡潔で管理しやすく記述できます。非同期プログラミングの効率を高めるために、これらの技術をうまく活用することが求められます。

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