進化するPromise ［JS Modern Features］

導入：Promise、まだそんな使い方してるんですか？

JavaScript開発者の皆さん、Promiseオブジェクト、毎日使ってますよね？ でも、もしかしたら、Promiseのポテンシャルを最大限に引き出せていないかもしれません。非同期処理の基本形としてPromiseは今や欠かせないものですが、ES2017以降、`async/await`や`Promise.allSettled`など、Promiseをより強力かつ安全に扱うための機能が次々と登場しています。今回は、現場で10年以上JavaScriptと格闘してきたリードエンジニアの私が、Promiseの進化と、その実践的な活用方法を徹底解説します。私は大規模なSPA（シングルページアプリケーション）の開発において、Promiseを駆使して複雑な非同期処理を実装し、パフォーマンス改善にも貢献してきました。具体的には、ReactとReduxを使用したプロジェクトで、APIからのデータ取得をPromiseで効率化し、ユーザー体験を大幅に向上させました。また、Node.jsのバックエンド開発においては、Promiseを使用してデータベースアクセスを非同期化し、スケーラビリティの高いシステムを構築しました。この記事では、これらの経験から得られた知見も共有し、あなたのPromiseスキルを間違いなくレベルアップさせます。

Promiseの登場は、JavaScriptにおける非同期処理のパラダイムシフトでした。コールバック地獄からの解放、可読性の向上、そしてエラーハンドリングの一元化。しかし、Promiseは単なる構文上の改善ではありません。それは、非同期処理を「値」として扱うという、より抽象的な概念の導入でした。この概念を理解することは、Promiseをより深く理解し、使いこなすための鍵となります。Promiseは、未来の値を表現する「プレースホルダー」のようなものです。非同期処理が完了するまで、その値は確定しませんが、Promiseオブジェクトを通じて、その値を利用するための準備をすることができます。この考え方は、関数型プログラミングにおけるモナドの概念に通じるものがあり、より高度な非同期処理のパターンを理解するための基礎となります。

結論：Promiseマスターへの道

この記事では、Promiseの基本的な使い方から、最新のモダンな機能、そして現場で遭遇するであろうアンチパターンとその解決策までを網羅的に解説します。具体的には、以下の内容を習得できます。

• Promiseの基本的な概念と使い方
• `async/await`による可読性の向上
• エラーハンドリングのベストプラクティス
• `Promise.all`, `Promise.race`, `Promise.allSettled`の使い分け
• パフォーマンスを考慮したPromiseの実装
• アンチパターンとその回避策

Promiseの基本

Promiseは、非同期処理の結果（成功または失敗）を表現するオブジェクトです。状態は「保留(pending)」「履行(fulfilled)」「拒否(rejected)」のいずれかを取ります。基本的な使い方は以下の通りです。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5; // ランダムで成功/失敗をシミュレート
      if (success) {
        resolve('データ取得成功！');
      } else {
        reject('データ取得失敗...');
      }
    }, 1000);
  });
}

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

このコードでは、`fetchData`関数がPromiseを返します。`then`メソッドで成功時の処理、`catch`メソッドで失敗時の処理を定義しています。

【重要】よくある失敗とアンチパターン

Promiseを使う上で初心者が陥りやすいのが、エラーハンドリングの不備です。以下のコードは、アンチパターンの典型例です。

// アンチパターン：catchがない
function processData() {
  return fetchData().then(data => {
    // 何らかの処理
    return processTheData(data); // 処理関数もPromiseを返す想定
  });
}

processData().then(() => {
  console.log('処理完了');
});

このコードの問題点は、`fetchData`または`processTheData`が失敗した場合、エラーが捕捉されずに処理が中断してしまうことです。エラーが発生しても、`’処理完了’`が表示されてしまい、問題に気づきにくいという最悪の事態を招きます。これを修正するには、`catch`メソッドを追加し、エラーを適切に処理する必要があります。

// 改善されたコード：catchを追加
function processData() {
  return fetchData()
    .then(data => {
      // 何らかの処理
      return processTheData(data);
    })
    .catch(error => {
      console.error('エラーが発生しました：', error);
      throw error; // エラーを再スローして、さらに上位のcatchで処理できるようにする
    });
}

processData()
  .then(() => {
    console.log('処理完了');
  })
  .catch(error => {
    console.error('最終的なエラー：', error);
  });

`catch`ブロック内でエラーをログに出力し、`throw error`でエラーを再スローすることで、上位の`catch`ブロックでエラーを処理できるようになります。これにより、エラーハンドリングがより堅牢になります。

もう一つのアンチパターンは、ネストが深すぎるPromiseチェーンです。これはコードの可読性を著しく低下させ、デバッグを困難にします。`async/await`を使うことで、この問題を解決できます。

【重要】現場で使われる実践的コード・テクニック

`async/await`は、Promiseベースの非同期処理を同期的なコードのように記述できる構文です。これにより、コードの可読性と保守性が大幅に向上します。

// async/awaitを使った例
async function processDataAsync() {
  try {
    const data = await fetchData();
    const processedData = await processTheData(data);
    console.log('処理完了：', processedData);
    return processedData;
  } catch (error) {
    console.error('エラーが発生しました：', error);
    //必要に応じてエラー処理
    throw error; // エラーを再スロー
  }
}

processDataAsync()
.then(result => console.log("結果", result))
.catch(error => console.error("最終エラー", error))

このコードは、先ほどのPromiseチェーン版と同じ処理を行いますが、格段に可読性が高いことがわかります。`async`キーワードを関数に付与し、`await`キーワードを使ってPromiseの完了を待つことで、非同期処理を同期的に記述できます。`try…catch`ブロックを使って、エラーハンドリングも行っています。`async` 関数は暗黙的に Promise を返します。

複数の非同期処理を並行して実行する場合は、`Promise.all`、`Promise.race`、`Promise.allSettled`を使い分けることが重要です。

async function fetchUserData(userId) {
  const user = await fetch(`/users/${userId}`).then(res => res.json());
  const posts = await fetch(`/users/${userId}/posts`).then(res => res.json());
  const comments = await fetch(`/users/${userId}/comments`).then(res => res.json());
  return { user, posts, comments };
}

Promise.all([
    fetch(`/users/1`).then(res => res.json()),
    fetch(`/posts/1`).then(res => res.json())
])
.then(([
    user,
    post
]) => {
    console.log("User:", user);
    console.log("Post:", post);
})
.catch(err => console.error("Error fetching data:", err));
        

function timeout(ms) {
  return new Promise((_, reject) => setTimeout(() => reject(new Error('Timeout')), ms));
}

async function fetchDataWithTimeout(url, ms) {
  try {
    const response = await Promise.race([
      fetch(url).then(res => res.json()),
      timeout(ms)
    ]);
    return response;
  } catch (error) {
    console.error('Error or timeout:', error);
    throw error;
  }
}

fetchDataWithTimeout('/api/data', 2000) // 2秒でタイムアウト
  .then(data => console.log('Data:', data))
  .catch(error => console.error('Error:', error.message));
        

async function fetchMultipleData(urls) {
    const results = await Promise.allSettled(
        urls.map(url => 
            fetch(url)
                .then(res => res.json())
                .catch(err => ({
                    status: 'rejected',
                    value: `Failed to fetch from ${url}`,
                    reason: err.message
                }))
        )
    );

    const data = results.reduce((acc, result) => {
        if (result.status === 'fulfilled') {
            acc.success.push(result.value);
        } else {
            acc.failure.push(result.reason || result.value);
        }
        return acc;
    }, {
        success: [],
        failure: []
    });

    console.log('Success:', data.success);
    console.log('Failures:', data.failure);
}

// 例：APIエンドポイントが`/api/data1`, `/api/data2`, `/api/data3`の場合
// これらのエンドポイントはJSONデータを返し、例えば以下のような形式を想定しています。
// {
//   "id": 1,
//   "name": "Example Data",
//   "value": 123
// }
// APIが失敗した場合、エラーメッセージが `failure` 配列に格納されます。
fetchMultipleData(['/api/data1', '/api/data2', '/api/data3']);
        

例えば、複数のAPIからデータを取得し、すべてのデータが揃ってから処理を行う場合は、`Promise.all`が適しています。

async function fetchDataFromMultipleAPIs(urls) {
  try {
    const results = await Promise.all(urls.map(url => fetch(url).then(response => response.json())));
    console.log('すべてのAPIからのデータ：', results);
    return results;
  } catch (error) {
    console.error('APIリクエスト中にエラーが発生しました：', error);
    throw error;
  }
}

`Promise.allSettled` は、一部のAPIリクエストが失敗しても、他のAPIリクエストの結果を利用したい場合に便利です。例えば、複数の広告配信サービスから広告を取得し、一部のサービスがダウンしていても、他のサービスからの広告を表示したい場合に利用できます。

async function fetchAdsFromMultipleServices(services) {
  const results = await Promise.allSettled(
    services.map(async service => {
      try {
        const ad = await service.fetchAd();
        return { status: 'fulfilled', value: ad };
      } catch (error) {
        return { status: 'rejected', reason: error };
      }
    })
  );

  const successfulAds = results
    .filter(result => result.status === 'fulfilled')
    .map(result => result.value);
  const failedServices = results
    .filter(result => result.status === 'rejected')
    .map(result => result.reason);

  console.log('成功した広告：', successfulAds);
  console.log('失敗したサービス：', failedServices);
  return { successfulAds, failedServices };
}

`Promise.race`は、例えば複数のCDNから最も早く画像を取得して表示する場合に有効です。ユーザーがアクセスするたびに最適なCDNを選択し、高速な画像表示を実現することで、ユーザーエクスペリエンスを向上させることができます。

async function fetchImageFromFastestCDN(cdns, imagePath) {
  const fetchPromises = cdns.map(cdn => {
    const imageUrl = `${cdn}/${imagePath}`;
    return fetch(imageUrl)
      .then(response => {
        if (!response.ok) {
          throw new Error(`Failed to fetch image from ${cdn}`);
        }
        return imageUrl;
      })
      .catch(error => {
        console.warn(`Failed to fetch image from ${cdn}: ${error.message}`);
        return Promise.reject(error);
      });
  });

  try {
    const fastestImageURL = await Promise.race(fetchPromises);
    console.log(`Image fetched from fastest CDN: ${fastestImageURL}`);
    return fastestImageURL;
  } catch (error) {
    console.error('Failed to fetch image from any CDN:', error);
    // デフォルトの画像URLを返すか、エラー処理を行う
    return '/default-image.jpg';
  }
}

// CDNのリストと画像パス
const cdns = [
  'https://cdn1.example.com',
  'https://cdn2.example.com',
  'https://cdn3.example.com'
];
const imagePath = 'images/hero.jpg';

fetchImageFromFastestCDN(cdns, imagePath)
  .then(imageUrl => {
    // 取得した画像のURLをタグに設定するなどの処理を行う
    console.log('Image URL:', imageUrl);
  });

現場の失敗談：Promise.allの落とし穴

以前、私が担当していたEコマースプラットフォームのプロジェクトで、商品詳細ページを高速化するため、複数のマイクロサービスから商品情報、在庫情報、レビュー情報を並行して取得する必要がありました。当初、私は安易にPromise.allを使用し、すべてのAPIリクエストが成功するのを待つように実装しました。各マイクロサービスは異なるチームが管理しており、特にレビューサービスの信頼性が低いことを知っていました。

案の定、レビューサービスが負荷の高い時間帯に頻繁にタイムアウトするようになり、その結果、Promise.all全体がrejectされ、商品情報や在庫情報といった他の正常なAPIからのデータもすべて破棄されてしまうという問題が発生しました。商品詳細ページが完全に表示されないという状況が頻発し、ユーザーからは「ページが重くて表示されない！」というクレームが殺到し、SREチームと連携して夜通し対応に追われる日々が続きました。

この失敗から学び、私はPromise.allSettledを使うようにコードを修正しました。Promise.allSettledは、APIリクエストが成功するか失敗するかに関わらず、すべての結果を待つため、レビューサービスが失敗しても、商品情報や在庫情報は正常に処理できます。レビューサービスが失敗した場合は、「レビューが取得できませんでした」というエラーメッセージを代わりに表示するようにしました。修正後、レビューが表示されないことはありましたが、商品詳細ページ全体が表示されないという問題は解消され、ユーザーエクスペリエンスは大幅に改善されました。

この経験から、マイクロサービスアーキテクチャのように、APIの信頼性が低い場合は、Promise.allSettledを使用することが重要だと学びました。また、APIが失敗した場合の代替処理（キャッシュからのデータ取得、デフォルト値の表示、エラーメッセージの表示など）を実装することも、ユーザーエクスペリエンスを向上させるために重要です。APIの信頼性を事前に評価し、適切なPromiseメソッドを選択することが、安定したアプリケーション開発には不可欠です。

パフォーマンス：Promise.all vs Promise.allSettled

Promise.allとPromise.allSettledは、どちらも複数のPromiseを並行して実行するためのものですが、パフォーマンス面で違いがあります。一般的に、Promise.allは、すべてのPromiseが成功する場合、Promise.allSettledよりもわずかに高速です。なぜなら、Promise.allは、1つでもPromiseが失敗するとすぐにrejectされるため、残りのPromiseの結果を待つ必要がないからです。一方、Promise.allSettledは、すべてのPromiseが完了するまで待つため、処理時間が長くなる可能性があります。

しかし、APIリクエストの失敗率が高い場合、Promise.allは、1つの失敗によって全体が中断されるため、実際にはPromise.allSettledよりも処理時間が長くなる可能性があります。また、失敗したリクエストをリトライする場合、Promise.allは最初からすべてのリクエストを再実行する必要がありますが、Promise.allSettledは、失敗したリクエストのみをリトライすれば済みます。

以下の表は、10個のAPIリクエストを並行して実行し、APIの失敗率を変化させた場合の、Promise.allとPromise.allSettledの平均処理時間（ミリ秒）を比較したベンチマーク結果です。

このベンチマークは、CPU: 2.3 GHz Quad-Core Intel Core i7、メモリ: 16 GB 2133 MHz LPDDR3、ネットワーク環境: Wi-Fi (802.11ac)の環境で、Node.js v16.x 環境で、`node-benchmark` ライブラリを使用して実施しました。APIリクエストのシミュレーションには、`setTimeout`を使用し、ランダムな遅延を加えています。APIサーバーはローカルで稼働させ、レイテンシの影響を最小限に抑えています。ベンチマークは各成功率で100回実行し、平均処理時間を算出しました。`node-benchmark`のインストール方法は、`npm install benchmark`です。ベンチマークの実行方法は、`node benchmark.js`です。ベンチマーク結果は、あくまで特定の環境下での一例であり、CPUの種類、メモリ容量、ネットワーク環境などの要因によって変動する可能性があります。例えば、より高速なCPUや大容量のメモリを搭載した環境では、処理時間が短縮される可能性があります。また、ネットワーク環境が不安定な場合や、APIサーバーの負荷が高い場合は、処理時間が長くなる可能性があります。以下のコードは、ベンチマークに使用したコード例です。

const Benchmark = require('benchmark');
const suite = new Benchmark.Suite;

const numRequests = 10;

// APIリクエストをシミュレートする関数（成功または失敗）
function simulateAPIRequest(successRate) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random()  {
    suite.add(`Promise.all (Success Rate: ${successRate * 100}%)`, {
      defer: true,
      fn: deferred => {
        const requests = Array.from({ length: numRequests }, () => simulateAPIRequest(successRate));
        Promise.all(requests)
          .then(() => deferred.resolve())
          .catch(() => deferred.resolve());
      }
    })
    resolve();
  });
}

// Promise.allSettled のベンチマーク
function benchmarkPromiseAllSettled(successRate) {
  return new Promise(resolve => {
    suite.add(`Promise.allSettled (Success Rate: ${successRate * 100}%)`, {
      defer: true,
      fn: deferred => {
        const requests = Array.from({ length: numRequests }, () => simulateAPIRequest(successRate));
        Promise.allSettled(requests)
          .then(() => deferred.resolve())
          .catch(() => deferred.resolve());
      }
    })
    resolve();
  });
}

async function runBenchmarks() {
  await benchmarkPromiseAll(1); // 成功率100%
  await benchmarkPromiseAllSettled(1);
  await benchmarkPromiseAll(0.9); // 成功率90%
  await benchmarkPromiseAllSettled(0.9);
  await benchmarkPromiseAll(0.5); // 成功率50%
  await benchmarkPromiseAllSettled(0.5);

  suite.on('cycle', function(event) {
    console.log(String(event.target));
  })
  .on('complete', function() {
    console.log('Fastest is ' + this.filter('fastest').map('name'));
  })
  .run({ 'async': true });
}

runBenchmarks();

この結果からわかるように、APIの失敗率が高くなるほど、Promise.allSettledの方がパフォーマンスが向上します。これは、Promise.allSettledが、失敗したリクエストがあっても、他のリクエストの結果を破棄しないためです。

まとめ：Promiseマスターへの道、そしてその先へ

Promiseは、JavaScriptの非同期処理を扱う上で不可欠な要素です。`async/await`や`Promise.allSettled`などの最新機能を活用することで、より可読性が高く、堅牢なコードを書くことができます。この記事で紹介したアンチパターンを避け、実践的なテクニックを駆使することで、あなたもPromiseマスターになれるはずです。ぜひ、日々の開発に役立ててください。

Promiseマスターへの道のりは、ここで終わりではありません。今後、JavaScriptはさらに進化し、Promiseを取り巻く環境も変化していくでしょう。以下は、Promiseマスターとして成長し続けるための具体的なステップと、今後の学習指針です。

• 最新のECMAScript仕様を常にチェックする: JavaScriptの仕様は常に進化しています。新しいPromise関連の機能や、非同期処理に関するアップデートを定期的にチェックしましょう。TC39の提案プロセスを追うと、将来的に導入される可能性のある機能を知ることができます。
• ライブラリやフレームワークのPromise実装を理解する: React, Angular, Vue.js などのフレームワークは、独自のPromise実装や、Promiseを拡張した機能を提供している場合があります。例えば、RxJSのObservableは、Promiseをさらに強力にした非同期処理の仕組みを提供します。これらの実装を理解することで、より効率的な開発が可能になります。
• エラーハンドリングの知識を深める: より複雑なアプリケーションでは、エラーハンドリングが重要になります。エラーの種類に応じた適切な処理方法、エラーログの活用、エラー監視システムの導入などを検討しましょう。SentryやBugsnagなどのツールを活用して、本番環境でのエラーを早期に検知し、対応することが重要です。
• パフォーマンスチューニングのスキルを磨く: 非同期処理は、パフォーマンスに大きな影響を与えます。Promiseの実行時間、メモリ使用量などを測定し、ボトルネックを特定して改善するスキルを磨きましょう。Chrome DevToolsなどのツールを使用して、Promiseのパフォーマンスを詳細に分析することができます。
• 他の開発者との知識共有を積極的に行う: Promiseに関する知識や経験を、チームやコミュニティで共有しましょう。互いに教え合うことで、理解が深まり、新たな発見があるはずです。ブログ記事を書いたり、技術カンファレンスで発表したりすることも、知識を共有する良い方法です。

エラーハンドリングの知識を深めるためには、以下のリソースが役立ちます。

• 書籍: 『Effective JavaScript』(David Herman著)の第6章「Concurrency and Asynchrony」では、Promiseのエラーハンドリングについて詳しく解説されています。
• 記事: MDN Web Docsの「エラー処理とデバッグ」のセクションでは、JavaScriptのエラーハンドリングの基本と応用について学ぶことができます。
• ツール: SentryやBugsnagなどのエラー監視ツールを導入することで、本番環境で発生したエラーをリアルタイムに把握し、迅速な対応が可能になります。

Promiseマスターになるための具体的なステップとしては、以下のものが挙げられます。

1. Promiseの基本的な概念を理解する: Promiseの状態、`then`メソッド、`catch`メソッドの使い方を理解しましょう。
2. `async/await`を使いこなす: `async/await`を使って、非同期処理を同期的に記述する方法を習得しましょう。
3. `Promise.all`, `Promise.race`, `Promise.allSettled`を使い分ける: それぞれのメソッドの特性を理解し、適切な場面で使い分けられるようにしましょう。
4. エラーハンドリングを徹底する: `try…catch`ブロックや、エラー監視ツールを使って、エラーを適切に処理できるようにしましょう。
5. パフォーマンスチューニングを行う: Promiseのパフォーマンスを測定し、ボトルネックを特定して改善するスキルを磨きましょう。

非同期処理は、WebAssembly、Service Workerといった、より高度な技術とも深く関わっています。WebAssemblyは、JavaScript以外の言語で書かれたコードをWebブラウザ上で高速に実行するための技術です。WebAssemblyモジュールをJavaScriptから呼び出す際、非同期処理が必要になる場合があります。Promiseを使いこなすことで、WebAssemblyとの連携もスムーズに行うことができます。Service Workerは、Webブラウザがバックグラウンドで動作するスクリプトです。プッシュ通知の受信、キャッシュの管理、オフラインでの動作など、さまざまな機能を提供します。Service Workerは、非同期処理を多用するため、Promiseの知識が不可欠です。Service Workerを活用することで、より高度なWebアプリケーションを開発することができます。

例えば、Service Workerを使ってオフラインキャッシュを実装する場合、以下のようなコードになります。

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request)
      .then(response => {
        // キャッシュにデータがあればそれを返す
        if (response) {
          return response;
        }

        // キャッシュになければネットワークから取得
        return fetch(event.request).then(
          response => {
            // レスポンスが有効であればキャッシュに保存
            if (!response || response.status !== 200 || response.type !== 'basic') {
              return response;
            }

            const responseToCache = response.clone();

            caches.open(CACHE_NAME)
              .then(cache => {
                cache.put(event.request, responseToCache);
              });

            return response;
          }
        );
      })
  );
});

より具体的な学習リソースとしては、以下のものが考えられます。

• 書籍: 『JavaScript Primer』(azu著)の非同期処理の章では、Promiseについて詳しく解説されています。
• オンラインコース: UdemyやCourseraなどのオンラインコースで、JavaScriptの非同期処理について学ぶことができます。
• ドキュメント: MDN Web DocsのPromiseに関するドキュメントは、非常に詳細で参考になります。

Promiseは、JavaScript開発者にとって強力な武器となります。この記事が、あなたのPromiseスキル向上の一助となれば幸いです。Promiseをマスターし、より高度な非同期処理の世界へ飛び込みましょう！