複数データを扱おう

― ループ処理と動的なDOM生成の基本

はじめに

前回は、fetch APIを使って外部のWeb APIから1件のデータを取得し、ページ上に表示する方法を学びました。今回はそれをさらに発展させて、複数件のデータを一括で取得し、リスト形式で画面に出力する方法を学びます。

複数の商品を表示するECサイト、ニュース一覧、SNSの投稿一覧など、多くのWebアプリケーションでは、データの**繰り返し表示（リストレンダリング）**が必要になります。そのために必要なスキルが、ループ処理とDOMの動的生成です。

JavaScriptではこれらを効率的に処理する仕組みが用意されており、理解して使いこなすことでWebページの表現力が飛躍的に高まります。

複数のデータを取得するためのAPIの構造

今回は、前回と同じ「Random User API」を使用します。このAPIは、パラメータを指定することで複数のユーザーデータを一度に取得できます。

例：10人分のユーザーを取得

https://randomuser.me/api/?results=10

このAPIを使うと、results というキーにユーザー情報の配列が格納されたJSONレスポンスが返ってきます。
それをループ処理で1件ずつ処理し、HTMLとして動的に出力していきます。

実装：10人のユーザーリストをページに表示する

HTML

<section>
  <h2>ユーザー一覧</h2>
  <button id="loadUsers">ユーザーを取得</button>
  <ul id="userList"></ul>
</section>

JavaScript（script.js）

const loadBtn = document.getElementById('loadUsers');
const userList = document.getElementById('userList');

loadBtn.addEventListener('click', () => {
  fetch('https://randomuser.me/api/?results=10')
    .then(response => response.json())
    .then(data => {
      userList.innerHTML = ''; // 一度リセット

      data.results.forEach(user => {
        const li = document.createElement('li');
        li.innerHTML = `
          <img src="${user.picture.thumbnail}" alt="ユーザー画像" />
          <span>${user.name.first} ${user.name.last}（${user.email}）</span>
        `;
        userList.appendChild(li);
      });
    })
    .catch(error => {
      console.error('エラーが発生しました:', error);
    });
});

ポイント解説

  • .forEach()を使って配列内のデータを1件ずつ処理
  • document.createElement()で新しいHTML要素を生成
  • innerHTMLで中身を構築し、appendChild()でリストに追加
  • ボタンを押すたびに内容をリセットして、重複表示を防止

HTML要素を動的に追加する基本パターン

JavaScriptで動的にDOM（HTML要素）を生成するには、以下の3ステップを覚えておくと便利です：

  1. document.createElement('要素名')
    → 要素を作る
  2. element.innerHTML = '内容'
    → 中身をセットする
  3. 親要素.appendChild(element)
    → ページに追加する

このパターンを組み合わせれば、どんなリストやカード表示も自由に作れるようになります。

🔗 参考：DOMの操作 – MDN Web Docs

よくあるミスとその対処

  • forEachがエラーになる → .resultsが配列でない可能性、または取得前に処理している
  • 画像が表示されない → APIのレスポンスにある画像URLのキー（thumbnailなど）を確認
  • HTMLが増え続ける → userList.innerHTML = '' で毎回初期化するようにする

また、APIのレスポンス構造を確認したい場合は、console.log(data)で内容をブラウザの開発者ツールに出力してみましょう。

ループのバリエーション：map, for…of, for文など

JavaScriptでは配列を処理する方法が複数あります。代表的なものとして以下のようなループ処理があります：

// forEach
users.forEach(user => {});

// for...of
for (const user of users) {}

// map（新しい配列を作る）
const names = users.map(user => `${user.name.first} ${user.name.last}`);

それぞれ特徴がありますが、DOMに何かを追加するような副作用を伴う処理では forEach や for...of がよく使われます。用途に応じて使い分けるのがポイントです。

🔗 参考：JavaScriptのループ完全ガイド – Qiita

まとめ

複数のデータを取得してページに表示するという処理は、Webアプリ開発の基本中の基本です。
とくに、ECサイトの商品一覧、ブログの投稿一覧、SNSのフィード表示など、リストレンダリングはありとあらゆる場面で登場します。

今回学んだポイント：

  • APIから配列形式でデータを取得し、JavaScriptでループ処理する
  • createElement()とappendChild()を使って動的にDOMを生成する
  • HTML構造の初期化やエラーハンドリングを忘れずに行う

次回は、今回の内容をさらに発展させ、検索機能や絞り込み機能のようなインタラクションを加えて、より使いやすいWeb UIの作り方を学びます。

次回予告

検索・絞り込み機能を実装しよう ― ユーザー操作に応じて表示を制御するインタラクションの基本

コメント

タイトルとURLをコピーしました