TypeScript上級

上級 TypeScriptで学ぶ非同期処理｜解説編

 

導入

現代のアプリケーション開発において、非同期処理は欠かせない要素です。特にTypeScriptを使用する場合、型安全性を保ちながら非同期処理を行うことが求められます。本稿では、実務で遭遇する「APIからのデータ取得」という具体的なシチュエーションを通じて、非同期処理の理解を深めていきます。

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

重要な概念の整理

非同期処理は、主にコールバック、Promise、async/awaitの3つの手法で実現されます。これらはそれぞれ異なる特性を持ち、シチュエーションによって使い分けが必要です。特に、async/awaitは可読性が高く、エラーハンドリングも容易であるため、現場での利用が増加しています。

コード例（TypeScript）


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

const url = 'https://api.example.com/data';
fetchData(url)
    .then(data => {
        console.log('Data received:', data);
    })
    .catch(error => {
        console.error('Error fetching data:', error);
    });

コードの行ごとの解説

  1. async function fetchData(url: string): Promise { – 非同期関数fetchDataを定義し、URLを引数として受け取ります。Promiseを返すことを示しています。
  2. const response = await fetch(url); – fetch関数を使って指定したURLからデータを取得します。awaitによって、レスポンスが返されるまで処理が待機します。
  3. if (!response.ok) { throw new Error(‘Network response was not ok’); } – レスポンスが正常でない場合、エラーをスローして処理を中断します。
  4. const data = await response.json(); – レスポンスからJSONデータを抽出します。
  5. console.error(‘Fetch error:’, error); – エラーが発生した場合、その詳細をコンソールに出力します。
  6. fetchData(url).then(…).catch(…); – fetchData関数を呼び出し、成功時と失敗時の処理をそれぞれ指定します。

解説編

APIからのデータ取得において、非同期処理の実装にはいくつかの落とし穴があります。例えば、ネットワークエラーやAPIのレスポンス遅延などが挙げられます。これらに対処するためには、エラーハンドリングをしっかりと行うことが重要です。また、Promise.allを利用することで、複数の非同期処理を並行して実行し、処理時間を短縮することも可能です。このような工夫を施すことで、より効率的な非同期処理を実現できます。

まとめ

  • 非同期処理は、現代のアプリケーションにおいて不可欠な要素です。
  • async/awaitを用いることで、可読性の高いコードを実現できます。
  • エラーハンドリングを適切に行い、ネットワークやAPIの問題に備えることが重要です。
  • Promise.allを活用し、複数の非同期処理を同時に行うことで効率を向上させられます。
RELATED POST