TypeScript中級

中級 TypeScriptで学ぶ非同期処理｜Q&A編

 

導入

非同期処理は、現代のアプリケーションにおいて不可欠な要素です。特に、TypeScriptを用いた開発では、非同期の特性を理解することで、より効率的なコードを書くことが可能になります。この記事では、具体的な非同期処理のシチュエーションを通じて、実務で役立つ知識を深めていきます。

教科書レベルの解説（非同期処理）

重要な概念の整理

非同期処理は、処理の完了を待たずに次の処理に進むことができるため、アプリケーションのレスポンスを向上させます。TypeScriptでは、Promiseやasync/awaitを利用して非同期処理を簡潔に記述できます。これにより、コールバック地獄を避けつつ、可読性の高いコードを書くことができます。

コード例（TypeScript）


async function fetchData(url: string): Promise {
    const response = await fetch(url);
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return await response.json();
}

async function displayData() {
    try {
        const data = await fetchData('https://api.example.com/data');
        console.log(data);
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

displayData();

コードの行ごとの解説

  1. async function fetchData(url: string): Promise { – 非同期関数を定義し、URLを引数として受け取る。
  2. const response = await fetch(url); – 指定されたURLからデータを取得。awaitを使うことで、fetchの完了を待つ。
  3. if (!response.ok) { – レスポンスが正常でない場合のエラーハンドリングを行う。
  4. throw new Error(‘Network response was not ok’); – エラーをスローして、呼び出し元に通知。
  5. return await response.json(); – レスポンスをJSON形式で返す。
  6. async function displayData() { – データを表示するための非同期関数を定義。
  7. const data = await fetchData(‘https://api.example.com/data’); – fetchDataを呼び出し、データを取得。
  8. console.error(‘Fetch error:’, error); – エラーが発生した場合、コンソールにエラーメッセージを出力。

Q&A編

ここでは、非同期処理に関するよくある質問とその回答を紹介します。

  • Q1: Promiseが解決される前に次の処理を実行したい場合、どうすればいいですか？
    A1: Promiseのthenメソッドを使用することで、解決された後に処理を続けることができます。
  • Q2: async/awaitを使用する際のエラーハンドリングはどうすればよいですか？
    A2: try-catchブロックを使用して、非同期処理内で発生するエラーを捕捉できます。
  • Q3: 非同期処理の順序を制御する方法はありますか？
    A3: 複数の非同期関数をawaitで逐次実行することで、順序を制御できます。
  • Q4: 非同期処理のタイムアウトを設定する方法はありますか？
    A4: Promise.raceを使用して、指定した時間を超えた場合にエラーを発生させることが可能です。
  • Q5: 非同期処理の結果をキャッシュする方法は？
    A5: 取得したデータを変数に保存し、次回の呼び出し時にその変数を使用することでキャッシュが可能です。

まとめ

  • 非同期処理は、アプリケーションの性能向上に寄与します。
  • TypeScriptのasync/awaitを活用することで、可読性の高いコードを実現できます。
  • 具体的なシチュエーションに応じたエラーハンドリングや結果のキャッシュが重要です。
RELATED POST