MENU
  1. ホーム
  2. JavaScript
  3. JavaScriptのPromiseの基本と使い方を徹底解説

JavaScriptのPromiseの基本と使い方を徹底解説

JavaScript

JavaScriptは、ウェブ開発において非常に重要なプログラミング言語です。その中でも、非同期処理を効果的に管理するための仕組みであるPromiseは、多くの開発者にとって不可欠なツールとなっています。Promiseを理解することは、非同期操作を扱う際のコードの可読性や保守性を向上させ、バグを減少させるために重要です。本記事では、Promiseの基本的な概念から具体的な使用方法まで、段階的に詳しく解説していきます。Promiseを使いこなすことで、非同期処理をより直感的に、そして効率的に行えるようになります。

目次
  1. Promiseとは何か
    1. Promiseの目的
    2. Promiseの基本構造
  2. Promiseの構文
    1. Promiseの基本構文
    2. Promiseの使用例
    3. 実行の流れ
  3. 非同期処理とPromise
    1. 非同期処理の例
    2. コールバック地獄の例
    3. Promiseを使った非同期処理
    4. Promiseによる利点
  4. Promiseの状態
    1. Promiseの3つの状態
    2. 状態の遷移
    3. Promiseの状態を確認する方法
    4. Promiseの状態管理の重要性
  5. thenとcatchの使い方
    1. thenメソッド
    2. catchメソッド
    3. thenとcatchの組み合わせ
  6. Promiseチェーン
    1. Promiseチェーンの基本
    2. 非同期処理の連続実行
    3. エラーハンドリングとPromiseチェーン
    4. Promise.allを用いた並列処理
  7. async/awaitとの関係
    1. async関数
    2. awaitキーワード
    3. Promiseチェーンとasync/awaitの比較
    4. エラーハンドリング
    5. 利点
  8. エラーハンドリング
    1. Promiseのエラーハンドリング
    2. async/awaitのエラーハンドリング
    3. finallyメソッド
    4. エラーハンドリングのベストプラクティス
  9. 実際の使用例
    1. APIからデータを取得する
    2. データの処理
    3. 表示処理
    4. async/awaitを使った例
    5. ポイントのまとめ
  10. 応用例
    1. 複数の非同期操作の並列実行
    2. レースコンディションの処理
    3. シーケンシャルな非同期処理
    4. リトライ機能の実装
    5. デバウンス処理の実装
  11. 練習問題
    1. 問題1: 基本的なPromiseの作成
    2. 問題2: 非同期関数のチェーン
    3. 問題3: エラーハンドリング
    4. 問題4: async/awaitの利用
    5. 問題5: 複数の非同期操作の並列実行
    6. 問題6: タイムアウト処理の実装
  12. まとめ

Promiseとは何か

JavaScriptにおけるPromiseとは、非同期処理の結果を表現するオブジェクトの一種です。Promiseは、非同期処理が成功した場合の値や失敗した場合の理由を表すための標準的な方法を提供します。これにより、コールバック関数のネストを避け、より読みやすいコードを書くことが可能になります。

Promiseの目的

Promiseは、主に次の目的で使用されます：

  • 非同期処理の管理：Promiseは、非同期操作の成功や失敗を扱うための統一的な方法を提供します。
  • コールバック地獄の回避：ネストされたコールバック関数を避け、コードの可読性を向上させます。

Promiseの基本構造

Promiseは、以下のような基本構造を持っています：

let promise = new Promise((resolve, reject) => {
    // 非同期処理を実行
    if (/* 成功 */) {
        resolve('成功の結果');
    } else {
        reject('エラーメッセージ');
    }
});

このように、Promiseは非同期処理の成功時にはresolveを、失敗時にはrejectを呼び出します。これにより、Promiseオブジェクトが非同期処理の結果を持つようになります。

Promiseの構文

Promiseの基本構文は、非同期処理を直感的に扱うために設計されています。以下に、Promiseの基本的な構文とその使用例を紹介します。

Promiseの基本構文

Promiseを使用するには、new Promiseコンストラクタを用いてインスタンスを作成します。このコンストラクタは、resolveとrejectの2つの引数を取る関数を受け取ります。非同期処理が成功した場合はresolveを、失敗した場合はrejectを呼び出します。

let promise = new Promise((resolve, reject) => {
    // 非同期処理を実行
    let success = true; // 成功または失敗を決定する条件
    if (success) {
        resolve('成功の結果');
    } else {
        reject('エラーメッセージ');
    }
});

Promiseの使用例

次に、Promiseの具体的な使用例を見てみましょう。ここでは、非同期的にデータを取得する例を示します。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            let success = true; // 例として成功条件を設定
            if (success) {
                resolve('データの取得に成功しました');
            } else {
                reject('データの取得に失敗しました');
            }
        }, 2000);
    });
}

fetchData()
    .then(result => {
        console.log(result); // "データの取得に成功しました"が表示される
    })
    .catch(error => {
        console.error(error); // エラーメッセージが表示される
    });

実行の流れ

  1. fetchData関数が呼び出されると、新しいPromiseが返されます。
  2. 2秒後、setTimeoutが完了すると、success変数に基づいてresolveまたはrejectが呼び出されます。
  3. thenメソッドで成功時の処理を定義し、catchメソッドで失敗時の処理を定義します。

このように、Promiseを使うことで非同期処理を簡潔に記述でき、エラーハンドリングも一元化できます。

非同期処理とPromise

JavaScriptでは、非同期処理が頻繁に行われます。非同期処理とは、時間のかかる操作を行う間に他のコードの実行をブロックせず、後で結果を処理する方法です。Promiseは、こうした非同期処理をより直感的に管理するために設計されています。

非同期処理の例

非同期処理には、以下のようなケースがあります：

  • サーバーからデータを取得する（Ajaxリクエスト）
  • ファイルの読み書き
  • タイマーの操作

例えば、サーバーからデータを取得する場合、従来はコールバック関数を使用していました。しかし、コールバック関数を多用すると、コードが複雑になり「コールバック地獄」と呼ばれる状態になります。

コールバック地獄の例

以下は、コールバック関数を使った非同期処理の例です：

function getData(callback) {
    setTimeout(() => {
        callback('データ');
    }, 2000);
}

function processData(data, callback) {
    setTimeout(() => {
        callback(`処理された ${data}`);
    }, 2000);
}

function displayData(data) {
    console.log(data);
}

getData(data => {
    processData(data, processedData => {
        displayData(processedData);
    });
});

このように、コールバック関数をネストすると、コードが読みづらくなります。

Promiseを使った非同期処理

Promiseを使うと、非同期処理をより直感的に書けます。上記の例をPromiseを使って書き直してみましょう：

function getData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('データ');
        }, 2000);
    });
}

function processData(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`処理された ${data}`);
        }, 2000);
    });
}

function displayData(data) {
    console.log(data);
}

getData()
    .then(data => processData(data))
    .then(processedData => displayData(processedData))
    .catch(error => console.error(error));

Promiseによる利点

  • 可読性の向上：コールバック関数のネストを避け、フラットなコードを書けます。
  • エラーハンドリング：catchメソッドで一元的にエラーハンドリングが可能です。

このように、Promiseを使うことで、非同期処理の管理が簡単になり、コードの可読性と保守性が向上します。

Promiseの状態

Promiseは、非同期処理の結果を表現するために3つの状態を持ちます。これらの状態を理解することは、Promiseを効果的に活用するための基本です。

Promiseの3つの状態

Promiseには次の3つの状態があります：

  1. Pending（保留中）: 初期状態。非同期処理がまだ完了していない状態。
  2. Fulfilled（履行済み）: 非同期処理が成功し、結果が得られた状態。resolveが呼ばれたときにこの状態になります。
  3. Rejected（拒否済み）: 非同期処理が失敗し、エラーが発生した状態。rejectが呼ばれたときにこの状態になります。

状態の遷移

Promiseの状態は一度確定すると、それ以降変わることはありません。初期状態のPendingから、成功すればFulfilledに、失敗すればRejectedに遷移します。

let promise = new Promise((resolve, reject) => {
    let success = true; // 成功または失敗を決定する条件
    if (success) {
        resolve('成功の結果');
    } else {
        reject('エラーメッセージ');
    }
});

Promiseの状態を確認する方法

Promiseの状態は内部的に管理されており、直接確認する方法はありませんが、thenやcatchメソッドを使うことで、状態に応じた処理を行うことができます。

promise
    .then(result => {
        console.log('Fulfilled:', result); // "Fulfilled: 成功の結果"
    })
    .catch(error => {
        console.log('Rejected:', error); // "Rejected: エラーメッセージ"
    });

Promiseの状態管理の重要性

Promiseの状態を正しく管理することで、非同期処理の結果を適切にハンドリングできます。特に複数の非同期処理を組み合わせる場合、状態管理が重要となります。

let promise1 = new Promise((resolve) => setTimeout(() => resolve('結果1'), 1000));
let promise2 = new Promise((resolve) => setTimeout(() => resolve('結果2'), 2000));

Promise.all([promise1, promise2])
    .then(results => {
        console.log('All Fulfilled:', results); // 両方のPromiseが履行済み
    })
    .catch(error => {
        console.log('One Rejected:', error); // いずれかのPromiseが拒否済み
    });

このように、Promiseの状態を理解し、適切に管理することで、非同期処理を効率的に扱うことができます。

thenとcatchの使い方

Promiseを利用する際に重要なメソッドとして、thenとcatchがあります。これらのメソッドを正しく理解し、使用することで、非同期処理の結果を適切に処理し、エラーハンドリングを行うことができます。

thenメソッド

thenメソッドは、PromiseがFulfilled（履行済み）の状態になったときに呼び出されるコールバックを設定します。thenメソッドは、Promiseオブジェクトのインスタンスメソッドとして呼び出され、成功した結果を受け取ります。

let promise = new Promise((resolve, reject) => {
    resolve('成功の結果');
});

promise.then(result => {
    console.log(result); // "成功の結果"が表示される
});

thenメソッドのチェーン

thenメソッドは、新しいPromiseを返すため、複数のthenメソッドをチェーンで繋げることができます。これにより、非同期処理を順番に実行することができます。

let promise = new Promise((resolve, reject) => {
    resolve('データ');
});

promise
    .then(data => {
        return `${data}を処理中`;
    })
    .then(processedData => {
        console.log(processedData); // "データを処理中"が表示される
    });

catchメソッド

catchメソッドは、PromiseがRejected（拒否済み）の状態になったときに呼び出されるコールバックを設定します。エラーハンドリングのために使用され、Promiseチェーン内のどの部分でエラーが発生しても捕捉できます。

let promise = new Promise((resolve, reject) => {
    reject('エラーメッセージ');
});

promise.catch(error => {
    console.error(error); // "エラーメッセージ"が表示される
});

catchメソッドの位置

catchメソッドはPromiseチェーンの最後に置くことが一般的です。これにより、チェーン内のどのPromiseがエラーを投げても、最後のcatchがそれを捕捉します。

let promise = new Promise((resolve, reject) => {
    resolve('データ');
});

promise
    .then(data => {
        throw new Error('エラー発生');
    })
    .catch(error => {
        console.error(error); // "エラー発生"が表示される
    });

thenとcatchの組み合わせ

thenとcatchを組み合わせて使用することで、非同期処理の成功と失敗をバランスよく処理できます。

let promise = new Promise((resolve, reject) => {
    let success = true; // 成功または失敗を決定する条件
    if (success) {
        resolve('成功の結果');
    } else {
        reject('エラーメッセージ');
    }
});

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

このように、thenとcatchを適切に使用することで、非同期処理の結果を効率的に処理し、エラーハンドリングを行うことができます。

Promiseチェーン

Promiseチェーンは、複数の非同期処理を順番に実行し、その結果を次の処理に引き渡す方法です。これにより、非同期処理をシンプルかつ直感的に書けるようになります。

Promiseチェーンの基本

Promiseチェーンは、thenメソッドを連続して呼び出すことで構築されます。各thenメソッドは新しいPromiseを返すため、次のthenメソッドがその結果を受け取ることができます。

let promise = new Promise((resolve, reject) => {
    resolve('初期データ');
});

promise
    .then(data => {
        console.log(data); // "初期データ"
        return `${data} を処理中`;
    })
    .then(processedData => {
        console.log(processedData); // "初期データ を処理中"
        return `${processedData} 完了`;
    })
    .then(finalData => {
        console.log(finalData); // "初期データ を処理中 完了"
    });

非同期処理の連続実行

Promiseチェーンは、複数の非同期処理を順番に実行する際に非常に有用です。例えば、サーバーからデータを取得し、それを処理して表示する一連の操作を行う場合です。

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('データ');
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`${data} を処理しました`);
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log('取得:', data); // "取得: データ"
        return processData(data);
    })
    .then(processedData => {
        console.log('処理結果:', processedData); // "処理結果: データ を処理しました"
    });

エラーハンドリングとPromiseチェーン

Promiseチェーンでは、エラーハンドリングも重要です。catchメソッドをチェーンの最後に追加することで、チェーン内のどこかでエラーが発生した場合でも、適切に処理できます。

function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('データの取得に失敗');
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`${data} を処理しました`);
        }, 1000);
    });
}

fetchData()
    .then(data => {
        console.log('取得:', data);
        return processData(data);
    })
    .then(processedData => {
        console.log('処理結果:', processedData);
    })
    .catch(error => {
        console.error('エラー:', error); // "エラー: データの取得に失敗"
    });

Promise.allを用いた並列処理

Promiseチェーンに加えて、Promise.allを使用することで、複数のPromiseを並列に実行し、すべてのPromiseが解決するのを待つことができます。これは、複数の非同期操作を同時に行いたい場合に有効です。

let promise1 = new Promise((resolve) => setTimeout(() => resolve('結果1'), 1000));
let promise2 = new Promise((resolve) => setTimeout(() => resolve('結果2'), 2000));

Promise.all([promise1, promise2])
    .then(results => {
        console.log('全ての結果:', results); // "全ての結果: ['結果1', '結果2']"
    })
    .catch(error => {
        console.error('エラー:', error);
    });

このように、Promiseチェーンを活用することで、非同期処理を効率的に管理し、コードの可読性と保守性を向上させることができます。

async/awaitとの関係

JavaScriptのasync/awaitは、Promiseをさらに扱いやすくするための構文です。async/awaitを使用すると、非同期コードを同期コードのように書くことができ、Promiseチェーンの可読性を大幅に向上させます。

async関数

async関数は、Promiseを返す非同期関数を定義するための構文です。関数の前にasyncキーワードを付けることで、その関数がPromiseを返すことを明示します。

async function fetchData() {
    return 'データ';
}

fetchData().then(data => {
    console.log(data); // "データ"
});

awaitキーワード

awaitキーワードは、Promiseの完了を待つために使用します。awaitはasync関数の中でのみ使用でき、Promiseが解決されるまでコードの実行を一時停止します。

async function fetchData() {
    let data = await new Promise((resolve) => {
        setTimeout(() => {
            resolve('データ');
        }, 1000);
    });
    console.log(data); // "データ"
}

fetchData();

Promiseチェーンとasync/awaitの比較

async/awaitを使うことで、Promiseチェーンをより直感的に書けます。以下に、Promiseチェーンをasync/awaitで書き直した例を示します。

// Promiseチェーンを使用
function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('データ');
        }, 1000);
    });
}

function processData(data) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`${data} を処理しました`);
        }, 1000);
    });
}

fetchData()
    .then(data => processData(data))
    .then(processedData => {
        console.log(processedData); // "データ を処理しました"
    })
    .catch(error => {
        console.error(error);
    });

// async/awaitを使用
async function handleData() {
    try {
        let data = await fetchData();
        let processedData = await processData(data);
        console.log(processedData); // "データ を処理しました"
    } catch (error) {
        console.error(error);
    }
}

handleData();

エラーハンドリング

async/awaitを使用する場合、エラーハンドリングはtry...catch構文を使って行います。これにより、Promiseチェーンのcatchメソッドと同様に、非同期処理全体のエラーハンドリングが可能です。

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('データの取得に失敗');
        }, 1000);
    });
}

async function handleData() {
    try {
        let data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error('エラー:', error); // "エラー: データの取得に失敗"
    }
}

handleData();

利点

  • 可読性の向上: 非同期処理を同期処理のように書けるため、コードの可読性が向上します。
  • デバッグの容易さ: 同期処理に似た構造のため、デバッグが容易になります。
  • 一貫したエラーハンドリング: try...catchで一貫してエラーハンドリングができます。

このように、async/awaitを活用することで、非同期処理をより簡潔に、直感的に書くことができ、コードの品質を向上させることができます。

エラーハンドリング

非同期処理においてエラーハンドリングは非常に重要です。Promiseを使ったエラーハンドリングを正しく理解することで、コードの信頼性と保守性を大幅に向上させることができます。ここでは、Promiseとasync/awaitを使ったエラーハンドリングの方法を詳しく解説します。

Promiseのエラーハンドリング

Promiseでは、catchメソッドを使用してエラーハンドリングを行います。catchメソッドは、Promiseチェーンのどこかでエラーが発生した場合に呼び出されます。

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

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

catchメソッドの位置

catchメソッドは、Promiseチェーンの最後に配置するのが一般的です。これにより、チェーン内のどのPromiseがエラーを投げても、最後のcatchメソッドがそれを捕捉します。

let promise = new Promise((resolve, reject) => {
    resolve('データ');
});

promise
    .then(data => {
        throw new Error('処理中にエラー');
    })
    .catch(error => {
        console.error('エラー:', error.message); // "エラー: 処理中にエラー"
    });

async/awaitのエラーハンドリング

async/awaitを使用する場合、エラーハンドリングはtry...catch構文を用いて行います。これにより、非同期処理全体を一箇所で管理でき、エラーを一元的に処理できます。

async function fetchData() {
    throw new Error('データの取得に失敗しました');
}

async function handleData() {
    try {
        let data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error('エラー:', error.message); // "エラー: データの取得に失敗しました"
    }
}

handleData();

複数の非同期処理におけるエラーハンドリング

複数の非同期処理を連続して実行する場合でも、try...catch構文を使用してエラーを適切に処理できます。

async function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('データの取得に失敗');
        }, 1000);
    });
}

async function processData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('処理済みデータ');
        }, 1000);
    });
}

async function handleData() {
    try {
        let data = await fetchData();
        let processedData = await processData(data);
        console.log(processedData);
    } catch (error) {
        console.error('エラー:', error); // "エラー: データの取得に失敗"
    }
}

handleData();

finallyメソッド

Promiseには、finallyメソッドもあります。このメソッドは、PromiseがFulfilledまたはRejectedのどちらの状態になっても必ず実行される処理を定義するために使用します。

let promise = new Promise((resolve, reject) => {
    resolve('成功');
});

promise
    .then(result => {
        console.log(result); // "成功"
    })
    .catch(error => {
        console.error('エラー:', error);
    })
    .finally(() => {
        console.log('完了'); // "完了"が必ず表示される
    });

エラーハンドリングのベストプラクティス

  • エラーメッセージを明確にする: エラーメッセージは具体的でわかりやすいものにする。
  • エラーの再スロー: 必要に応じてエラーを再スローし、上位の処理で捕捉できるようにする。
  • 一貫したエラーハンドリング: コード全体で一貫した方法でエラーハンドリングを行う。

これらの方法を使うことで、非同期処理のエラーを適切に管理し、予期しないエラーによるアプリケーションのクラッシュを防ぐことができます。

実際の使用例

Promiseを用いた実際のコード例を通じて、Promiseがどのように非同期処理を管理し、コードの可読性と保守性を向上させるかを具体的に見ていきましょう。以下では、APIからデータを取得し、それを処理して表示するシナリオを例に説明します。

APIからデータを取得する

まず、fetchを使ってAPIからデータを取得する例を見てみましょう。この操作は非同期的に行われるため、Promiseを使って結果を処理します。

function fetchData(url) {
    return fetch(url)
        .then(response => {
            if (!response.ok) {
                throw new Error('ネットワーク応答に問題がありました');
            }
            return response.json();
        });
}

fetchData('https://api.example.com/data')
    .then(data => {
        console.log('取得したデータ:', data);
    })
    .catch(error => {
        console.error('エラー:', error);
    });

データの処理

取得したデータをさらに処理する場合もPromiseを使って行います。ここでは、データをフィルタリングし、必要な情報のみを抽出します。

function processData(data) {
    return new Promise((resolve) => {
        let processedData = data.filter(item => item.isActive);
        resolve(processedData);
    });
}

fetchData('https://api.example.com/data')
    .then(data => processData(data))
    .then(filteredData => {
        console.log('処理されたデータ:', filteredData);
    })
    .catch(error => {
        console.error('エラー:', error);
    });

表示処理

最終的に、処理されたデータを画面に表示する操作も非同期的に行います。

function displayData(data) {
    return new Promise((resolve) => {
        data.forEach(item => {
            console.log(`ID: ${item.id}, 名前: ${item.name}`);
        });
        resolve('表示完了');
    });
}

fetchData('https://api.example.com/data')
    .then(data => processData(data))
    .then(filteredData => displayData(filteredData))
    .then(message => {
        console.log(message); // "表示完了"
    })
    .catch(error => {
        console.error('エラー:', error);
    });

async/awaitを使った例

次に、上記のPromiseチェーンをasync/awaitを使って書き直してみましょう。これにより、コードがさらにシンプルで読みやすくなります。

async function handleData(url) {
    try {
        let response = await fetch(url);
        if (!response.ok) {
            throw new Error('ネットワーク応答に問題がありました');
        }
        let data = await response.json();
        let filteredData = data.filter(item => item.isActive);
        filteredData.forEach(item => {
            console.log(`ID: ${item.id}, 名前: ${item.name}`);
        });
        console.log('表示完了');
    } catch (error) {
        console.error('エラー:', error);
    }
}

handleData('https://api.example.com/data');

ポイントのまとめ

  • APIからのデータ取得: fetchを使って非同期的にデータを取得し、Promiseで結果を処理。
  • データの処理: Promiseを使ってデータをフィルタリングし、必要な情報を抽出。
  • データの表示: 処理されたデータを非同期的に表示し、Promiseまたはasync/awaitで処理を管理。

このように、Promiseとasync/awaitを活用することで、複雑な非同期処理をシンプルに書き、エラーハンドリングを含めたコードの品質を向上させることができます。

応用例

ここでは、Promiseを用いた高度な非同期処理の例をいくつか紹介します。これらの応用例を通じて、Promiseのさらなる可能性と有用性を理解しましょう。

複数の非同期操作の並列実行

Promise.allを使用して、複数の非同期操作を並列に実行し、すべての操作が完了するのを待つ方法です。例えば、複数のAPIからデータを同時に取得する場合に有用です。

let api1 = 'https://api.example.com/data1';
let api2 = 'https://api.example.com/data2';

function fetchData(url) {
    return fetch(url).then(response => {
        if (!response.ok) {
            throw new Error(`ネットワーク応答に問題がありました: ${url}`);
        }
        return response.json();
    });
}

Promise.all([fetchData(api1), fetchData(api2)])
    .then(results => {
        let [data1, data2] = results;
        console.log('API 1からのデータ:', data1);
        console.log('API 2からのデータ:', data2);
    })
    .catch(error => {
        console.error('エラー:', error);
    });

レースコンディションの処理

Promise.raceを使用すると、複数のPromiseの中で最初に完了したものの結果を取得できます。これは、タイムアウト処理などに有用です。

let slowPromise = new Promise((resolve) => {
    setTimeout(() => resolve('遅いPromiseが完了'), 3000);
});

let fastPromise = new Promise((resolve) => {
    setTimeout(() => resolve('速いPromiseが完了'), 1000);
});

Promise.race([slowPromise, fastPromise])
    .then(result => {
        console.log(result); // "速いPromiseが完了"
    })
    .catch(error => {
        console.error('エラー:', error);
    });

シーケンシャルな非同期処理

複数の非同期処理を順次実行し、それぞれの結果を次の処理に引き渡す方法です。これは、Promiseチェーンやasync/awaitで実現できます。

function fetchData(url) {
    return fetch(url).then(response => {
        if (!response.ok) {
            throw new Error('ネットワーク応答に問題がありました');
        }
        return response.json();
    });
}

async function handleDataSequentially() {
    try {
        let data1 = await fetchData('https://api.example.com/data1');
        console.log('データ1:', data1);

        let data2 = await fetchData('https://api.example.com/data2');
        console.log('データ2:', data2);

        let data3 = await fetchData('https://api.example.com/data3');
        console.log('データ3:', data3);
    } catch (error) {
        console.error('エラー:', error);
    }
}

handleDataSequentially();

リトライ機能の実装

Promiseを使って、一定回数リトライを試みる非同期処理を実装することができます。これは、ネットワークエラーが発生した場合などに有用です。

function fetchDataWithRetry(url, retries = 3) {
    return fetch(url).then(response => {
        if (!response.ok) {
            throw new Error('ネットワーク応答に問題がありました');
        }
        return response.json();
    }).catch(error => {
        if (retries > 1) {
            console.log(`リトライ残り回数: ${retries - 1}`);
            return fetchDataWithRetry(url, retries - 1);
        } else {
            throw error;
        }
    });
}

fetchDataWithRetry('https://api.example.com/data')
    .then(data => {
        console.log('取得したデータ:', data);
    })
    .catch(error => {
        console.error('エラー:', error);
    });

デバウンス処理の実装

デバウンス処理は、短時間に繰り返される関数呼び出しを制御するための手法です。これをPromiseを用いて実装することができます。

function debounce(func, delay) {
    let timeoutId;
    return function(...args) {
        if (timeoutId) {
            clearTimeout(timeoutId);
        }
        return new Promise((resolve) => {
            timeoutId = setTimeout(() => {
                resolve(func(...args));
            }, delay);
        });
    };
}

let fetchData = debounce((query) => {
    return fetch(`https://api.example.com/search?q=${query}`).then(response => {
        if (!response.ok) {
            throw new Error('ネットワーク応答に問題がありました');
        }
        return response.json();
    });
}, 300);

fetchData('example')
    .then(data => {
        console.log('検索結果:', data);
    })
    .catch(error => {
        console.error('エラー:', error);
    });

これらの応用例を通じて、Promiseがどれほど柔軟で強力なツールであるかを理解できたでしょう。実際のプロジェクトでも、Promiseを活用することで、非同期処理を効率的かつ効果的に管理できます。

練習問題

Promiseの理解を深めるために、いくつかの練習問題を用意しました。これらの問題を解くことで、Promiseを使った非同期処理の基礎から応用までをしっかりと習得できます。

問題1: 基本的なPromiseの作成

次の要件を満たすPromiseを作成してください：

  • 2秒後に"成功"というメッセージで解決されるPromise
function createPromise() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('成功');
        }, 2000);
    });
}

createPromise().then(message => {
    console.log(message); // "成功"
});

問題2: 非同期関数のチェーン

以下の2つの非同期関数をチェーンして実行してください：

  • fetchData1: 1秒後に"データ1"というメッセージで解決されるPromise
  • fetchData2: 2秒後に"データ2"というメッセージで解決されるPromise

チェーンで取得した結果をコンソールに出力してください。

function fetchData1() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('データ1');
        }, 1000);
    });
}

function fetchData2() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('データ2');
        }, 2000);
    });
}

fetchData1()
    .then(result1 => {
        console.log(result1); // "データ1"
        return fetchData2();
    })
    .then(result2 => {
        console.log(result2); // "データ2"
    });

問題3: エラーハンドリング

次の非同期関数fetchWithErrorを実行し、エラーが発生した場合に"エラーが発生しました"というメッセージをコンソールに出力してください：

function fetchWithError() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('取得失敗');
        }, 1000);
    });
}

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

問題4: async/awaitの利用

以下の関数fetchDataをasync/awaitを使って書き直し、取得したデータをコンソールに出力してください：

function fetchData() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('非同期データ');
        }, 1000);
    });
}

async function fetchDataAsync() {
    let data = await fetchData();
    console.log(data); // "非同期データ"
}

fetchDataAsync();

問題5: 複数の非同期操作の並列実行

Promise.allを使用して、以下の2つの非同期関数を並列に実行し、結果を配列で受け取ってコンソールに出力してください：

  • fetchData1: 1秒後に"データ1"というメッセージで解決されるPromise
  • fetchData2: 2秒後に"データ2"というメッセージで解決されるPromise
Promise.all([fetchData1(), fetchData2()])
    .then(results => {
        console.log(results); // ["データ1", "データ2"]
    })
    .catch(error => {
        console.error(error);
    });

問題6: タイムアウト処理の実装

Promise.raceを使って、以下の非同期関数のどちらか早く完了した方の結果をコンソールに出力してください：

  • slowPromise: 3秒後に"遅いPromiseが完了"というメッセージで解決されるPromise
  • fastPromise: 1秒後に"速いPromiseが完了"というメッセージで解決されるPromise
let slowPromise = new Promise((resolve) => {
    setTimeout(() => resolve('遅いPromiseが完了'), 3000);
});

let fastPromise = new Promise((resolve) => {
    setTimeout(() => resolve('速いPromiseが完了'), 1000);
});

Promise.race([slowPromise, fastPromise])
    .then(result => {
        console.log(result); // "速いPromiseが完了"
    })
    .catch(error => {
        console.error(error);
    });

これらの練習問題を通じて、Promiseを使った非同期処理の基本から応用までを実践的に学ぶことができます。問題を解いてみて、自分の理解度を確認してください。

まとめ

本記事では、JavaScriptにおけるPromiseの基本概念とその使い方について詳細に解説しました。Promiseを理解することで、非同期処理をより直感的に、そして効果的に管理できるようになります。

Promiseの基本構造や状態、thenやcatchメソッドの使い方を学び、Promiseチェーンやasync/awaitとの関係も詳しく説明しました。また、実際の使用例や高度な応用例、練習問題を通じて、Promiseの実践的な使い方を習得しました。

適切なエラーハンドリングや複数の非同期操作の管理、並列実行など、Promiseは多くの場面で有用です。これらの知識と技術を活用して、非同期処理をより効率的に、そして安全に実装してください。

この記事が、皆さんのJavaScriptにおける非同期処理の理解を深める一助となれば幸いです。

JavaScript
非同期処理 JavaScript Promise

コメント

コメントする

目次
  1. Promiseとは何か
    1. Promiseの目的
    2. Promiseの基本構造
  2. Promiseの構文
    1. Promiseの基本構文
    2. Promiseの使用例
    3. 実行の流れ
  3. 非同期処理とPromise
    1. 非同期処理の例
    2. コールバック地獄の例
    3. Promiseを使った非同期処理
    4. Promiseによる利点
  4. Promiseの状態
    1. Promiseの3つの状態
    2. 状態の遷移
    3. Promiseの状態を確認する方法
    4. Promiseの状態管理の重要性
  5. thenとcatchの使い方
    1. thenメソッド
    2. catchメソッド
    3. thenとcatchの組み合わせ
  6. Promiseチェーン
    1. Promiseチェーンの基本
    2. 非同期処理の連続実行
    3. エラーハンドリングとPromiseチェーン
    4. Promise.allを用いた並列処理
  7. async/awaitとの関係
    1. async関数
    2. awaitキーワード
    3. Promiseチェーンとasync/awaitの比較
    4. エラーハンドリング
    5. 利点
  8. エラーハンドリング
    1. Promiseのエラーハンドリング
    2. async/awaitのエラーハンドリング
    3. finallyメソッド
    4. エラーハンドリングのベストプラクティス
  9. 実際の使用例
    1. APIからデータを取得する
    2. データの処理
    3. 表示処理
    4. async/awaitを使った例
    5. ポイントのまとめ
  10. 応用例
    1. 複数の非同期操作の並列実行
    2. レースコンディションの処理
    3. シーケンシャルな非同期処理
    4. リトライ機能の実装
    5. デバウンス処理の実装
  11. 練習問題
    1. 問題1: 基本的なPromiseの作成
    2. 問題2: 非同期関数のチェーン
    3. 問題3: エラーハンドリング
    4. 問題4: async/awaitの利用
    5. 問題5: 複数の非同期操作の並列実行
    6. 問題6: タイムアウト処理の実装
  12. まとめ