JavaScript中級

中級 JavaScriptで学ぶWebアプリ設計｜練習問題編

 

導入

Webアプリケーションの設計において、ユーザーの操作をスムーズにし、パフォーマンスを最大化することは非常に重要です。このセクションでは、特定のシチュエーションを通じて、JavaScriptを用いたWebアプリ設計の実践的なアプローチを探ります。特に、非同期処理やデータの管理に焦点を当て、実務で役立つ具体的な方法を紹介します。

教科書レベルの解説（Webアプリ設計）

重要な概念の整理

Webアプリケーションでは、ユーザーからのリクエストに迅速に応答するために、非同期処理を効果的に活用する必要があります。特に、APIからデータを取得する際には、Promiseやasync/awaitを使用することで、コードの可読性を向上させることが可能です。さらに、状態管理が複雑になると、適切なデータフローを設計しないと、アプリケーションが不安定になることがあります。

コード例（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();
        return data;
    } catch (error) {
        console.error('Fetch error: ', error);
    }
}

async function displayData() {
    const url = 'https://api.example.com/data';
    const data = await fetchData(url);
    if (data) {
        console.log(data);
        // データをHTMLに表示する処理
    }
}

displayData();

コードの行ごとの解説

  1. async function fetchData(url) { – 非同期関数を定義し、URLを引数として受け取ります。
  2. const response = await fetch(url); – 指定されたURLからデータを取得します。この処理は非同期で行われます。
  3. if (!response.ok) { – レスポンスが正常でない場合、エラーをスローします。
  4. const data = await response.json(); – レスポンスをJSON形式に変換します。
  5. console.error('Fetch error: ', error); – エラーが発生した場合、コンソールにエラーメッセージを表示します。
  6. async function displayData() { – データを表示するための非同期関数を定義します。
  7. const data = await fetchData(url); – データを取得し、変数に格納します。
  8. console.log(data); – 取得したデータをコンソールに表示します。

練習問題編

以下に練習問題を用意しました。各問題に対する模範解答と解説も記載しています。

  1. 問題1: fetchData関数にエラーハンドリングを追加して、エラーが発生した際にユーザーに通知する機能を実装してください。

    模範解答:

    
async function fetchData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return await response.json();
    } catch (error) {
        alert('データの取得に失敗しました: ' + error.message);
    }
}

  2. 問題2: displayData関数を修正して、取得したデータをHTML要素に表示する処理を追加してください。

    模範解答:

    
async function displayData() {
    const url = 'https://api.example.com/data';
    const data = await fetchData(url);
    if (data) {
        const outputElement = document.getElementById('output');
        outputElement.innerHTML = JSON.stringify(data);
    }
}

  3. 問題3: fetchData関数の中で、リトライ機能を実装し、最大3回まで再試行するようにしてください。

    模範解答:

    
async function fetchData(url) {
    let attempts = 0;
    while (attempts < 3) {
        try {
            const response = await fetch(url);
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return await response.json();
        } catch (error) {
            attempts++;
            if (attempts >= 3) {
                alert('データの取得に失敗しました: ' + error.message);
            }
        }
    }
}

まとめ

  • 非同期処理を用いることで、Webアプリケーションのパフォーマンスを向上させることができる。
  • エラーハンドリングやリトライ機能を実装することで、ユーザー体験を改善することが可能である。
  • データの表示に関しても、適切なHTML要素を操作することで、視覚的なフィードバックを提供できる。
RELATED POST