Promise

概要（サマリー）

Promiseとは、JavaScriptで非同期処理の完了や失敗を扱うためのオブジェクトのことである。

「すぐには結果が返ってこない処理の予約票」のようなものだ。通信、ファイル読み込み、タイマーなど、時間がかかる処理の結果をあとから受け取るために使われる。

たとえばfetchでAPIからデータを取るとき、返ってくる値はPromiseとして扱われる。

詳細解説

Promiseは未来の結果を表す

通常の処理は、上から順に実行され、すぐに結果が返る。しかし、API通信のように時間がかかる処理では、結果が返るまで画面全体を止めて待つわけにはいかない。

Promiseは、このような「あとで成功するかもしれないし、失敗するかもしれない処理」を表す仕組みである。

Promiseには大きく次の状態がある。

• pending: まだ結果が出ていない
• fulfilled: 成功した
• rejected: 失敗した

thenとcatch

Promiseでは、成功したときの処理を .then()、失敗したときの処理を .catch() に書く。

fetch('https://api.example.com/users')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

この例では、API通信が成功したらデータを表示し、失敗したらエラーを表示している。.catch() を書くことは、基本的なエラーハンドリングである。

async/awaitとの関係

Promiseは、async/await と一緒に説明されることが多い。

async function loadUsers() {
  try {
    const response = await fetch('https://api.example.com/users');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

await はPromiseの結果が返るまで待つための書き方である。中身はPromiseだが、見た目は上から順に読むコードに近くなる。

AIコーディングとPromiseの関係

AIにJavaScriptでAPI通信を書かせると、Promise、then、catch、async/awaitのどれかが出てくることが多い。

初心者がつまずきやすいのは、「Promiseの中身を取り出す前に使おうとする」ことだ。AIに相談するときは、「このPromiseから実際のデータを取り出す書き方に直してください」と聞くと、await や .then() を使った形に修正してもらいやすい。

よくある勘違い

Promiseは非同期処理そのもの？

Promiseは非同期処理の結果を扱うためのオブジェクトである。非同期処理そのものではなく、結果の受け取り方を整理する仕組みと考えるとよい。

awaitを書けばどこでも使える？

await は基本的に async が付いた関数の中で使う。トップレベルで使える環境もあるが、すべての場所で自由に書けるわけではない。

Promiseの中身はそのまますぐ使える？

そのままでは使えないことが多い。Promiseは「あとで結果が返る処理」を表しているため、実際のデータを使うには .then() で受け取るか、await で結果を待つ必要がある。

より詳しくAIに聞いてみよう

• JavaScriptのPromiseとは何か、初心者向けに説明してください。
• then/catchとasync/awaitの違いを、同じコード例で比較してください。
• fetchがPromiseを返すとはどういう意味か教えてください。
• Promiseのpending、fulfilled、rejectedの違いを初心者向けに説明してください。
• AIが生成したPromiseやasync/awaitのコードで確認すべきポイントを教えてください。