【実践】JavaScript Promiseの理解・実践が10倍高速化する記事

JavaScript Promiseの使い方 JS
この記事は約7分で読めます。

【サイト内のコードはご自由に個人利用・商用利用いただけます】

この記事では、プログラムの基礎知識を前提に話を進めています。

説明のためのコードや、サンプルコードもありますので、もちろん初心者でも理解できるように表現してあります。

基本的な知識があればサンプルコードを活用して機能追加、目的を達成できるように作ってあります。

※この記事は、一般的にプロフェッショナルの指標とされる『実務経験10,000時間以上』を凌駕する現役のプログラマチームによって監修されています。

サイト内のコードを共有する場合は、参照元として引用して下さいますと幸いです

※Japanシーモアは、常に解説内容のわかりやすさや記事の品質に注力しております。不具合、分かりにくい説明や不適切な表現、動かないコードなど気になることがございましたら、記事の品質向上の為にお問い合わせフォームにてご共有いただけますと幸いです。
(送信された情報は、プライバシーポリシーのもと、厳正に取扱い、処分させていただきます。)

はじめに

この記事を読めば、JavaScript Promiseの理解・実践が10倍速くなることができます。

JavaScriptの非同期処理に悩む初心者の方に向けて、Promiseの基本から応用例、注意点やカスタマイズ方法までを徹底解説していきます。

豊富なサンプルコードも用意していますので、実際に手を動かしながら学んでいきましょう。

●JavaScript Promiseとは

JavaScript Promiseは、非同期処理の結果を表すオブジェクトです。

Promiseは処理が完了するまで待機し、その結果を次の処理に渡すことができます。

これにより、コードの見通しが良くなり、エラーハンドリングも容易になります。

○Promiseの基本

Promiseは、主に次の3つの状態を持ちます。

  1. pending(未解決): 非同期処理が終わっていない状態
  2. fulfilled(解決済み): 非同期処理が成功し、結果が得られた状態
  3. rejected(拒否済み): 非同期処理が失敗し、エラーが発生した状態

Promiseオブジェクトは、new Promiseで作成され、引数にresolverejectの2つの関数を持ちます。

非同期処理が成功した場合はresolve関数を、失敗した場合はreject関数を呼び出します。

●Promiseの使い方

Promiseの基本的な使い方を、サンプルコードを交えながら解説します。

○サンプルコード1:基本的なPromiseの作成

このコードでは、非同期処理を行うasyncFunction関数を作成しています。

この例では、1秒後にresolve関数を呼び出して、処理が成功したことを表しています。

const asyncFunction = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('成功!');
    }, 1000);
  });
};

asyncFunction().then((result) => {
  console.log(result); // "成功!"と表示される
});

○サンプルコード2:Promiseチェーンを使った処理の連結

このコードでは、Promiseチェーンを利用して複数の非同期処理を順番に実行しています。

この例では、asyncFunctionを2回実行し、各結果を順にコンソールに表示しています。

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

○サンプルコード3:Promise.allを使った並列処理

このコードでは、Promise.allを使って複数の非同期処理を並列に実行する方法を紹介しています。

この例では、asyncFunctionを3回同時に実行し、すべての処理が完了したらその結果を表示しています。

Promise.all([asyncFunction(), asyncFunction(), asyncFunction()])
  .then((results) => {
    console.log(results); // ["成功!", "成功!", "成功!"]
  });

●Promiseの応用例

さらに複雑な非同期処理の例を見ていきましょう。

○サンプルコード4:非同期処理をキャンセルする

このコードでは、非同期処理を途中でキャンセルする方法を紹介しています。

この例では、setTimeoutで実行される処理をclearTimeoutでキャンセルしています。

const asyncFunctionWithCancel = (cancelToken) => {
  return new Promise((resolve, reject) => {
    const timer = setTimeout(() => {
      resolve('成功!');
    }, 1000);

    cancelToken.cancel = () => {
      clearTimeout(timer);
      reject('キャンセルされました。');
    };
  });
};

const cancelToken = {};
const promise = asyncFunctionWithCancel(cancelToken);

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

setTimeout(() => {
  cancelToken.cancel();
}, 500);

○サンプルコード5:APIからデータを取得する

このコードでは、fetch関数を使ってAPIからデータを取得する例を紹介しています。

この例では、JSON形式のデータを取得し、その内容を表示しています。

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('エラーが発生しました:', error);
  });

○サンプルコード6:タイムアウトを設定する

このコードでは、非同期処理にタイムアウトを設定する方法を紹介しています。

この例では、非同期処理が一定時間内に完了しなかった場合、エラーを表示しています。

const asyncFunctionWithTimeout = (timeout) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('成功!');
    }, 2000);

    setTimeout(() => {
      reject('タイムアウトエラー');
    }, timeout);
  });
};

asyncFunctionWithTimeout(1000)
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error); // "タイムアウトエラー"が表示される
  });

●注意点と対処法

Promiseのエラー処理やリジェクト時の注意点について説明します。

○Promiseのエラー処理

Promiseでエラーが発生した場合、catchメソッドを使ってエラー処理を行うことができます。

次のサンプルコードでは、reject関数を呼び出してエラーを発生させ、catchメソッドでエラーを捕捉しています。

const asyncFunctionWithError = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('エラーが発生しました。');
    }, 1000);
  });
};

asyncFunctionWithError()
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error); // "エラーが発生しました。"が表示される
  });

○Promiseのリジェクト時の注意点

Promiseがリジェクトされると、それ以降のthenメソッドは実行されません。

しかし、catchメソッドの後にthenメソッドを記述すると、エラー処理後に再び処理を続行することができます。

●カスタマイズ方法

Promiseの拡張方法やライブラリの活用について紹介します。

○Promiseを拡張して使う

Promiseオブジェクトを継承して、独自の機能を追加することができます。

これにより、プロジェクトで共通する処理を簡潔に記述できます。

○Promiseライブラリの活用

Promiseの機能をさらに拡張するライブラリがいくつか存在します。

例えば、「bluebird」は、より高度なエラーハンドリングやタイムアウト設定などの機能を提供しています。

まとめ

この記事では、JavaScript Promiseの基本から応用までを解説しました。

Promiseの理解と活用により、非同期処理を含むコードの品質を向上させることができます。

今後も、Promiseを拡張して使ったり、ライブラリを活用することで、さらに効率的なコーディングが可能となるでしょう。