Promise 使い方 JavaScript

Promiseの使い方 JavaScript：非同期処理をシンプルに！

「Promise 使い方 JavaScript」について、分かりやすく解説します。JavaScriptで非同期処理を行う際、Promiseは非常に強力なツールです。コールバック地獄を回避し、可読性と保守性を向上させるPromiseの使い方を、具体的な例を交えて説明します。

Promiseとは？ JavaScriptにおける非同期処理の救世主

JavaScriptはシングルスレッドで動作しているため、時間のかかる処理を実行すると、その間他の処理がブロックされてしまいます。この問題を解決するために、非同期処理を使用しますが、従来のコールバック関数では、コードが複雑化して「コールバック地獄」と呼ばれる状態に陥りがちです。これを解決するために登場したのがPromiseです。

Promiseは、非同期処理の結果を簡単に取り扱える方法を提供し、成功時と失敗時の処理を分かりやすく記述できるようにします。

基本的なPromiseの使い方：resolveとreject

Promiseは、resolveとrejectという2つの引数を持つ関数をコンストラクタに渡して作成します。

javascript
const myPromise = new Promise((resolve, reject) => {
  // 非同期処理
  const success = true;
  if (success) {
    resolve('成功時の値');
  } else {
    reject('失敗時の理由');
  }
});​

このコードでは、resolveは非同期処理が成功した場合に呼び出され、rejectは失敗した場合に呼び出されます。

thenメソッドで結果を受け取る

Promiseの結果は、thenメソッドを使って受け取ります。thenは、成功時に実行する処理と失敗時に実行する処理をそれぞれ指定できます。

javascript
myPromise.then(
  (value) => {
    console.log('成功:', value); // 成功時の処理
  },
  (reason) => {
    console.error('失敗:', reason); // 失敗時の処理
  }
);​

thenメソッドを使って、複数の非同期処理を繋げる

thenメソッドはPromiseを返すので、次々とthenをチェーンさせることができます。これにより、非同期処理を順番に実行できます。

javascript
function getNumber(num) {
  return new Promise((resolve, reject) => {
    if (num >= 3) {
      resolve(num + 3);
    } else {
      reject('数値が3未満です');
    }
  });
}

getNumber(3)
  .then((result) => {
    console.log(result); // 6
    return getNumber(result); // 次の非同期処理
  })
  .then((result) => {
    console.log(result); // 9
  })
  .catch((error) => {
    console.error(error); // エラー処理
  });​

このように、thenを使うことで、複数の非同期処理を順番に実行することができます。また、エラーが発生した場合はcatchメソッドで一括処理できます。

Promise.all：複数のPromiseを同時に実行

Promise.allメソッドを使うと、複数のPromiseを同時に実行し、すべての結果を配列として受け取ることができます。この方法は、複数の非同期処理を並行して実行したい場合に便利です。

javascript
const promise1 = Promise.resolve(3);
const promise2 = 42;
const promise3 = new Promise((resolve, reject) => {
  setTimeout(resolve, 100, 'foo');
});

Promise.all([promise1, promise2, promise3]).then((values) => {
  console.log(values); // [3, 42, "foo"]
});​

Promise.allは、全てのPromiseが成功した場合にその結果を配列として返します。もし1つでもPromiseが失敗すると、catchブロックでエラーが処理されます。

catchメソッドでエラーを処理する

catchメソッドは、Promiseチェーンの中で発生したエラーを一括で処理するために使います。非同期処理で発生したエラーを捕捉し、適切に処理することができます。

javascript
myPromise
  .then(() => {
    // 成功時の処理
  })
  .catch((error) => {
    console.error('エラー:', error); // 失敗時の処理
  });​

catchメソッドは、Promiseチェーンの途中でエラーが発生した場合でも、最後に一度だけエラーハンドリングを行うことができるため、コードがスッキリとします。

async/await：より簡潔な非同期処理

ES2017で導入されたasync/awaitは、Promiseを使った非同期処理をより直感的に、同期処理のように書くことができる構文です。async関数内でawaitを使うことで、非同期処理の完了を待つことができます。

javascript
async function example() {
  try {
    const result1 = await getNumber(3);
    console.log(result1); // 6
    const result2 = await getNumber(result1);
    console.log(result2); // 9
  } catch (error) {
    console.error('エラー:', error);
  }
}

example();

async/awaitを使うことで、非同期処理をより同期的に書けるため、コードの可読性が向上します。awaitはPromiseが解決されるまで待機し、解決後に結果を返します。

まとめ

Promiseは、JavaScriptにおける非同期処理をシンプルでわかりやすくする強力なツールです。then、catch、Promise.all、そしてasync/awaitを理解し活用することで、より効率的で保守性の高いコードを書くことができるようになります。

これらの機能を活用して、複雑な非同期処理を簡潔に管理し、可読性の高いコードを実現しましょう。

参考文献

FAQs

Promiseとは何ですか？
Promiseは非同期処理の結果を表すオブジェクトです。
Promiseのデフォルトの状態は何ですか？
Promiseのデフォルトの状態は「pending（保留中）」です。
Promiseをどのようにエラーハンドリングしますか？
Promiseはcatchメソッドを使用してエラーを処理します。

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