【ITニュース解説】Promise полный гид для понятного кода

JavaScriptでプログラムを書く際、時間のかかる処理、例えばサーバーからデータを取得するような処理を待っている間、他の処理が止まってしまうとユーザー体験が悪化する。これを避けるために「非同期処理」という仕組みが用いられる。以前のJavaScriptでは、非同期処理を扱う主な方法は「コールバック関数」だった。これは、ある処理が終わった後に呼び出される関数を、引数として渡しておく手法である。しかし、非同期処理が複数連続すると、コールバック関数の中にさらにコールバック関数を記述する、という入れ子構造が深くなっていく。これは「コールバック地獄」と呼ばれ、コードが非常に読みにくく、メンテナンスも困難になるという大きな問題があった。この問題を解決するために登場したのがPromiseである。

Promiseは、非同期処理の最終的な結果を表すオブジェクトである。「Promise」という言葉が「約束」を意味するように、将来完了する処理の結果を「約束」し、その結果を後から受け取れるようにする仕組みだ。Promiseには3つの状態がある。一つ目はpending（待機中）で、これは処理がまだ完了していない初期状態である。処理が成功するとfulfilled（成功）状態に、失敗するとrejected（失敗）状態に移行する。この状態変化は一度きりであり、pendingからfulfilledかrejectedに変わると、それ以降状態が変化することはない。この特性により、処理の結果が不変であることが保証され、コードの予測可能性が高まる。

Promiseを作成するには、new Promise()という構文を使用する。その際、引数として非同期処理の本体となる「実行関数」を渡す。この実行関数は、resolveとrejectという2つの関数を引数に取る。非同期処理が成功した際にはresolve()を呼び出してPromiseをfulfilled状態にし、成功した結果の値を渡す。逆に処理が失敗した場合はreject()を呼び出してrejected状態にし、エラー情報を渡す。こうして作成されたPromiseオブジェクトの結果を扱うために、.then()、.catch()、.finally()というメソッドが用意されている。.then()はPromiseが成功した（fulfilled）場合に実行される処理を登録する。.catch()は失敗した（rejected）場合のエラー処理を登録する。.finally()は、成功・失敗にかかわらず、処理が完了した際に必ず実行したい処理を登録するために使用する。

Promiseの強力な特徴の一つに「チェーン（連鎖）」がある。.then()や.catch()メソッドは、それ自身が新しいPromiseオブジェクトを返す。この性質を利用することで、複数の非同期処理を数珠つなぎのように記述できる。例えば、最初のデータ取得が成功したら、その結果を使って次のデータを取得する、といった一連の処理を、コールバック地獄のような深いネスト構造なしに、平坦で直線的なコードとして書くことが可能になる。もしチェーンの途中でエラーが発生した場合、後続の.then()はスキップされ、最も近くにある.catch()に処理がジャンプする。これにより、一連の処理全体のエラーハンドリングを一つの.catch()でまとめて行うことができ、コードが簡潔になる。

また、複数の非同期処理を並行して実行し、それらの結果をまとめて扱いたい場合もある。そのためにPromiseには便利な静的メソッドが用意されている。例えばPromise.all()は、引数に渡された全てのPromiseが成功した場合にのみ、全体として成功となる。一つでも失敗すると、その時点で全体が失敗となるため、全ての処理が成功することが必須のケースで役立つ。一方、Promise.allSettled()は、個々のPromiseの成功・失敗にかかわらず、全ての処理が完了するのを待つ。これにより、一部の処理が失敗しても、成功した処理の結果は確実に受け取ることができる。

Promiseの概念をさらに発展させ、より直感的に非同期処理を記述できるようにしたのがasync/await構文である。これはPromiseを置き換えるものではなく、Promiseをより簡単に扱うための「糖衣構文（シンタックスシュガー）」と呼ばれるものである。関数の前にasyncキーワードを付けると、その関数は自動的にPromiseを返すようになる。そしてasync関数の中では、awaitキーワードを使ってPromiseの結果が返ってくるまで処理を待機させることができる。これにより、非同期処理のコードを、まるで上から下に順番に実行される同期処理のように記述できる。エラーハンドリングも、一般的なtry...catch構文で囲むだけでよいため、コードの可読性が劇的に向上する。

結論として、PromiseはJavaScriptにおける非同期処理の基礎となる重要な概念である。かつてのコールバック地獄の問題を解決し、コードを整理された読みやすいものに変えた。さらに、async/await構文の土台となっており、現代のWebアプリケーション開発においてPromiseを理解することは不可欠なスキルと言える。