JavaScript | 非同期処理：Promise 基礎 – resolve の役割

JavaScript JavaScript
スポンサーリンク

まず「resolve」のイメージを一言で

resolve は、
「この Promise の非同期処理は“成功”で終わったよ、と確定させるスイッチ」
です。

そして同時に、

「成功した結果はこれだよ」

と、Promise の中に値をセットする役割 を持っています。

ここが重要です。
resolve は単なる「関数を呼ぶ」ではなく、
Promise の状態を pending → fulfilled（成功）に変え、その結果を then に渡す“ゴール判定ボタン”
だとイメージしてください。

new Promise と resolve の基本的な関係

Promise を「作る側」のコードの形

Promise を自分で作るときは、こう書きます。

const p = new Promise((resolve, reject) => {
  // ここで非同期処理を行い、
  // 成功したら resolve を呼ぶ
  // 失敗したら reject を呼ぶ
});
JavaScript

new Promise に渡しているこの関数（executor と呼ばれる）は、
2 つの引数 resolve, reject を受け取ります。

この 2 つは、Promise にとっての「終了ボタン」です。

resolve(value) を呼ぶ
→ 「成功した」と Promise に伝え、状態を fulfilled にする
→ その Promise にぶら下がった then に value が渡される

reject(error) を呼ぶ
→ 「失敗した」と Promise に伝え、状態を rejected にする
→ その Promise にぶら下がった catch に error が渡される

いちばんシンプルな resolve の例

const p = new Promise((resolve, reject) => {
  resolve(42); // すぐに成功させる
});

p.then((value) => {
  console.log("成功値:", value); // 42
});
JavaScript

ここで resolve(42) を呼んだ瞬間に、

Promise の状態：pending → fulfilled
Promise の結果値：42 に確定

となります。
その結果、.then のコールバックが呼ばれたとき、value として 42 が渡ってきます。

ここが重要です。
resolve は「成功状態にする」＋「成功の値をセットする」の 2 つを同時に行うボタン です。

resolve が「状態」をどう変えるか

pending → fulfilled への“片道切符”

Promise は作られたとき、必ず pending 状態です。

const p = new Promise((resolve, reject) => {
  // まだ pending
  setTimeout(() => {
    resolve("OK");
  }, 1000);
});
JavaScript

このコードでは、

Promise 作成直後：pending
1 秒後に resolve("OK") を呼ぶ：状態が fulfilled に変わり、値 “OK” がセットされる

という流れです。

一度 resolve（または reject）が呼ばれて状態が決まると、
その Promise の状態は二度と変わりません。

resolve と reject を両方呼んだらどうなるか

こんなコードを考えてみます。

const p = new Promise((resolve, reject) => {
  resolve("最初の成功");

  reject(new Error("後から失敗させようとしても…"));
});
JavaScript

ここで実際に有効なのは「最初の resolve」だけです。
resolve か reject のどちらかが一度呼ばれて状態が決まると、
以降に呼ばれた resolve / reject は無視されます。

ここが重要です。
resolve は「この Promise の最終結果を“成功で確定させる”一回限りのボタン」
だとイメージしてください。

resolve と then の関係（結果の受け渡し）

resolve が渡した値は then の第1引数に届く

resolve に渡した値は、その Promise に対する .then のコールバックの第 1 引数になります。

const p = new Promise((resolve) => {
  resolve("Hello");
});

p.then((msg) => {
  console.log(msg); // "Hello"
});
JavaScript

ここでは、

resolve("Hello")
→ Promise は fulfilled になり、「結果値 Hello」という状態になる
→ .then((msg) => { ... }) の msg に “Hello” が渡される

という流れです。

resolve に何も渡さなければ、undefined が渡ってきます。

resolve のタイミングと then 実行のタイミング

重要なポイントとして、resolve を「その場で」呼んでも、
.then のコールバックは「同期的には」実行されません。

const p = new Promise((resolve) => {
  resolve("OK");
});

console.log("A");

p.then((value) => {
  console.log("B:", value);
});

console.log("C");
JavaScript

出力順は、

A
C
B: OK

になります。

イメージとしては、

resolve("OK") で「この Promise は OK で確定した」とマーク
→ .then を呼んだとき、「この Promise はすでに fulfilled だ」と認識される
→ then のコールバックは「マイクロタスク」として予約され、現在の同期処理が終わったあとに実行

という動きです。

ここが重要です。
resolve は「今すぐ then を実行する」のではなく、「Promise の状態と値を確定させ、then が後からそれを“安全に”受け取れるようにする」役割 を持っています。

非同期処理を resolve で「Promise 化」するイメージ

setTimeout をラップする例

よくある練習として、setTimeout を Promise で包む関数を書いてみましょう。

function wait(ms) {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(); // ms ミリ秒後に成功
    }, ms);
  });
}

wait(1000).then(() => {
  console.log("1秒経ったよ");
});
JavaScript

流れはこうです。

wait(1000) を呼ぶ
→ 「1 秒後に resolve される Promise」を返す
.then で「1 秒後にやりたいこと」を登録する
1 秒後に resolve() が呼ばれる
→ Promise の状態が fulfilled に変わり、そのタイミングで then のコールバックが実行される

ここでの resolve の役割は、

時間のかかる処理（タイマー）が終わった瞬間に、「この Promise は成功したよ」という合図を出す

ことです。

値を渡すパターン

もちろん、時間が経ったあとに結果を渡すこともできます。

function fetchUserMock() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id: 1, name: "Taro" }); // ユーザー情報を成功として返す
    }, 1000);
  });
}

fetchUserMock().then((user) => {
  console.log("ユーザー取得:", user);
});
JavaScript

ここでは、

1 秒間「ネットワークっぽい待ち」をしてから
resolve({ id: 1, name: "Taro" }) を呼んでいる

というイメージです。

ここが重要です。
resolve は、「非同期処理が終わったときに、その結果を Promise という箱に渡すための唯一の入り口」 です。

Promise.resolve との違い（軽く整理）

Promise.resolve は「もう成功している Promise を作る」ショートカット

resolve という名前が2種類出てきてややこしいので、ここを整理しておきます。

一つ目に、new Promise((resolve, reject) => { ... }) の中で受け取る resolve（さっきまで説明してきたもの）。

二つ目に、Promise.resolve(value) という「クラスメソッド」としての resolve。

const p1 = new Promise((resolve) => {
  resolve(123);
});

const p2 = Promise.resolve(123);
JavaScript

この 2 つは、ほぼ同じ意味です。
どちらも「すでに成功している Promise（fulfilled の Promise）」を返します。

ただし役割の位置づけが違っていて、

new Promise の中の resolve
→ 「その Promise の状態を pending → fulfilled に変えるためのボタン」

Promise.resolve
→ 「最初から fulfilled な Promise を作るためのユーティリティ」

です。

初心者のうちは、

「Promise.resolve(value) は resolve 済みの Promise を手っ取り早く作るものなんだな」

くらいの理解で十分です。

初心者向け「resolve のポイント」を整理

最後に、resolve を理解するうえで押さえておきたいポイントをまとめます。

Promise は「非同期処理の結果が入る箱」で、最初は必ず pending 状態。

resolve(value) を呼ぶと、その Promise は fulfilled（成功）状態になり、「value」が結果として確定する。

このとき、一度 pending から fulfilled になったら、二度と別の状態には変わらない（片道切符）。

resolve に渡した値は .then((value) => { ... }) の value に渡ってくる。

resolve は「今すぐ then を実行する」のではなく、「Promise の状態と結果を確定させ、then が後から安全に受け取れるようにするボタン」。

自分で非同期処理を Promise 化するとき（setTimeout, 古いコールバック API など）は、「処理が成功で終わったタイミングで resolve を呼ぶ」という形になる。

ここが重要です。
resolve を「非同期処理の成功を Promise に知らせるためのゴールボタン」として捉えると、
Promise の動き全体が一気にイメージしやすくなります。

あとはぜひ、

setTimeout を使った簡単な Promise を自作して、
「いつ resolve を呼ぶか」「then に何が渡ってくるか」

を自分の手で確かめてみてください。
一度でも「お、こういうことか」と体感すると、resolve はもう怖くなくなります。

スポンサーリンク
タイトルとURLをコピーしました