JavaScript上級

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

 

導入

非同期処理は、JavaScriptの特性を活かしたプログラミング手法の一つです。特に、APIからデータを取得する際や、ユーザーインターフェースの応答性を保つために不可欠です。本記事では、具体的なシチュエーションを通じて、非同期処理の実践的な利用法とその落とし穴について解説します。

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

重要な概念の整理

非同期処理では、処理が完了するのを待たずに次の処理を進めることができます。これにより、プログラムの効率が向上し、ユーザーにとって快適な体験を提供できます。Promiseやasync/awaitといった構文は、非同期処理を簡潔に記述するための重要なツールです。特に、async/awaitは可読性が高く、エラーハンドリングも容易です。

コード例（JavaScript）


// APIからデータを取得し、処理を行う非同期関数
async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        processData(data);
    } catch (error) {
        console.error('Fetch error:', error);
    }
}

// データ処理関数
function processData(data) {
    console.log('Received data:', data);
}

// 関数を呼び出す
fetchData();

コードの行ごとの解説

  1. async function fetchData() { – 非同期関数を定義します。
  2. const response = await fetch(‘https://api.example.com/data’); – fetch関数を使ってデータを取得し、完了を待ちます。
  3. if (!response.ok) { throw new Error(‘Network response was not ok’); } – HTTPレスポンスが正常でない場合、エラーをスローします。
  4. const data = await response.json(); – レスポンスをJSON形式に変換し、完了を待ちます。
  5. processData(data); – 取得したデータを処理する関数を呼び出します。
  6. catch (error) { console.error(‘Fetch error:’, error); } – エラーが発生した場合、コンソールにエラーメッセージを表示します。

練習問題編

以下の練習問題を解いて、非同期処理に関する理解を深めてください。

  1. 問題1: fetchData関数にタイムアウト機能を追加してください。

    
// 例: タイムアウトを設定するコード
async function fetchDataWithTimeout(url, timeout) {
    const controller = new AbortController();
    const signal = controller.signal;

    const fetchPromise = fetch(url, { signal });
    const timeoutPromise = new Promise((_, reject) => 
        setTimeout(() => reject(new Error('Request timed out')), timeout)
    );

    try {
        const response = await Promise.race([fetchPromise, timeoutPromise]);
        // ここにレスポンス処理を追加
    } catch (error) {
        console.error('Error:', error);
    }
}
  2. 問題2: エラーハンドリングを強化するために、fetchData関数を改良してください。

    
// 例: エラーメッセージをユーザーに表示するコード
async function fetchData() {
    try {
        // fetch処理
    } catch (error) {
        alert('データの取得に失敗しました: ' + error.message);
    }
}
  3. 問題3: 取得したデータをHTMLに表示する関数を作成してください。

    
// 例: データをリストとして表示する関数
function displayData(data) {
    const list = document.createElement('ul');
    data.forEach(item => {
        const listItem = document.createElement('li');
        listItem.textContent = item.name; // itemのプロパティ名に応じて変更
        list.appendChild(listItem);
    });
    document.body.appendChild(list);
}

まとめ

  • 非同期処理は、ユーザー体験を向上させるために不可欠です。
  • Promiseやasync/awaitを活用することで、可読性の高いコードが書けます。
  • エラーハンドリングを適切に行うことで、予期しない問題に対処できます。
RELATED POST