JavaScriptのPromiseについて分かりやすく解説

2024年7月7日

JavaScriptは、非同期処理を扱うためのいくつかの方法を提供しています。

その中でも、Promiseは非同期処理を簡潔に書くための非常に強力なツールです。

非同期処理とは、処理が完了するのを待たずに次の処理に進むことを指します。

例えば、サーバーからデータを取得する際などに使われます。

本記事では、Promiseの基本的な使い方とその概念を初心者向けに分かりやすく解説します。

Promiseとは？

Promiseは、将来のある時点で完了するか失敗することが保証されている処理を表現するオブジェクトです。

Promiseは以下の3つの状態を持ちます。

Pending（保留中）：初期状態。まだ結果が得られていない。
Fulfilled（成功）：処理が成功し、結果が得られた状態。
Rejected（失敗）：処理が失敗し、エラーが発生した状態。

Promiseの基本構文

Promiseはnew Promiseコンストラクタを使って作成されます。このコンストラクタは、resolveとrejectという2つの引数を持つ関数を引数に取ります。

let promise = new Promise(function(resolve, reject) {
    // 非同期処理をここに書く
    let success = true;

    if (success) {
        resolve("The operation was successful!");
    } else {
        reject("There was an error.");
    }
});

thenとcatchメソッド

Promiseの結果を処理するために、thenとcatchメソッドを使用します。

thenはPromiseが成功した場合に実行され、catchはPromiseが失敗した場合に実行されます。

promise.then(function(result) {
    console.log(result); // "The operation was successful!" が表示される
}).catch(function(error) {
    console.log(error); // エラーが発生した場合にエラーメッセージが表示される
});

実際の非同期処理の例

サーバーからデータを取得する際などにPromiseを使うことが一般的です。

以下は、fetch APIを使用してデータを取得する例です。

fetch('https://jsonplaceholder.typicode.com/posts/1')
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('Error:', error);
    });

上記で一体何をしているのか順番に解説します。

まずfetchは、指定したURLからデータを取得する非同期関数で、Promiseを返します。
response.json()は、取得したデータをJSON形式に変換するPromiseを返します。
最初のthenブロックでデータが取得され、JSONに変換された結果を受け取ります。
2つ目のthenブロックで、変換されたデータをコンソールに表示します。
catchブロックで、エラーが発生した場合にエラーメッセージを表示します。

Promiseのチェーン（Promiseを次々つなげる）

Promiseはチェーンすることができ、複数の非同期処理を順番に実行できます。

「チェーン」とは鎖(chain)という意味があり、複数の非同期処理を順番に実行することです。

カードゲームとかで効果をチェーンさせるとか言いますよね、アレと同じ感じです。

new Promise(function(resolve, reject) {
    setTimeout(() => resolve(1), 1000);
}).then(function(result) {
    console.log(result); // 1
    return result * 2;
}).then(function(result) {
    console.log(result); // 2
    return result * 2;
}).then(function(result) {
    console.log(result); // 4
});

上記のコードでは下記のような事を行っています。

最初のPromiseが1秒後に1を返します。
最初のthenブロックで結果を2倍して次のthenに渡します。
次のthenブロックでさらに結果を2倍し、それを次のthenに渡しています。

Promiseのチェーンってどういう時に使うの？

Promiseのチェーンは、複数の非同期処理を順次実行したいときや、

前の処理の結果を次の処理に渡したいときに使います。

たとえば具体的には以下のようなケースで役立ちます。

APIからデータを取得し、そのデータを元にさらに別のAPIを呼び出す場合

fetch('https://api.example.com/user/1')
    .then(response => response.json())
    .then(user => {
        console.log('User:', user);
        return fetch(`https://api.example.com/posts?userId=${user.id}`);
    })
    .then(response => response.json())
    .then(posts => {
        console.log('Posts:', posts);
    })
    .catch(error => {
        console.error('Error:', error);
    });

上記では何をしているかというと、

最初にユーザーデータを取得し、
ユーザーデータを取得できたら、そのユーザーに関連する投稿データを取得。
各非同期処理が完了したら次の処理を実行しています。
ちなみにいずれかのPromiseが失敗した場合、catchブロックでエラーを処理しています。

こんな場合にPromiseのチェーンは使われるわけですね。