TypeScriptにおいて非同期処理を扱う際、Promiseチェーンとasync/awaitは頻繁に使用される二つの手法です。どちらも非同期処理を効率的に行うための方法ですが、その使い方やパフォーマンスには違いがあります。Promiseチェーンは、連続した非同期処理をthenメソッドを使って順番に実行するのに対し、async/awaitは同期的に見える書き方で非同期処理を行うことができます。本記事では、この二つの手法の基本的な特徴と、実際にどちらがパフォーマンスに優れているのかを比較し、効率的な非同期処理の実現方法について詳しく解説します。
Promiseチェーンとは
Promiseチェーンとは、JavaScriptやTypeScriptで非同期処理を扱うために利用される手法の一つです。Promiseは、処理が成功するか失敗するかが分かるまでの「約束」を表し、最終的にresolve（成功）かreject（失敗）のどちらかの結果が返されます。Promiseチェーンでは、thenメソッドを連続して呼び出すことで、複数の非同期処理を順番に実行し、それぞれの結果を次の処理に渡すことができます。
Promiseチェーンの基本構文
Promiseチェーンの基本構文は、以下のようにthenメソッドを連続して使います。例えば、以下のコードでは、最初のPromiseが完了した後、次の処理が続けて実行されます。
fetchData()
.then((response) => processResponse(response))
.then((result) => saveResult(result))
.catch((error) => handleError(error));メリットとデメリット
Promiseチェーンの主なメリットは、非同期処理を順次実行できる点です。また、thenとcatchメソッドを使うことで、エラーハンドリングを簡単に行うことができます。しかし、チェーンが深くなりすぎると、コードが読みづらくなり、いわゆる「then地獄」に陥る可能性があります。
async/awaitとは
async/awaitは、TypeScriptやJavaScriptで非同期処理をより簡潔に記述するために導入された構文です。asyncキーワードは関数を非同期関数に変換し、awaitキーワードを使うことで、Promiseの結果が返るまで一時停止し、その結果を受け取ることができます。これにより、非同期処理をあたかも同期処理のように書けるため、可読性が大幅に向上します。
async/awaitの基本構文
async/awaitの基本的な使い方は、次のようになります。非同期処理が完了するまで待機するawaitキーワードを使い、Promiseの結果を変数に代入できます。
async function fetchDataAndProcess() {
try {
const response = await fetchData();
const result = await processResponse(response);
await saveResult(result);
} catch (error) {
handleError(error);
}
}メリットとデメリット
async/awaitの最大のメリットは、非同期処理を直感的に書けることです。Promiseチェーンに比べて、コードがシンプルで読みやすくなります。また、エラーハンドリングもtry-catch構文を使うことで一貫して処理できます。しかし、awaitによって処理が一時停止するため、非同期処理を並行して実行する場合には適切な設計が求められます。また、async/awaitはPromiseに依存しているため、Promiseの基本的な理解が前提となります。
パフォーマンス比較の重要性
非同期処理におけるパフォーマンスは、特に大量のリクエストや計算を処理する場面で、アプリケーションの効率や応答性に大きな影響を与えます。TypeScriptにおいてPromiseチェーンとasync/awaitはどちらも非同期処理を実現する手法ですが、それぞれの方法によってパフォーマンスに差が生じることがあります。これらの手法を正しく選ぶことで、アプリケーションの速度やリソースの効率的な利用を最大化することが可能です。
開発におけるパフォーマンスへの影響
パフォーマンスの問題は、ユーザー体験やアプリケーションのスケーラビリティに直接影響を与えるため、非常に重要です。Promiseチェーンやasync/awaitの使い方を誤ると、非効率なリソース利用や処理の遅延を引き起こす可能性があります。特に、大量の非同期処理が発生する環境や、リアルタイムでの応答性が求められるアプリケーションでは、最適な非同期処理の手法を選ぶことが、パフォーマンスの最適化につながります。
パフォーマンス比較の目的
Promiseチェーンとasync/awaitのパフォーマンスを比較することで、それぞれの手法がどのような状況で適しているのかを理解し、実際の開発において適切な選択をするための判断材料となります。この比較は、アプリケーションの応答速度やリソース消費の効率化を図るために欠かせないステップです。
Promiseチェーンのパフォーマンス特性
Promiseチェーンは、複数の非同期処理を順次実行する際に便利ですが、そのパフォーマンスには特有の性質があります。Promiseチェーンは基本的に次のthenメソッドが呼ばれるまで前のPromiseの完了を待つため、処理が連続的に行われる構造です。この連続処理が適している場面では効果的ですが、全ての処理が完了するまでにかかる時間が蓄積されるため、特に大量の非同期処理を扱う場合はパフォーマンスの低下が見られることがあります。
処理の直列実行による遅延
Promiseチェーンは処理が直列的に実行されるため、各非同期処理が順番に完了するまで待つ必要があります。例えば、5つの非同期処理がある場合、それぞれが完了して次の処理に移るため、最終的な結果が得られるまでの時間が長くなります。
fetchData()
.then((response) => processResponse(response))
.then((result) => saveResult(result))
.catch((error) => handleError(error));上記のコードでは、fetchDataの完了を待ってからprocessResponseが実行され、その後にsaveResultが実行されます。このように、各処理が完了するまで次の処理が始まらないため、時間がかかる場合があります。
Promiseのオーバーヘッド
Promiseオブジェクト自体にも一定のメモリやCPUリソースを使用するため、Promiseチェーンを長くすると、オーバーヘッドが増加し、パフォーマンスが悪化する可能性があります。特に、非同期処理が複雑で多数のPromiseが連携する場合、その影響は顕著です。
並列処理との相性
Promiseチェーンは基本的に直列的な処理に向いていますが、複数の非同期処理を同時に実行する並列処理には向いていません。並列実行が求められる場面では、Promise.allやPromise.raceといったメソッドを使う必要がありますが、それでもチェーン全体のパフォーマンスには影響が出ることがあります。
Promiseチェーンは、シンプルな非同期処理には向いていますが、大量の非同期処理や並列処理を効率的に行う場合には、パフォーマンス面での課題が発生することが多いです。
async/awaitのパフォーマンス特性
async/awaitはPromiseチェーンに比べ、可読性の向上だけでなく、パフォーマンスの観点からもいくつかの利点があります。async/awaitは、処理を同期的に記述できるものの、その内部では非同期処理が行われるため、Promiseと同様に非同期性を持ちながら、より直感的で効率的なコードが書けます。また、async/awaitを適切に使用すれば、並列処理にも対応でき、Promiseチェーンでの直列処理による遅延を回避できます。
同期的に見える非同期処理
async/awaitでは、処理が順次行われるように見えますが、実際にはPromiseが解決されるまで他の作業をブロックせずに進行します。これにより、Promiseチェーンで発生しがちな「thenメソッドのネスト」が解消され、よりシンプルなコード構造で非同期処理が実現できます。
async function handleData() {
try {
const response = await fetchData();
const result = await processResponse(response);
await saveResult(result);
} catch (error) {
handleError(error);
}
}このコードでは、直感的に非同期処理を記述でき、処理のフローを追いやすくなっています。これにより、デバッグやメンテナンスの効率が向上します。
並列処理への柔軟性
async/awaitを使うと、Promise.allを活用して複数の非同期処理を並列で実行し、それぞれの処理が完了するのを待つことができます。これにより、直列処理に比べて大幅にパフォーマンスが向上します。以下は、複数の非同期処理を並列で行う例です。
async function handleMultipleRequests() {
try {
const [data1, data2, data3] = await Promise.all([
fetchData1(),
fetchData2(),
fetchData3(),
]);
processResults(data1, data2, data3);
} catch (error) {
handleError(error);
}
}Promise.allを組み合わせることで、非同期処理を同時に実行し、全ての処理が完了するのを待つことができます。これにより、非同期処理を直列で行う場合に比べ、待ち時間が大幅に短縮され、全体のパフォーマンスが向上します。
エラーハンドリングの効率性
async/awaitでは、try-catch構文を使ってエラーハンドリングが一元化されており、エラーの検出や処理が簡単になります。Promiseチェーンの場合、エラーが発生した際にエラーハンドリングの構造が複雑になることがありますが、async/awaitではより明確で効率的なエラーハンドリングが可能です。
オーバーヘッドの低減
async/awaitは、Promiseチェーンに比べてネストが少なく、コード全体がシンプルになります。その結果、Promiseの連続的な呼び出しによるオーバーヘッドが削減され、パフォーマンス向上が期待できます。また、処理が少ないケースや処理間での依存関係が少ない場合には、async/awaitの方が効率的に動作することが多いです。
async/awaitは、Promiseチェーンよりも直感的で、パフォーマンスや可読性の点で優れた特性を持ちます。特に、複雑な非同期処理や並列処理を扱う際には、async/awaitを活用することでパフォーマンスの向上が期待できます。
実際のコード例で比較
Promiseチェーンとasync/awaitの違いを明確に理解するために、同じ非同期処理をそれぞれの手法で実装した例を比較します。これにより、コードの可読性や構造の違いがどのようにパフォーマンスに影響するかも確認できます。
Promiseチェーンによる実装例
以下の例では、複数の非同期処理をPromiseチェーンで連続的に実行しています。それぞれの処理は前の処理の完了を待ってから次に進むため、直列的な流れになります。
function fetchDataAndProcess() {
return fetchData()
.then((response) => processResponse(response))
.then((result) => saveResult(result))
.catch((error) => handleError(error));
}このコードでは、fetchData()、processResponse()、saveResult()が順番に実行され、thenメソッドを連続して呼び出すことで処理が連鎖しています。Promiseチェーンはシンプルな非同期処理では有効ですが、複雑なシナリオではネストが深くなることで可読性が低下する可能性があります。
async/awaitによる実装例
同じ処理をasync/awaitで書き直すと、コードの見た目はより同期的で直感的になります。Promiseチェーンと比べると、コードのネストがなくなり、読みやすさが向上します。
async function fetchDataAndProcess() {
try {
const response = await fetchData();
const result = await processResponse(response);
await saveResult(result);
} catch (error) {
handleError(error);
}
}async/awaitでは、非同期処理をあたかも同期的に実行しているかのように記述できます。各処理はawaitによって待機されるため、次の処理は前の処理が完了してから実行されますが、コードの流れが明確で、可読性が大幅に向上します。
Promiseチェーンとasync/awaitのパフォーマンス比較
Promiseチェーンとasync/awaitの基本的なパフォーマンスは大きく異なるわけではありません。どちらも内部的にはPromiseを利用しているため、処理速度自体は大きく変わりませんが、async/awaitを使うことで以下の点でパフォーマンスが間接的に向上する場合があります。
- エラーハンドリングの効率性: async/awaitではtry-catchブロックを使うため、Promiseチェーンの
catchメソッドを多用するよりもエラーハンドリングが簡素化され、エラーが発生した際の影響範囲を抑えやすくなります。 - 並列処理の実行: async/awaitでは
Promise.all()を使って複数の非同期処理を並列で実行することが容易です。この方法により、処理を同時に行うことで時間を短縮できます。
まとめ
Promiseチェーンとasync/awaitのコード例を比較することで、async/awaitの方が可読性が高く、複雑な非同期処理を扱う際にもコードがシンプルになることがわかります。パフォーマンスに関しては大きな違いはありませんが、非同期処理の最適化やエラーハンドリングの効率化の面で、async/awaitが優れた選択となるケースが多いです。
パフォーマンス計測方法
Promiseチェーンとasync/awaitのパフォーマンスを比較するには、実際のコードの実行時間やリソース使用量を測定することが必要です。これにより、どちらの手法が特定のシナリオにおいて効率的であるかを客観的に判断することができます。パフォーマンスの計測には、さまざまな方法とツールを使用して実施することができます。
console.timeを使った基本的な計測
TypeScriptやJavaScriptで手軽にパフォーマンスを測定する方法の一つが、console.timeとconsole.timeEndを使用することです。これらのメソッドは、コードの実行時間をミリ秒単位で計測するために役立ちます。Promiseチェーンとasync/awaitそれぞれに対して実行時間を計測することで、処理にかかる時間を比較できます。
Promiseチェーンの計測例:
console.time('PromiseChain');
fetchData()
.then((response) => processResponse(response))
.then((result) => saveResult(result))
.finally(() => console.timeEnd('PromiseChain'));async/awaitの計測例:
console.time('AsyncAwait');
async function fetchDataAndProcess() {
try {
const response = await fetchData();
const result = await processResponse(response);
await saveResult(result);
} catch (error) {
handleError(error);
} finally {
console.timeEnd('AsyncAwait');
}
}
fetchDataAndProcess();これにより、非同期処理にかかる実行時間を簡単に比較できます。これらの計測結果をもとに、どちらの手法がパフォーマンス的に優れているかを判断できます。
Node.jsのパフォーマンスツールを使用
Node.jsでは、内蔵されているパフォーマンス計測ツールperf_hooksを使用して、より精密なパフォーマンス計測が可能です。このツールを利用すると、Promiseチェーンやasync/awaitによる処理の詳細な実行時間を把握できます。
const { performance } = require('perf_hooks');
const start = performance.now();
async function fetchDataAndProcess() {
try {
const response = await fetchData();
const result = await processResponse(response);
await saveResult(result);
} catch (error) {
handleError(error);
} finally {
const end = performance.now();
console.log(`Async/Await took ${end - start} milliseconds.`);
}
}
fetchDataAndProcess();この方法では、処理にかかる時間をより正確にミリ秒単位で測定でき、Promiseチェーンとasync/awaitのパフォーマンス差を明確にすることができます。
ブラウザのデベロッパーツールでの測定
ブラウザ環境では、ChromeやFirefoxのデベロッパーツールを使って、JavaScriptの実行パフォーマンスを視覚的に分析することができます。デベロッパーツールの「Performance」タブを使うことで、コードの各ステップがどれだけ時間を消費しているのか、ボトルネックがどこにあるのかを確認できます。
手順:
- 開発者ツールを開く（Chromeの場合はF12を押して、Performanceタブを選択）
- 「Start profiling」ボタンをクリックしてパフォーマンスの記録を開始
- 解析したいコードを実行
- 「Stop profiling」で結果を確認
これにより、Promiseチェーンやasync/awaitのパフォーマンスを視覚的に比較することができます。
パフォーマンスの観点からの結論
Promiseチェーンとasync/awaitのパフォーマンスを比較するためには、実際の使用状況に基づいて時間を計測することが重要です。シンプルなconsole.timeから、Node.jsのperf_hooksやブラウザのデベロッパーツールまで、さまざまな手法を組み合わせてパフォーマンスを測定することで、特定のケースでどちらが効率的かを正確に判断することが可能です。
ベストプラクティス
Promiseチェーンとasync/awaitのどちらを使うべきかは、プロジェクトの性質や特定のシナリオに依存します。それぞれの特徴を理解し、最適な選択をするためには、具体的なガイドラインやベストプラクティスを意識しておくことが重要です。以下に、効率的な非同期処理を行うためのベストプラクティスを紹介します。
Promiseチェーンを使うべき場面
Promiseチェーンは、単純な非同期処理を順次実行する場合や、複数の依存関係のある処理を直列に実行したい場面で有効です。特に、非同期処理が明確に連鎖している場合には、Promiseチェーンの使用が適しています。
Promiseチェーンを使うべきケース:
- 処理がシンプルで、順次実行する非同期タスクが少ない場合
- 処理の流れを追いやすいコードが必要な場合
- 簡単なエラーハンドリングを行う場合
async/awaitを使うべき場面
async/awaitは、複雑な非同期処理や、直感的で読みやすいコードを書く必要がある場面で推奨されます。特に、並列処理を行いたい場合や、Promiseチェーンでのネストが深くなりがちなシナリオでは、async/awaitを使う方が効率的です。
async/awaitを使うべきケース:
- 複数の非同期処理が絡む複雑なロジックを扱う場合
- 処理の流れが非同期的であるものの、同期的なコードに近い形式で書きたい場合
- エラーハンドリングをより簡潔に行いたい場合
- 並列処理が必要な場合（
Promise.allと組み合わせる）
async/awaitでの並列処理の効率化
async/awaitは、Promise.allを利用して並列処理を実行することが簡単にできます。複数の非同期処理を並行して実行し、すべての処理が完了したら結果を取得するというシナリオでは、async/awaitが有効です。
async function fetchMultipleData() {
const [data1, data2, data3] = await Promise.all([
fetchData1(),
fetchData2(),
fetchData3()
]);
return [data1, data2, data3];
}このように、複数の非同期処理を同時に行う場合は、async/awaitとPromise.allの組み合わせが最も効率的です。
エラーハンドリングのベストプラクティス
エラーハンドリングにおいても、async/awaitの方がコードのシンプルさを保ちながら、エラーを一元的に管理することができます。Promiseチェーンの場合、各thenメソッドにエラーハンドリングのロジックを組み込むか、catchメソッドで一括処理することが求められますが、async/awaitではtry-catchを使用してエラーをシンプルに扱えます。
async/awaitのエラーハンドリング例:
async function processData() {
try {
const data = await fetchData();
const result = await processData(data);
await saveResult(result);
} catch (error) {
console.error('Error occurred:', error);
}
}このように、try-catchブロックでエラーを一元管理できるため、コードの見通しが良くなり、デバッグが容易になります。
処理が直列である必要がない場合の注意点
async/awaitは、awaitによって処理を一時停止しますが、すべての処理が直列的に実行されるとは限りません。複数の処理が独立して実行できる場合、必ずしも順次実行する必要はなく、並行して処理を実行した方がパフォーマンスが向上します。そのため、直列で実行する必要がない処理をわざわざawaitで待つことは避け、並列処理を活用することがベストプラクティスです。
// 良くない例：直列的に実行
await task1();
await task2();
await task3();
// 良い例：並列実行
await Promise.all([task1(), task2(), task3()]);並列処理の活用は、特に多くの非同期処理を行う場合にパフォーマンスを最適化するための重要なテクニックです。
最適な選択をするための指針
最終的に、Promiseチェーンとasync/awaitのどちらを選ぶべきかは、次のような指針を参考に決めるとよいでしょう。
- コードの可読性: 可読性を重視する場合、async/awaitを優先
- 並列処理の必要性: 複数の非同期処理を並列で行う場合、async/awaitが適している
- 直列処理の簡潔さ: 短い処理で、簡単な非同期タスクを直列で処理する場合はPromiseチェーンが有効
これらのベストプラクティスに従って適切に非同期処理を設計することで、コードの効率性や可読性を最大限に引き出すことができます。
エラーハンドリングの違い
Promiseチェーンとasync/awaitは、非同期処理のエラーハンドリングにおいても異なる特徴を持ちます。それぞれの手法でのエラーハンドリング方法や、パフォーマンスへの影響を理解することは、効率的な非同期処理の設計において重要です。
Promiseチェーンのエラーハンドリング
Promiseチェーンでは、catchメソッドを使って、チェーン内で発生したエラーを一括で処理することが一般的です。エラーが発生すると、処理は即座に中断され、catchメソッドでエラーがキャッチされます。
Promiseチェーンでのエラーハンドリング例:
fetchData()
.then((response) => processResponse(response))
.then((result) => saveResult(result))
.catch((error) => {
console.error('An error occurred:', error);
});このように、catchメソッドを最後に配置することで、チェーン内のどこかでエラーが発生しても、そのエラーを一元的に処理できます。これはシンプルな構造ですが、複数の非同期処理が絡む場合、エラーの原因箇所が特定しにくくなることがあります。
Promiseチェーンにおけるエラーの課題
Promiseチェーンでは、エラーが発生した場合にエラーハンドリングのタイミングや場所がわかりにくくなることがあります。特に、複数の非同期処理が絡む場合、どの処理でエラーが発生したかを特定するのが難しくなることがあります。また、catchメソッドをチェーンの適切な箇所に配置しないと、期待通りにエラーが処理されないケースも考えられます。
async/awaitのエラーハンドリング
async/awaitを使ったエラーハンドリングは、try-catchブロックを使って行います。これは同期的なエラーハンドリングに似ており、より直感的でコードが整理されやすくなります。また、エラーが発生した場所を特定しやすく、異なる処理ごとにエラーハンドリングを行うことも容易です。
async/awaitでのエラーハンドリング例:
async function fetchDataAndProcess() {
try {
const response = await fetchData();
const result = await processResponse(response);
await saveResult(result);
} catch (error) {
console.error('An error occurred:', error);
}
}try-catchブロックを使うことで、エラーが発生した箇所を明確にでき、エラーハンドリングの構造が整理されやすくなります。また、catchメソッドと異なり、複数の非同期処理に対して個別のエラーハンドリングを設定することが簡単にできます。
async/awaitのエラーハンドリングの利点
async/awaitを使う最大の利点は、同期処理のようにエラーハンドリングができる点です。これにより、複雑なエラーハンドリングが必要な場合でも、コードが煩雑になりにくく、各非同期処理に対して細かくエラーハンドリングを実装できるため、エラーの原因を特定しやすくなります。
さらに、async/awaitでは、エラーが発生した場合に次の処理へ即座に移行することがなく、すぐにエラーをキャッチして適切な処理ができます。Promiseチェーンのようにthenやcatchでのネストが必要ないため、コードがシンプルで効率的です。
パフォーマンスへの影響
エラーハンドリングそのものは、基本的には大きなパフォーマンスの差を生むものではありません。しかし、Promiseチェーンの場合、エラーハンドリングのためにネストが深くなると、コードの可読性が低下し、デバッグやメンテナンスに時間がかかる可能性があります。async/awaitでは、try-catchを使用することで、コードの見通しが良くなり、エラーの追跡がしやすくなるため、開発者が効率的に問題を修正できる点で、間接的にパフォーマンス向上に寄与します。
複雑な非同期処理のエラーハンドリング
Promiseチェーンで複雑な非同期処理を扱う場合、各thenごとにエラー処理を個別に設定することが難しくなることがありますが、async/awaitでは各処理を独立してエラーハンドリングできるため、特に複雑な非同期処理の際に効率的です。結果的に、処理が失敗した場合の影響範囲を最小限に抑えることができます。
まとめると、async/awaitの方がエラーハンドリングの面で直感的であり、特に複雑な非同期処理やエラー発生の可能性が高い場合に有効です。Promiseチェーンはシンプルな処理では問題ありませんが、複雑な場合にはasync/awaitが推奨されます。
応用例と演習
ここでは、Promiseチェーンとasync/awaitを実際に使用する場面をシナリオとして紹介し、両者の使い分けに関する理解を深めるための演習問題を提供します。これにより、どちらの手法を選択すべきかを実践的に学ぶことができます。
応用例: APIデータのフェッチと加工
以下のシナリオでは、APIから複数のデータセットを取得し、それを加工・保存する非同期処理を行います。このようなケースでは、Promiseチェーンとasync/awaitのどちらも利用可能ですが、状況によって適した手法を選択する必要があります。
シナリオ:
- 3つのAPIエンドポイントからデータを並行して取得する。
- 取得したデータを加工し、結果を保存する。
- どれかのデータ取得に失敗した場合はエラーをキャッチし、残りの処理は実行しない。
Promiseチェーンでの解決
Promiseチェーンを使った解決法では、各API呼び出しをPromise.allを使って並列実行し、その後データを加工して保存します。
Promise.all([fetchData1(), fetchData2(), fetchData3()])
.then(([data1, data2, data3]) => {
const processedData1 = processData(data1);
const processedData2 = processData(data2);
const processedData3 = processData(data3);
return Promise.all([saveData(processedData1), saveData(processedData2), saveData(processedData3)]);
})
.then(() => {
console.log('All data saved successfully.');
})
.catch((error) => {
console.error('Error during data fetch or save:', error);
});この例では、Promise.allを使ってAPIデータを並行して取得し、その後にデータを加工して保存しています。エラーハンドリングはcatchで行い、エラーが発生した場合は処理全体が停止します。
async/awaitでの解決
async/awaitを使った解決法では、同じ処理をより同期的に見える形で書けます。
async function fetchDataAndSave() {
try {
const [data1, data2, data3] = await Promise.all([fetchData1(), fetchData2(), fetchData3()]);
const processedData1 = processData(data1);
const processedData2 = processData(data2);
const processedData3 = processData(data3);
await Promise.all([saveData(processedData1), saveData(processedData2), saveData(processedData3)]);
console.log('All data saved successfully.');
} catch (error) {
console.error('Error during data fetch or save:', error);
}
}
fetchDataAndSave();async/awaitを使用することで、非同期処理が同期的に書けるため、コードの可読性が向上し、エラーハンドリングもtry-catchブロックで行うため、より直感的です。
演習問題
以下の演習問題を通じて、Promiseチェーンとasync/awaitの使い分けを体験し、どちらの手法が特定の状況に適しているかを考えてください。
問題1:
以下のシナリオをPromiseチェーンで実装してください。
- 複数のファイルからデータを順番に読み込み、それぞれのデータを加工して、最終結果をコンソールに表示する。
問題2:
問題1のコードをasync/awaitで書き直し、エラーハンドリングを追加してください。
問題3:
複数のAPIエンドポイントからデータを並行して取得し、それを集計して一つの結果を返す処理をasync/awaitを使って実装してください。Promise.allを使って並行処理を行い、全てのAPI呼び出しが完了したら結果を処理するようにしてください。
解説とポイント
これらの演習を通じて、Promiseチェーンとasync/awaitの両方に慣れ親しみ、それぞれの特徴を理解することができます。特に、複数の非同期処理が絡む場合や、エラーハンドリングが必要なシナリオにおいて、async/awaitの方が直感的で効率的であることが実感できるでしょう。また、Promiseチェーンはシンプルな処理に向いていますが、コードの可読性やデバッグのしやすさを考慮すると、async/awaitの方が適している場面が多いことも理解できるはずです。
このように、シナリオごとに最適な手法を選び取ることで、非同期処理の設計がより洗練されたものになります。
まとめ
本記事では、TypeScriptにおけるPromiseチェーンとasync/awaitのパフォーマンスと使い方の違いについて解説しました。Promiseチェーンはシンプルな非同期処理に向いており、連続した非同期処理を管理する際に有効ですが、複雑な処理ではコードが煩雑になることがあります。一方、async/awaitはより直感的に非同期処理を記述でき、可読性が高いため、特に複雑な処理や並列処理が必要な場面で効率的です。どちらの手法も状況に応じて使い分け、最適な非同期処理を実現することが重要です。
コメント