JavaScriptのresolve()とは?Promiseの基礎から使い方まで徹底解説

JavaScriptのresolve関数による非同期処理の完了とデータの流れを表現した抽象的なビジュアル
JavaScriptのresolve()によって非同期処理が完了し、次の処理へ値が渡される流れをイメージしたアイキャッチビジュアル

JavaScriptの非同期処理において、resolve()は非常に重要な役割を持つ関数です。
Promiseを正しく理解するためには、このresolve()の動きを押さえることが欠かせません。

本記事では、resolve()の基本から実践的な使い方まで、初心者でも理解できるように丁寧に解説します。

resolve()とは何か

Promiseにおける役割

resolve()は、Promiseを「成功状態(fulfilled)」にするための関数です。

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

  • pending(保留中)
  • fulfilled(成功)
  • rejected(失敗)

resolve()が呼ばれると、Promiseは「成功」として処理され、.then()へ値が渡されます。

resolve()の基本構文

Promiseの中での使い方

// index.js
const promise = new Promise((resolve, reject) => {
  resolve("成功しました");
});

promise.then((value) => {
  console.log(value);
});

実行結果

成功しました

このように、resolve()に渡した値は.then()で受け取ることができます。

resolve()の流れを理解する

処理の順序

// index.js
const promise = new Promise((resolve, reject) => {
  console.log("処理開始");

  resolve("完了");

  console.log("resolveの後");
});

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

実行結果

処理開始
resolveの後
then: 完了

ポイント

  • resolve()は即時に状態を変更する
  • .then()は後から実行される(非同期的にキューに入る)

この挙動は非同期処理の理解において重要です。

resolve()に値を渡す意味

データの受け渡し

// index.js
const promise = new Promise((resolve, reject) => {
  const data = { name: "JavaScript", level: "basic" };
  resolve(data);
});

promise.then((value) => {
  console.log(value.name);
});

実行結果

JavaScript

resolve()は、非同期処理の結果を次の処理へ渡すための仕組みです。

resolve()とreject()の違い

成功と失敗の分岐

// index.js
const promise = new Promise((resolve, reject) => {
  const isSuccess = true;

  if (isSuccess) {
    resolve("成功");
  } else {
    reject("失敗");
  }
});

promise
  .then((value) => {
    console.log(value);
  })
  .catch((error) => {
    console.log(error);
  });

ポイント

  • resolve() → 成功時の処理へ
  • reject() → エラー処理へ

詳細は以下の記事で整理すると理解が深まります。
👉 JavaScriptのtry/catchとは?エラー処理の基本を解説

Promise.resolve()との違い

静的メソッドとの比較

resolve()には2種類あります。

  1. コンストラクタ内のresolve
  2. Promise.resolve()
// index.js
const promise = Promise.resolve("即時成功");

promise.then((value) => {
  console.log(value);
});

実行結果

即時成功

違いのまとめ

種類役割
resolve(関数)Promiseの中で成功を通知
Promise.resolve即座に成功状態のPromiseを作成

resolve()のよくある注意点

resolveの後の処理

// index.js
new Promise((resolve, reject) => {
  resolve("完了");
  console.log("この処理も実行される");
});

resolve()を書いた後でも、その下のコードは実行されます。

複数回呼んでも意味はない

// index.js
new Promise((resolve, reject) => {
  resolve("1回目");
  resolve("2回目");
}).then((value) => {
  console.log(value);
});

実行結果

1回目

最初の1回だけが有効になります。

非同期処理と組み合わせる

// index.js
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("3秒後に成功");
  }, 3000);
});

promise.then((value) => {
  console.log(value);
});

resolve()は非同期処理の完了タイミングで使うことが多いです。

resolve()とthen()の関係

値がチェーンされる仕組み

// index.js
Promise.resolve(1)
  .then((value) => {
    return value + 1;
  })
  .then((value) => {
    return value + 1;
  })
  .then((value) => {
    console.log(value);
  });

実行結果

3

resolve()で渡された値は、.then()を通して次々と処理されます。

詳細は以下の記事で解説しています。
👉 JavaScriptのthenとは?Promiseチェーンの基本

resolve()はいつ使うのか

主な用途

  • 非同期処理の完了通知
  • API通信の成功結果を返す
  • 処理結果を次に渡す

例:擬似API処理

// index.js
function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("データ取得成功");
    }, 1000);
  });
}

fetchData().then((result) => {
  console.log(result);
});

async/awaitとの関係

resolveはreturnと同じ役割

// index.js
async function sample() {
  return "成功";
}

sample().then((value) => {
  console.log(value);
});

実行結果

成功

async関数のreturnは、内部的にresolve()と同じ働きをします。

まとめ

  • resolve()はPromiseを成功状態にする関数
  • 値は.then()に渡される
  • 非同期処理の完了を通知するために使う
  • Promise.resolve()は即時に成功するPromiseを作る

関連記事