JavaScriptのループを使ったAPIデータ処理の方法

JavaScriptを使ってAPIからデータを取得し、それを処理する技術は、現代のWeb開発において非常に重要です。API（Application Programming Interface）は、異なるソフトウェア間でデータや機能をやり取りするためのインターフェースを提供します。APIを活用することで、他のシステムやサービスから必要なデータを取得し、それを元にしたアプリケーションを作成することが可能になります。

本記事では、JavaScriptを使ってAPIからデータを取得し、そのデータをループ処理して活用する方法について詳しく解説します。具体的には、APIとは何か、JavaScriptでのAPIリクエストの方法、ループ処理の基本、APIデータのループ処理、実践例、エラーハンドリング、応用例、パフォーマンス最適化、デバッグの方法、そして演習問題といったトピックを順を追って説明します。

これにより、APIデータの扱い方やJavaScriptのループ処理に関する知識を深め、実践的なスキルを習得することができるでしょう。

APIとは何か
JavaScriptでのAPIリクエスト
ループ処理の基本
APIデータのループ処理
実践例: ユーザーデータの表示
エラーハンドリング
応用例: データのフィルタリング
パフォーマンス最適化
デバッグの方法
演習問題
まとめ

APIとは何か

API（Application Programming Interface）とは、異なるソフトウェアアプリケーションが互いに通信するためのインターフェースを提供する仕組みです。APIは、特定の機能やデータを外部のプログラムから利用可能にし、アプリケーション間の連携を容易にします。

APIの基本概念

APIは、リクエストとレスポンスの形式で通信を行います。クライアント（リクエストを送る側）は、サーバー（リクエストを受けて処理する側）に特定のURLに対してHTTPリクエストを送信し、サーバーはそれに対するデータや情報をレスポンスとして返します。

APIの重要性

APIの利用には以下の利点があります。

データの共有と統合

異なるシステム間でデータを共有しやすくなり、統合的なサービスを構築できます。

機能の再利用

一度作成した機能をAPIとして公開することで、他のプロジェクトや開発者がその機能を再利用できます。

開発の効率化

外部のサービスやライブラリをAPI経由で利用することで、ゼロから開発する手間を省き、開発スピードを向上させることができます。

APIの種類

APIにはいくつかの種類がありますが、最も一般的なのはREST APIとGraphQLです。REST APIはHTTPメソッド（GET、POST、PUT、DELETEなど）を使ってリソースにアクセスし、操作を行います。一方、GraphQLはクエリ言語を使用して、クライアントが必要とするデータを正確に取得することができます。

APIは、Webアプリケーション、モバイルアプリケーション、デスクトップアプリケーションなど、さまざまなプラットフォームで広く利用されており、現代のソフトウェア開発において欠かせない要素となっています。

JavaScriptでのAPIリクエスト

JavaScriptを使ってAPIにリクエストを送信し、データを取得するための基本的な方法を紹介します。APIリクエストの方法としては、fetch関数が一般的に使用されます。

fetch関数とは

fetch関数は、JavaScriptの組み込み関数で、ネットワークリクエストを行うために使用されます。非同期処理をサポートしており、Promiseを返すため、レスポンスを待つ間に他の処理を続行できます。

fetch関数の基本的な使い方

以下は、fetch関数を使ってAPIリクエストを送信し、レスポンスを処理する基本的な例です。

// APIのエンドポイントURL
const apiUrl = 'https://api.example.com/data';

// fetch関数を使ったAPIリクエスト
fetch(apiUrl)
  .then(response => {
    // レスポンスが成功したかどうかをチェック
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    // レスポンスをJSONとして解析
    return response.json();
  })
  .then(data => {
    // 取得したデータをコンソールに表示
    console.log(data);
  })
  .catch(error => {
    // エラーハンドリング
    console.error('There has been a problem with your fetch operation:', error);
  });

HTTPメソッドの指定

fetch関数は、デフォルトでGETリクエストを送信しますが、POST、PUT、DELETEなどの他のHTTPメソッドを使用することもできます。これには、オプションオブジェクトを渡してメソッドやヘッダーを指定します。

// POSTリクエストの例
const postData = {
  name: 'John Doe',
  email: 'john.doe@example.com'
};

fetch(apiUrl, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(postData)
})
  .then(response => response.json())
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

非同期関数とasync/await

非同期処理をよりシンプルに書くために、async/awaitを使用することもできます。

async function fetchData() {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
}

fetchData();

fetch関数を使うことで、APIリクエストを簡単に行い、取得したデータを処理することができます。次に、このデータをループで処理する方法について解説します。

ループ処理の基本

JavaScriptには、データの反復処理を行うためのいくつかのループ文があります。ここでは、代表的なループ文とその使い方について説明します。

forループ

forループは、指定した回数だけ繰り返し処理を行うために使用されます。構文は以下の通りです。

for (let i = 0; i < 10; i++) {
  console.log(i);
}

この例では、変数iが0から9までの値を取り、各値がコンソールに出力されます。

whileループ

whileループは、指定された条件が真である間、処理を繰り返します。

let i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

この例では、変数iが0から9までの値を取り、条件が真である間、コンソールに出力されます。

do…whileループ

do...whileループは、少なくとも一度は処理を行い、その後条件が真である間、処理を繰り返します。

let i = 0;
do {
  console.log(i);
  i++;
} while (i < 10);

この例でも、変数iが0から9までの値を取り、各値がコンソールに出力されます。

for…ofループ

for...ofループは、配列やその他の反復可能なオブジェクトを反復処理するために使用されます。

const array = [1, 2, 3, 4, 5];
for (const value of array) {
  console.log(value);
}

この例では、配列の各要素がコンソールに出力されます。

forEachメソッド

配列にはforEachメソッドもあり、各要素に対して指定した関数を実行します。

const array = [1, 2, 3, 4, 5];
array.forEach(value => {
  console.log(value);
});

この例でも、配列の各要素がコンソールに出力されます。

ループの使い分け

ループの選択は、処理するデータの種類や処理内容に依存します。例えば、単純に特定の回数だけ処理を繰り返したい場合はforループを使い、配列やリストを反復処理したい場合はfor...ofやforEachを使うと良いでしょう。

これらのループ文を理解し、適切に使いこなすことで、効率的なデータ処理が可能になります。次に、これらのループを使ってAPIから取得したデータを処理する方法について説明します。

APIデータのループ処理

APIから取得したデータをループで処理する方法について解説します。ここでは、具体的な例を使って、APIデータの処理手順を説明します。

データの取得

まず、APIからデータを取得します。以下は、fetch関数を使ってAPIからデータを取得する基本的な例です。

const apiUrl = 'https://api.example.com/data';

async function fetchData() {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
}

fetchData().then(data => {
  processData(data);
});

データのループ処理

取得したデータをループで処理します。ここでは、for...ofループを使用して、データの各アイテムを処理する方法を示します。

function processData(data) {
  for (const item of data) {
    console.log(item);
    // ここで各アイテムの処理を行う
  }
}

例えば、APIから取得したデータがユーザー情報のリストである場合、各ユーザーの名前をコンソールに出力するコードは次のようになります。

function processData(data) {
  for (const user of data) {
    console.log(`Name: ${user.name}, Email: ${user.email}`);
  }
}

別のループの使用例

他のループを使用することもできます。例えば、forEachメソッドを使用する場合は以下のようになります。

function processData(data) {
  data.forEach(user => {
    console.log(`Name: ${user.name}, Email: ${user.email}`);
  });
}

入れ子になったデータの処理

APIから取得するデータが入れ子構造になっている場合、ネストされたループを使用して処理します。例えば、ユーザー情報に関連する注文履歴が含まれている場合、以下のように処理します。

function processData(data) {
  data.forEach(user => {
    console.log(`Name: ${user.name}, Email: ${user.email}`);
    user.orders.forEach(order => {
      console.log(`  Order ID: ${order.id}, Product: ${order.product}`);
    });
  });
}

この例では、各ユーザーの情報とそのユーザーに関連する注文情報を出力しています。

まとめ

APIから取得したデータをループ処理する方法を学ぶことで、複雑なデータ操作や表示を効率的に行うことができます。次に、実践的な例としてユーザーデータの表示方法について解説します。

実践例: ユーザーデータの表示

ここでは、具体的な例として、APIからユーザーデータを取得し、それをHTMLに表示する方法を解説します。ユーザーデータには名前やメールアドレスなどの基本情報が含まれています。

HTMLの準備

まず、データを表示するためのHTMLを準備します。以下の例では、ユーザー情報を表示するためのリストを用意します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ユーザーデータの表示</title>
</head>
<body>
  <h1>ユーザーリスト</h1>
  <ul id="user-list"></ul>

  <script src="script.js"></script>
</body>
</html>

JavaScriptの実装

次に、APIからデータを取得し、それをHTMLに挿入するJavaScriptコードを実装します。

const apiUrl = 'https://api.example.com/users';

// データを取得し、表示する関数
async function fetchAndDisplayUsers() {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    displayUsers(data);
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
}

// データをHTMLに表示する関数
function displayUsers(users) {
  const userList = document.getElementById('user-list');
  userList.innerHTML = ''; // リストを初期化

  users.forEach(user => {
    const listItem = document.createElement('li');
    listItem.textContent = `Name: ${user.name}, Email: ${user.email}`;
    userList.appendChild(listItem);
  });
}

// データ取得と表示を実行
fetchAndDisplayUsers();

コードの解説

APIエンドポイントの設定:
const apiUrl = 'https://api.example.com/users'; でAPIのURLを設定します。
データの取得と表示:
fetchAndDisplayUsers関数でAPIからデータを取得し、そのデータをdisplayUsers関数に渡してHTMLに表示します。
エラーハンドリング:
try...catchブロックでエラーをキャッチし、コンソールに表示します。
HTMLへのデータ挿入:
displayUsers関数で、取得したユーザーデータをループで処理し、<ul>要素に各ユーザーの情報を<li>要素として追加します。

この方法を使えば、APIから取得したデータを簡単にHTMLに表示することができます。次に、APIリクエストのエラーハンドリング方法について説明します。

エラーハンドリング

APIリクエストの際にエラーが発生することはよくあります。エラーハンドリングを適切に行うことで、ユーザーにわかりやすいエラーメッセージを表示し、アプリケーションの信頼性を向上させることができます。ここでは、JavaScriptでのエラーハンドリングの方法について説明します。

fetch関数のエラーハンドリング

fetch関数はPromiseを返します。thenメソッドとcatchメソッドを使ってエラーを処理することができます。また、async/await構文を使う場合はtry...catchブロックでエラーをキャッチします。

then/catchを使った例

以下は、thenメソッドとcatchメソッドを使ってエラーハンドリングを行う例です。

fetch(apiUrl)
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    return response.json();
  })
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('There has been a problem with your fetch operation:', error);
  });

try…catchを使った例

async/awaitを使った場合のエラーハンドリングの例です。

async function fetchData() {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
}

fetchData();

ユーザーへのエラーメッセージ表示

エラーが発生した場合にユーザーに対して適切なエラーメッセージを表示する方法を紹介します。以下は、エラーが発生した際にメッセージを表示する例です。

async function fetchData() {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    displayData(data);
  } catch (error) {
    displayError(error.message);
  }
}

function displayData(data) {
  // データ表示の処理
}

function displayError(message) {
  const errorElement = document.getElementById('error-message');
  errorElement.textContent = message;
  errorElement.style.display = 'block';
}

// HTML側にエラーメッセージを表示するための要素を追加
document.body.innerHTML += '<div id="error-message" style="display:none; color: red;"></div>';

fetchData();

この例では、エラーが発生した場合に、displayError関数が呼び出され、エラーメッセージが画面に表示されます。

よくあるエラーと対策

いくつかの一般的なエラーとその対策について説明します。

ネットワークエラー

ネットワークエラーが発生した場合、サーバーがダウンしているか、ネットワーク接続に問題がある可能性があります。この場合、ユーザーにネットワークの確認を促すメッセージを表示します。

404エラー（Not Found）

指定したAPIエンドポイントが見つからない場合に発生します。エンドポイントのURLが正しいか確認します。

500エラー（Internal Server Error）

サーバー側で問題が発生した場合に返されるエラーです。この場合、しばらく待ってから再度リクエストを試みるか、サーバー管理者に連絡します。

エラーハンドリングを適切に行うことで、ユーザーに対してより良い体験を提供し、アプリケーションの信頼性を向上させることができます。次に、取得したデータをフィルタリングする方法について説明します。

応用例: データのフィルタリング

APIから取得したデータをそのまま表示するだけでなく、必要に応じてデータをフィルタリングすることができます。ここでは、ユーザーデータをフィルタリングする方法について説明します。

データのフィルタリングとは

データのフィルタリングは、特定の条件に一致するデータのみを抽出するプロセスです。例えば、ユーザーリストから特定の年齢以上のユーザーのみを表示したり、特定の文字列を含むデータを抽出したりすることができます。

フィルタリングの実装方法

JavaScriptでは、配列のfilterメソッドを使用してデータをフィルタリングすることができます。以下に、ユーザーデータをフィルタリングする具体的な例を示します。

const apiUrl = 'https://api.example.com/users';

// データを取得し、表示する関数
async function fetchAndDisplayUsers() {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    const filteredData = filterUsers(data, 'example.com');
    displayUsers(filteredData);
  } catch (error) {
    displayError(error.message);
  }
}

// ユーザーデータをフィルタリングする関数
function filterUsers(users, domain) {
  return users.filter(user => user.email.endsWith(`@${domain}`));
}

// データをHTMLに表示する関数
function displayUsers(users) {
  const userList = document.getElementById('user-list');
  userList.innerHTML = ''; // リストを初期化

  users.forEach(user => {
    const listItem = document.createElement('li');
    listItem.textContent = `Name: ${user.name}, Email: ${user.email}`;
    userList.appendChild(listItem);
  });
}

// エラーメッセージを表示する関数
function displayError(message) {
  const errorElement = document.getElementById('error-message');
  errorElement.textContent = message;
  errorElement.style.display = 'block';
}

// HTML側にエラーメッセージを表示するための要素を追加
document.body.innerHTML += '<div id="error-message" style="display:none; color: red;"></div>';

fetchAndDisplayUsers();

コードの解説

データの取得と表示:
fetchAndDisplayUsers関数でAPIからデータを取得し、フィルタリングして表示します。
フィルタリングの条件:
filterUsers関数で、ユーザーのメールアドレスが特定のドメイン（例：example.com）で終わるユーザーのみを抽出します。
表示処理:
フィルタリングされたデータをdisplayUsers関数でHTMLに表示します。
エラーハンドリング:
displayError関数でエラーメッセージを表示します。

その他のフィルタリング例

他のフィルタリング条件を使った例も紹介します。

特定の年齢以上のユーザーをフィルタリング

function filterUsersByAge(users, minAge) {
  return users.filter(user => user.age >= minAge);
}

特定の文字列を含む名前のユーザーをフィルタリング

function filterUsersByName(users, searchString) {
  return users.filter(user => user.name.includes(searchString));
}

フィルタリングを適用することで、必要なデータだけを効率的に抽出し、表示することができます。次に、ループ処理のパフォーマンスを最適化するためのテクニックについて解説します。

パフォーマンス最適化

JavaScriptで大量のデータをループ処理する際には、パフォーマンスの最適化が重要です。ここでは、ループ処理のパフォーマンスを向上させるためのテクニックを紹介します。

効率的なループの選択

ループ処理のパフォーマンスは、使用するループの種類によって異なる場合があります。以下に、それぞれのループの特徴を示します。

forループ

forループは、一般的に最も高速なループの一つです。ループの初期化、条件判定、インクリメントが一行にまとめられているため、効率的です。

for (let i = 0; i < data.length; i++) {
  console.log(data[i]);
}

for…ofループ

for...ofループは、配列や反復可能なオブジェクトを処理する際に便利ですが、forループに比べて若干遅くなることがあります。

for (const item of data) {
  console.log(item);
}

forEachメソッド

forEachメソッドは可読性が高いですが、内部的に関数呼び出しが行われるため、forループよりもパフォーマンスが低下することがあります。

data.forEach(item => {
  console.log(item);
});

ループ内での不要な処理を避ける

ループ内で不要な処理を避けることで、パフォーマンスを向上させることができます。例えば、ループ内でDOM操作や関数呼び出しを行うと、パフォーマンスが低下する原因となります。

非効率な例

for (let i = 0; i < data.length; i++) {
  document.getElementById('item').textContent = data[i];
}

効率的な例

const element = document.getElementById('item');
for (let i = 0; i < data.length; i++) {
  element.textContent += data[i];
}

データの事前計算

ループ内で頻繁に使用する値や計算結果は、事前に計算して変数に保存することでパフォーマンスを向上させることができます。

非効率な例

for (let i = 0; i < data.length; i++) {
  console.log(data.length); // 毎回data.lengthを計算
}

効率的な例

const length = data.length;
for (let i = 0; i < length; i++) {
  console.log(length); // 事前に計算したlengthを使用
}

非同期処理の活用

大量のデータを処理する場合、非同期処理を活用することでUIの応答性を保つことができます。setTimeoutやrequestAnimationFrameを使って処理を分割し、ブラウザがUIを更新する時間を確保します。

非同期処理の例

function processLargeData(data) {
  let index = 0;

  function processChunk() {
    const chunkSize = 100;
    const end = Math.min(index + chunkSize, data.length);

    for (let i = index; i < end; i++) {
      console.log(data[i]);
    }

    index = end;
    if (index < data.length) {
      setTimeout(processChunk, 0); // 次のチャンクを処理
    }
  }

  processChunk();
}

processLargeData(largeData);

Web Workersの利用

Web Workersを使って、メインスレッドとは別に重い処理を行うことで、UIの応答性を保ちつつ、パフォーマンスを向上させることができます。

Web Workerの例

// worker.js
self.addEventListener('message', function(e) {
  const data = e.data;
  const result = data.map(item => item * 2); // 例として、データを2倍にする処理
  self.postMessage(result);
});

// メインスクリプト
const worker = new Worker('worker.js');
worker.postMessage(largeData);

worker.addEventListener('message', function(e) {
  const processedData = e.data;
  console.log(processedData);
});

これらのテクニックを活用することで、JavaScriptでのループ処理のパフォーマンスを最適化し、効率的なデータ処理を実現することができます。次に、APIデータ処理におけるデバッグの方法について説明します。

デバッグの方法

APIデータの処理において、デバッグは重要なステップです。ここでは、JavaScriptでのデバッグ方法と、APIデータ処理に特化したテクニックについて説明します。

ブラウザのデベロッパーツールを活用する

ブラウザのデベロッパーツールは、JavaScriptのデバッグに非常に役立ちます。Google Chrome、Firefox、Microsoft Edgeなどの主要なブラウザには、デベロッパーツールが組み込まれています。

コンソール

console.log()を使って変数の値やエラー情報を出力します。これにより、プログラムの実行状況をリアルタイムで確認できます。

console.log('Fetching data...');
console.log(data);

ブレークポイント

デベロッパーツールを使用して、コードの特定の行にブレークポイントを設定できます。ブレークポイントを設定すると、その行でコードの実行が一時停止し、変数の値を調査できます。

ネットワークタブ

APIリクエストの詳細を確認するために、ネットワークタブを使用します。リクエストとレスポンスのヘッダーやペイロードを確認することで、リクエストが正しく送信されているか、レスポンスが正しい形式で返されているかを確認できます。

ステップ実行

デベロッパーツールを使ってコードをステップ実行し、プログラムの流れを確認します。ステップイン、ステップオーバー、ステップアウトの各操作を使って、関数の内部処理やループの挙動を詳しく調査できます。

APIレスポンスの検証

APIからのレスポンスが予期した形式でない場合、JSONレスポンスの構造を検証します。

fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    if (!Array.isArray(data)) {
      throw new Error('Expected an array of users');
    }
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

エラーハンドリングの強化

エラーハンドリングを適切に実装することで、問題の原因を特定しやすくなります。例えば、HTTPステータスコードに基づいてエラーを分類します。

async function fetchData() {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      switch (response.status) {
        case 404:
          throw new Error('Resource not found');
        case 500:
          throw new Error('Internal server error');
        default:
          throw new Error('Unknown error');
      }
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Fetch error:', error);
  }
}

fetchData();

外部ツールの使用

PostmanやInsomniaなどのツールを使用して、APIリクエストを独立してテストします。これにより、API自体の動作確認が容易になり、コード内の問題とAPIの問題を切り分けて調査できます。

コーディングスタイルの改善

コードの可読性を高めるために、適切な命名規則やコメントを使用します。また、コードをモジュール化し、再利用可能な関数やコンポーネントに分割することで、デバッグが容易になります。

例外のキャッチと再スロー

エラーハンドリングの際に、例外をキャッチして再スローすることで、エラーの発生場所を特定しやすくなります。

async function fetchData() {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Fetch error:', error);
    throw error; // 再スロー
  }
}

fetchData().catch(error => {
  // ここでエラーの処理を行う
});

デバッグは、プログラムの品質を向上させ、予期しない動作を防ぐために不可欠です。次に、学習内容を確認するための演習問題を提供します。

演習問題

ここでは、これまで学んだ内容を確認するための演習問題を提供します。これらの問題を解くことで、APIデータの処理やエラーハンドリング、デバッグ方法についての理解を深めることができます。

演習問題1: APIデータの取得と表示

以下のAPIエンドポイントからユーザーデータを取得し、HTMLに表示するコードを書いてください。
APIエンドポイント: https://jsonplaceholder.typicode.com/users

要件:

APIからデータを取得する
各ユーザーの名前とメールアドレスを表示する
エラーハンドリングを実装する

ヒント:

fetch関数を使用します
エラーハンドリングにはtry...catchを使用します
取得したデータをループで処理してHTMLに挿入します

解答例:

const apiUrl = 'https://jsonplaceholder.typicode.com/users';

async function fetchAndDisplayUsers() {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    displayUsers(data);
  } catch (error) {
    displayError(error.message);
  }
}

function displayUsers(users) {
  const userList = document.getElementById('user-list');
  userList.innerHTML = ''; // リストを初期化

  users.forEach(user => {
    const listItem = document.createElement('li');
    listItem.textContent = `Name: ${user.name}, Email: ${user.email}`;
    userList.appendChild(listItem);
  });
}

function displayError(message) {
  const errorElement = document.getElementById('error-message');
  errorElement.textContent = message;
  errorElement.style.display = 'block';
}

document.body.innerHTML += '<div id="error-message" style="display:none; color: red;"></div>';
document.body.innerHTML += '<ul id="user-list"></ul>';

fetchAndDisplayUsers();

演習問題2: データのフィルタリング

前の問題で取得したユーザーデータを、名前が’A’で始まるユーザーのみ表示するようにフィルタリングしてください。

要件:

データのフィルタリングを実装する
フィルタリングされたデータのみを表示する

ヒント:

配列のfilterメソッドを使用します

解答例:

function filterUsers(users) {
  return users.filter(user => user.name.startsWith('A'));
}

async function fetchAndDisplayUsers() {
  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('Network response was not ok ' + response.statusText);
    }
    const data = await response.json();
    const filteredData = filterUsers(data);
    displayUsers(filteredData);
  } catch (error) {
    displayError(error.message);
  }
}

fetchAndDisplayUsers();

演習問題3: パフォーマンスの最適化

大量のユーザーデータを処理する際のパフォーマンスを最適化するために、非同期処理を使用してデータをチャンク（小分け）に処理する関数を実装してください。

要件:

データを一定サイズのチャンクに分割して処理する
非同期処理を使ってブラウザの応答性を維持する

ヒント:

setTimeoutを使用して処理を分割します

解答例:

function processLargeData(data) {
  let index = 0;
  const chunkSize = 10; // 一度に処理するデータの量

  function processChunk() {
    const end = Math.min(index + chunkSize, data.length);
    for (let i = index; i < end; i++) {
      console.log(data[i]);
    }
    index = end;
    if (index < data.length) {
      setTimeout(processChunk, 0); // 次のチャンクを処理
    }
  }

  processChunk();
}

fetch(apiUrl)
  .then(response => response.json())
  .then(data => {
    processLargeData(data);
  })
  .catch(error => {
    console.error('Fetch error:', error);
  });

これらの演習問題を解くことで、APIデータの処理に関する知識を実践的に身につけることができます。次に、本記事の要点を振り返り、今後の学習方法を提案します。