JavaScript中級

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

 

導入

非同期処理は、現代のウェブアプリケーションにおいて欠かせない技術です。特に、APIからデータを取得する際や、複数の処理を同時に行う必要がある場合に、その真価を発揮します。本記事では、非同期処理の一つの具体的なシチュエーションを通じて、JavaScriptにおける実践的なテクニックを学びます。

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

重要な概念の整理

非同期処理を理解するためには、コールバック、Promise、async/awaitといった基本的な構造を押さえることが重要です。特に、Promiseは非同期処理の結果を表現するオブジェクトであり、エラーハンドリングやチェーン処理を容易にします。また、async/awaitはPromiseをより直感的に扱うための構文です。

コード例（JavaScript）


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

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

コードの行ごとの解説

  1. async function fetchData(url): fetchData関数を非同期関数として定義します。
  2. try {…} catch (error): エラーハンドリングのための構造を作ります。
  3. const response = await fetch(url): fetchメソッドを使用してデータを取得します。awaitにより、Promiseが解決されるまで処理を待機します。
  4. if (!response.ok): レスポンスのステータスを確認し、エラーの場合は例外をスローします。
  5. const data = await response.json(): 取得したデータをJSON形式に変換します。
  6. console.log(data): 取得したデータをコンソールに出力します。
  7. console.error(‘Fetch error:’, error): エラーが発生した場合、その内容をコンソールに出力します。

練習問題編

以下の練習問題を解いて、非同期処理の理解を深めましょう。

  1. Promiseを使って、1秒後に数値を返す関数を作成してください。
  2. fetchメソッドを使って、指定したURLからデータを取得する関数を作成し、エラーハンドリングを実装してください。
  3. async/awaitを使用して、複数のAPIからデータを取得し、全てのデータが取得できたら結果を表示する関数を作成してください。
  4. 非同期処理の中で、特定の条件に基づいて処理をスキップする方法を考えてみてください。

模範解答と解説

  1. 
function delay(ms) {
    return new Promise(resolve => setTimeout(() => resolve(ms), ms));
}
delay(1000).then(result => console.log(result));

    1秒後に数値を返すPromiseを作成します。

  2. 
async function fetchData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) throw new Error('Network error');
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('Error:', error);
    }
}
fetchData('https://api.example.com/data');

    fetchメソッドを使用し、エラーハンドリングを行います。

  3. 
async function fetchMultipleData(urls) {
    try {
        const results = await Promise.all(urls.map(url => fetch(url).then(res => res.json())));
        console.log(results);
    } catch (error) {
        console.error('Error:', error);
    }
}
fetchMultipleData(['https://api.example.com/data1', 'https://api.example.com/data2']);

    複数のAPIからデータを取得し、全ての結果を表示します。

  4. 
async function fetchDataWithCondition(url) {
    const response = await fetch(url);
    if (!response.ok) return; // エラー時は処理をスキップ
    const data = await response.json();
    console.log(data);
}
fetchDataWithCondition('https://api.example.com/data');

    条件に基づいて処理をスキップする方法を示します。

まとめ

  • 非同期処理は、現代のアプリケーションにおいて重要な役割を果たします。
  • Promiseやasync/awaitを使うことで、コードがより直感的かつ管理しやすくなります。
  • 実際の業務では、エラーハンドリングや条件分岐を考慮することが求められます。
RELATED POST