お問い合わせ
お問い合わせ
ホーム > JavaScript > JavaScriptのthenとは？Promiseの基本と使い方をわかりやすく解説

JavaScriptのthenとは？Promiseの基本と使い方をわかりやすく解説

JavaScript
JavaScriptのthenによる非同期処理の流れを表現した抽象的なイメージ
JavaScriptのthenを使った非同期処理のつながりやデータの流れを視覚的に表現したアイキャッチ画像

JavaScriptで非同期処理を扱う際に欠かせないのが「Promise」と「then」です。
とくにthenは、非同期処理の結果を受け取って次の処理へつなげる重要な役割を持っています。

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

thenとは何か

thenは、Promiseが「成功したとき」に実行される処理を登録するためのメソッドです。

Promiseは、非同期処理の結果を表すオブジェクトであり、次の3つの状態を持ちます。

  • pending（処理中）
  • fulfilled（成功）
  • rejected（失敗）

thenは、このうち「fulfilled（成功）」のときに呼び出されます。

Promiseの基本（復習）

thenを理解するには、Promiseの基本を押さえることが重要です。

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("成功しました");
  }, 1000);
});

このコードでは、1秒後に「成功しました」という結果が返されます。

Promiseについて詳しくは以下の記事で解説しています。
👉 JavaScriptの非同期処理とは？Promiseとasync/awaitの基礎

thenの基本的な使い方

thenは、Promiseの結果を受け取って処理を行います。

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

実行結果：

成功しました

resolveで渡された値が、thenの引数として受け取られます。

thenはチェーンできる

thenは複数つなげて書くことができます（チェーン）。

const promise = new Promise((resolve) => {
  resolve(1);
});

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

実行結果：

3

ポイント

  • thenの戻り値は新しいPromiseになる
  • returnした値は次のthenに渡される

thenで非同期処理をつなぐ

thenは非同期処理を順番に実行するのに適しています。

function step1() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("ステップ1完了");
    }, 1000);
  });
}

function step2() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve("ステップ2完了");
    }, 1000);
  });
}

step1()
  .then((result) => {
    console.log(result);
    return step2();
  })
  .then((result) => {
    console.log(result);
  });

実行結果：

ステップ1完了
ステップ2完了

thenとcatchの違い

thenは成功時、catchは失敗時の処理を担当します。

const promise = new Promise((resolve, reject) => {
  reject("エラーが発生しました");
});

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

実行結果：

エラーが発生しました

thenの第2引数（あまり使われない）

thenには第2引数としてエラー処理を書くこともできます。

promise.then(
  (result) => {
    console.log(result);
  },
  (error) => {
    console.log(error);
  }
);

ただし、可読性の観点からcatchを使う方が一般的です。

async/awaitとの違い

thenはPromiseをそのまま扱う方法、async/awaitはより直感的に書く方法です。

const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("成功しました");
  }, 1000);
});

async function main() {
  const result = await promise;
  console.log(result);
}

main();

thenとasync/awaitの違いについては以下の記事で詳しく解説しています。
👉 JavaScriptの非同期処理とは？Promiseとasync/awaitの基礎

よくある注意点

returnを書き忘れる

const promise = new Promise((resolve) => {
  resolve(1);
});

promise
  .then((value) => {
    value + 1; // returnがない
  })
  .then((value) => {
    console.log(value); // undefinedになる
  });

正しい書き方

const promise = new Promise((resolve) => {
  resolve(1);
});

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

thenを使うメリット

  • 非同期処理を順序立てて書ける
  • コールバック地獄を防げる
  • エラー処理を一元管理できる

コールバックとの違いについては以下の記事も参考になります。
👉 JavaScriptのコールバック関数とは？基本から解説

まとめ

  • thenはPromiseの成功時に実行されるメソッド
  • 戻り値は次のthenに渡される
  • チェーンによって処理を順番に書ける
  • エラー処理はcatchを使うのが一般的

thenはJavaScriptの非同期処理の基礎であり、理解しておくことで実務でのコードの可読性や保守性が大きく向上します。

関連記事