javascript promise わかりやすく

JavaScript Promise わかりやすく解説：非同期処理をマスターしよう

「JavaScript Promise わかりやすく」理解したいあなたのために、Promiseの基本から応用までを丁寧に解説します。Promiseは、JavaScriptで非同期処理を扱うための強力なツールです。コールバック地獄を回避し、コードをシンプルで読みやすく保つために、Promiseの仕組みと使い方をマスターしましょう。

Promiseの基本：非同期処理の結果を表現する

Promiseオブジェクトは、これから行われる非同期処理の結果を表すものです。非同期処理とは、処理の完了を待たずに次の処理に進むことができる仕組みです。例えば、サーバーからデータを取得する処理は時間がかかるため、非同期処理で行われます。Promiseを使うことで、この非同期処理の結果（成功または失敗）とその値を受け取ることができます。

以下はPromiseを使った簡単な例です。

javascript
const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("非同期処理成功！");
  }, 1000);
});

myPromise.then((result) => {
  console.log(result);  // 1秒後に「非同期処理成功！」と表示される
});​

この例では、resolve()が呼ばれ、Promiseが「成功」の状態になります。Promiseが成功した結果をthen()メソッドで受け取っています。

Promiseの状態：待機、成功、失敗

Promiseには、以下の3つの状態があります。

  • pending（待機中）: 非同期処理が実行中で、まだ結果が出ていない状態。
  • fulfilled（成功）: 非同期処理が成功し、結果が得られた状態。
  • rejected（失敗）: 非同期処理が失敗した状態。

これらの状態に基づいて、Promiseはその後の処理を実行します。状態が変わると、それに応じてthen()、catch()、finally()などのメソッドが呼ばれます。

Promiseの使い方：then、catch、finally

Promiseには、状態変化に応じて処理を実行するためのメソッドが用意されています。

then()

then()メソッドは、Promiseが成功した場合（fulfilled）に実行される処理を記述します。resolve()関数に渡された値が、then()メソッドのコールバック関数に渡されます。

javascript
const promise = new Promise((resolve) => {
  setTimeout(() => {
    resolve("データ取得成功！");
  }, 1000);
});

promise.then((result) => {
  console.log(result); // "データ取得成功！"
});​

このように、Promiseが解決された結果をthen()内で利用できます。

catch()

catch()メソッドは、Promiseが失敗した場合（rejected）に実行される処理を記述します。reject()関数に渡された理由（エラーメッセージなど）が、catch()メソッドのコールバック関数に渡されます。

javascript
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("データ取得失敗！");
  }, 1000);
});

promise.catch((error) => {
  console.error("エラー:", error); // "エラー: データ取得失敗！"
});​

失敗時のエラーハンドリングは、catch()メソッドで行います。

finally()

finally()メソッドは、非同期処理の成功・失敗に関わらず、必ず最後に実行される処理を記述します。処理が成功しても失敗しても、最後に必ず実行したい後処理を記述するのに使います。

javascript
promise.finally(() => {
  console.log("処理が完了しました。");
});​

finally()は、例えばリソースの解放やローディング表示の解除など、終了後に必ず実行する処理に適しています。

Promiseチェーン：複数の非同期処理を繋げる

then()メソッドはPromiseオブジェクトを返すため、メソッドチェーンを使って複数の非同期処理を繋げることができます。これにより、非同期処理を直列に実行することが可能です。

javascript
const fetchData = new Promise((resolve) => {
  setTimeout(() => {
    resolve("データ取得成功");
  }, 1000);
});

fetchData
  .then((result) => {
    console.log(result); // "データ取得成功"
    return "次の処理へ";
  })
  .then((nextResult) => {
    console.log(nextResult); // "次の処理へ"
  });​

このように、then()メソッドを続けて書くことで、複数の非同期処理を順番に実行できます。

Promise.all(): 複数のPromiseを同時に処理する

Promise.all()メソッドを使うと、複数のPromiseを同時に実行し、すべての処理が完了した後に結果を取得できます。すべてのPromiseが成功した場合に、その結果が配列として返されます。

javascript
const promise1 = new Promise((resolve) => setTimeout(() => resolve("成功1"), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve("成功2"), 1500));
const promise3 = new Promise((resolve) => setTimeout(() => resolve("成功3"), 500));

Promise.all([promise1, promise2, promise3]).then((results) => {
  console.log(results); // ["成功1", "成功2", "成功3"]
});​

Promise.all()を使うと、複数の非同期処理を同時に実行し、すべてが終了したタイミングで結果を取得できます。

Promise.race(): 最速のPromiseの結果を取得する

Promise.race()メソッドは、複数のPromiseのうち、最初に完了したPromiseの結果を取得します。最初にfulfilledまたはrejectedになったPromiseが返されます。

javascript
const promise1 = new Promise((resolve) => setTimeout(() => resolve("最初の成功"), 1000));
const promise2 = new Promise((resolve) => setTimeout(() => resolve("遅い成功"), 1500));

Promise.race([promise1, promise2]).then((result) => {
  console.log(result); // "最初の成功"
});​

Promise.race()は、最速の結果を取得したい場合に非常に便利です。

async/await：Promiseをよりシンプルに扱う

async/awaitを使うことで、Promiseを使った非同期処理を同期処理のように書くことができます。これにより、非同期コードがより直感的で読みやすくなります。

javascript
async function fetchData() {
  const result = await new Promise((resolve) => setTimeout(() => resolve("データ取得完了"), 1000));
  console.log(result); // "データ取得完了"
}

fetchData();​

awaitは、Promiseが解決されるまで待機し、その結果を返します。これにより、非同期処理をまるで同期処理のように扱えます。

まとめ：Promiseで非同期処理をマスター！

Promiseは、JavaScriptで非同期処理を扱う上で非常に重要な概念です。この記事で解説した内容を理解し、then、catch、finally、Promise.all、Promise.race、そしてasync/awaitを使いこなせるようになれば、非同期処理をマスターし、より高度なJavaScriptプログラミングができるようになります。

参考文献

より詳細な情報は、以下のリンクをご覧ください：

関連するQ&A

Q1: Promiseはどのようにエラーを処理しますか？
A1: `catch`メソッドを使用することで、Promiseのエラーを捕捉し処理することができます。
Q2: Promise.allとは何ですか？
A2: `Promise.all`は、複数のPromiseを同時に処理し、すべてのPromiseが成功したときに結果を取得できるメソッドです。
Q3: async/awaitを使用する利点は何ですか？
A3: `async/await`を使用することで、Promiseの使い方が直感的になり、非同期コードを同期的に記述したように見せることができます。

その他の参考記事:promise 使い方