TypeScript上級

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

 

導入

非同期処理は、現代のアプリケーション開発において不可欠な要素です。特に、APIからのデータ取得やファイルの読み書きといった操作は、時間がかかるため、非同期で行うことが求められます。本記事では、上級者向けに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 processData(url: string) {
    try {
        const data = await fetchData(url);
        console.log(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);：fetch APIを使って、指定したURLからデータを取得します。
  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(data);：取得したデータをコンソールに出力します。
  8. catch (error) { console.error('Error fetching data:', error); }：エラーが発生した場合に、エラーメッセージを出力します。
  9. processData('https://api.example.com/data');：processData関数を呼び出し、データの取得と処理を開始します。

練習問題編

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

  1. 問題1：fetchData関数を改良して、タイムアウトを設定できるようにしてください。

    
async function fetchDataWithTimeout(url: string, timeout: number): Promise {
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout);
    try {
        const response = await fetch(url, { signal: controller.signal });
        return await response.json();
    } finally {
        clearTimeout(id);
    }
}

  2. 問題2：processData関数を改良し、取得したデータが特定の形式でない場合にエラーメッセージを表示するようにしてください。

    
async function processDataWithValidation(url: string) {
    try {
        const data = await fetchData(url);
        if (!data || typeof data !== 'object') {
            throw new Error('Invalid data format');
        }
        console.log(data);
    } catch (error) {
        console.error('Error processing data:', error);
    }
}

  3. 問題3：複数のAPIからデータを同時に取得し、それらをマージする関数を作成してください。

    
async function fetchMultipleData(urls: string[]): Promise {
    const results = await Promise.all(urls.map(url => fetchData(url)));
    return results.flat();
}

まとめ

  • 非同期処理を効果的に活用することで、アプリケーションの応答性を向上させることができます。
  • エラーハンドリングやデータの検証を行うことで、より堅牢なコードを書くことが可能です。
  • 複数の非同期処理を組み合わせる際は、Promise.allなどを使用して効率的に処理を行いましょう。
RELATED POST