TypeScript中級

中級 TypeScriptで学ぶ非同期処理｜練習問題編

 

導入

非同期処理は、現代のウェブアプリケーションにおいて避けては通れない技術です。特に、APIからデータを取得する際や、複数のタスクを同時に実行する場合に、その真価を発揮します。本記事では、TypeScriptを用いた具体的な非同期処理の実装方法を学び、その後に練習問題を通じて理解を深めていきます。

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

重要な概念の整理

非同期処理は、主にコールバック、Promise、async/awaitの3つの方法で実現されます。これらの手法は、非同期処理の流れを制御し、より効率的なコードを書くための基盤となります。特に、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 processData(url: string) {
    try {
        const data = await fetchData(url);
        console.log('Fetched Data:', data);
    } catch (error) {
        console.error('Error fetching data:', error);
    }
}

processData('https://api.example.com/data');

コードの行ごとの解説

  1. async function fetchData(url: string): Promise { – 非同期関数を定義し、URLを引数に取ります。
  2. const response = await fetch(url); – 指定されたURLからデータを取得します。fetchはPromiseを返すため、awaitを使って結果を待ちます。
  3. if (!response.ok) { throw new Error('Network response was not ok'); } – レスポンスが正常でない場合、エラーを投げます。
  4. return await response.json(); – レスポンスをJSON形式に変換し、結果を返します。
  5. async function processData(url: string) { – 別の非同期関数を定義し、データを処理します。
  6. const data = await fetchData(url); – fetchData関数を呼び出し、データを取得します。
  7. console.log('Fetched Data:', data); – 取得したデータをコンソールに出力します。
  8. catch (error) { console.error('Error fetching data:', error); } – エラーハンドリングを行い、問題が発生した場合にメッセージを表示します。
  9. processData('https://api.example.com/data'); – 最後に、processData関数を呼び出し、処理を開始します。

練習問題編

以下の練習問題に取り組み、非同期処理の理解を深めてください。

  1. 問題1: fetchData関数が失敗した場合、どのようにエラーメッセージを表示しますか？

    2. 模範解答: catchブロック内でconsole.errorを使用してエラーメッセージを表示します。

  2. 問題2: fetch関数の代わりにaxiosを使用する場合、どのようにコードを変更しますか？

    3. 模範解答: const response = await axios.get(url);に変更し、JSON変換は不要です。

  3. 問題3: 複数のURLからデータを同時に取得するには、どのようにコードを修正しますか？

    4. 模範解答: Promise.allを使用して、複数のfetchData呼び出しをまとめて処理します。

  4. 問題4: エラーハンドリングを改善するために、どのような方法がありますか？

    5. 模範解答: エラーの種類に応じて異なるメッセージを表示する、または再試行するロジックを追加することが考えられます。

  5. 問題5: データ取得時にローディングインジケーターを表示するには、どのように実装しますか？

    6. 模範解答: データ取得前にローディング状態を管理する変数を設定し、取得完了後に更新します。

まとめ

  • 非同期処理は、ウェブアプリケーションにおいて重要な役割を果たします。
  • async/awaitを使用することで、可読性が高くエラーハンドリングが容易なコードを実現できます。
  • 練習問題を通じて、実際の業務で役立つ知識を深めることができます。
RELATED POST