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

はじめに
●JavaScript Promiseとは
- ○Promiseの基本
●Promiseの使い方
●Promiseの応用例
●注意点と対処法
- ○Promiseのエラー処理
- ○Promiseのリジェクト時の注意点
●カスタマイズ方法
- ○Promiseを拡張して使う
- ○Promiseライブラリの活用
まとめ

はじめに

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

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

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

●JavaScript Promiseとは

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

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

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

○Promiseの基本

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

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

Promiseオブジェクトは、new Promiseで作成され、引数にresolveとrejectの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); // "エラーが発生しました。"が表示される
  });