基礎から学ぶJavaScript入門 90日コース | 非同期処理とAPI － Day 67：API × DOM

Day 67：API × DOM

Day 67では、第5フェーズ「非同期処理とAPI」の課題として、取得したデータをDOM操作によって、カード形式、リスト形式、テーブル形式で表示する練習を行います。ここまでの学習では、fetch() を使ってAPIからデータを取得し、その内容を console.log() で確認し、さらにHTMLへ表示する流れを学んできました。Day 61ではAPIデータを画面表示し、Day 66では複数のAPIデータを扱いました。今回は、その表示方法をさらに広げて、「同じデータでも見せ方によって印象も使いやすさも変わる」という点を体験していきます。

初心者の方にとって、ここはとても大切な回です。なぜなら、これまでの学習では「データを表示できること」が主な目標でしたが、Day 67ではそこから一歩進んで、「どのように表示するのがわかりやすいか」を考えるからです。実際のWebアプリでは、取得したデータをただ並べればよいわけではありません。ユーザー一覧ならカード形式が見やすいこともありますし、単純な項目列挙ならリスト形式が向いていることもあります。複数の列を比べたいなら、テーブル形式が便利です。つまり、今回はAPIとDOMの接続を学ぶだけでなく、「見せ方の設計」も学ぶことになります。

初心者の方は、表示形式が増えると難しそうに感じるかもしれません。しかし、根本の流れは変わりません。APIからデータを取得し、そのデータの各要素を見て、必要なHTML要素を作り、内容を入れ、画面へ追加していくだけです。違うのは、「どんなHTML構造を作るか」という点です。つまり、今回の学習の本質は、「データを表示する」という1つの考え方を、カード、リスト、テーブルという3つの形に応用することです。今回も、プログラミング初心者向けに、ステップバイステップで、例題・コード・テンプレートを交えながら丁寧に解説していきます。

まず最初に結論をつかむ

最初に今回の内容を一言でまとめると、Day 67では「同じAPIデータを、DOM操作によって3つの違う表示形式に変換すること」を学びます。

今回の基本的な流れは次の通りです。

• APIからデータを取得する
• データの構造を確認する
• 表示したい形式を決める
• その形式に合ったHTML要素をJavaScriptで作る
• 内容を入れて画面へ追加する

初心者の方は、まず「表示形式が変わっても、やっていることの骨組みは同じ」だと理解すると、かなり安心しやすいです。

なぜAPI × DOMが大切なのか

ここはDay 67の中心です。APIは外部からデータを取ってくるための仕組みであり、DOMはそのデータを画面へ見える形にするための仕組みです。この2つがつながって初めて、実際に使えるWebアプリらしくなります。

たとえば、APIだけ使えても、データを console.log() に出すだけではユーザー向けの画面にはなりません。逆に、DOM操作だけ知っていても、表示するデータがなければ実用的なアプリにはなりません。つまり、APIとDOMは別々の知識ではなく、セットで使うことで価値が出る組み合わせです。

初心者の方は、「APIは材料を集める役目、DOMはその材料を盛り付ける役目」と考えるとイメージしやすいです。

今回なぜ3つの表示形式を学ぶのか

同じデータでも、どんな見せ方をするかで印象や使いやすさが変わります。そのため、カード形式、リスト形式、テーブル形式をそれぞれ体験しておくことはとても大切です。

それぞれの特徴をざっくり言うと、次の通りです。

• カード形式：1件ずつをまとまりとして見せたいときに向いています。
• リスト形式：シンプルに順番に並べたいときに向いています。
• テーブル形式：複数の項目を列ごとに比較したいときに向いています。

初心者の方は、「見た目の違い」ではなく、「何を見やすくしたいかによって表示形式を選ぶ」と考えると実践的です。

今回使うデータを決める

Day 67では、学習用として扱いやすいユーザーデータを使います。たとえば、次の公開APIです。

https://jsonplaceholder.typicode.com/users

https://jsonplaceholder.typicode.com/users

このAPIからは、ユーザー一覧が配列で返ってきます。各ユーザーには、たとえば次のような情報があります。

• `name`：名前
• `email`：メールアドレス
• `phone`：電話番号
• `website`：Webサイト

初心者の方は、今回の目的は新しいAPIを覚えることではなく、「取得したデータをどう表示し分けるか」にあるので、まずはシンプルで見やすいデータを使うと理解しやすいです。

ステップ1：まずはAPIデータを取得する

最初はいつも通り、データを取得します。

async function getUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();

  console.log(users);
}

getUsers();

async function getUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();

  console.log(users);
}

getUsers();

ここで users は配列です。初心者の方は、まずこの配列の中にどんなオブジェクトが入っているかを確認し、「どのプロパティを表示に使うか」を決めることが大切です。

ステップ2：表示先をHTMLに用意する

今回は3つの形式を試すので、それぞれの表示先を用意します。

<h2>カード形式</h2>
<div id="cardContainer"></div>

<h2>リスト形式</h2>
<ul id="listContainer"></ul>

<h2>テーブル形式</h2>
<div id="tableContainer"></div>

<h2>カード形式</h2>
<div id="cardContainer"></div>

<h2>リスト形式</h2>
<ul id="listContainer"></ul>

<h2>テーブル形式</h2>
<div id="tableContainer"></div>

初心者の方は、「HTMLに空の入れ物を作って、JavaScriptで中身を入れる」という基本の考え方をここでも意識するとよいです。

カード形式とは何か

まずカード形式です。カード形式とは、1件ごとのデータをまとまりとして表示する方法です。たとえば、名前、メール、電話番号を1つの箱にまとめて表示する形です。プロフィール表示や商品一覧、記事一覧などでよく使われます。

初心者の方は、カード形式を「1件ずつ独立した小さな画面」と考えるとイメージしやすいです。

ステップ3：カード形式で表示する

カード形式では、各ユーザーごとに div を作り、その中に必要な情報を入れていきます。

function showCards(users) {
  const cardContainer = document.getElementById("cardContainer");
  cardContainer.innerHTML = "";

  users.forEach(function (user) {
    // カード全体の箱を作る
    const card = document.createElement("div");

    // 名前を表示する
    const name = document.createElement("h3");
    name.textContent = user.name;

    // メールアドレスを表示する
    const email = document.createElement("p");
    email.textContent = "メール: " + user.email;

    // 電話番号を表示する
    const phone = document.createElement("p");
    phone.textContent = "電話: " + user.phone;

    // 各要素をカードに追加する
    card.appendChild(name);
    card.appendChild(email);
    card.appendChild(phone);

    // カードを画面に追加する
    cardContainer.appendChild(card);
  });
}

function showCards(users) {
  const cardContainer = document.getElementById("cardContainer");
  cardContainer.innerHTML = "";

  users.forEach(function (user) {
    // カード全体の箱を作る
    const card = document.createElement("div");

    // 名前を表示する
    const name = document.createElement("h3");
    name.textContent = user.name;

    // メールアドレスを表示する
    const email = document.createElement("p");
    email.textContent = "メール: " + user.email;

    // 電話番号を表示する
    const phone = document.createElement("p");
    phone.textContent = "電話: " + user.phone;

    // 各要素をカードに追加する
    card.appendChild(name);
    card.appendChild(email);
    card.appendChild(phone);

    // カードを画面に追加する
    cardContainer.appendChild(card);
  });
}

このコードでは、1人のユーザーごとに1枚のカードを作っています。初心者の方は、カード形式では「1件分の情報をグループ化する」感覚が大切です。

カード形式で特に意識したいこと

カード形式のよさは、1件ごとにまとまりがあることです。そのため、1人の情報をまとめて見せたいときに向いています。一方で、たくさんの件数を細かく比較するのには向かないこともあります。

初心者の方は、「カード形式は比較よりも、1件ごとの見やすさ重視」だと理解すると、ほかの形式との違いが見えやすいです。

リスト形式とは何か

次にリスト形式です。リスト形式は、データを上から下へ順番にシンプルに並べる方法です。もっとも基本的でわかりやすい表示方法の1つです。名前一覧や項目の簡易表示などに向いています。

初心者の方は、リスト形式を「情報を順番に並べるだけのシンプルな表示」と考えるとわかりやすいです。

ステップ4：リスト形式で表示する

リスト形式では、ul の中に li を追加していきます。

function showList(users) {
  const listContainer = document.getElementById("listContainer");
  listContainer.innerHTML = "";

  users.forEach(function (user) {
    // li 要素を作る
    const li = document.createElement("li");

    // 名前とメールアドレスを表示する
    li.textContent = `${user.name} / ${user.email}`;

    // リストに追加する
    listContainer.appendChild(li);
  });
}

function showList(users) {
  const listContainer = document.getElementById("listContainer");
  listContainer.innerHTML = "";

  users.forEach(function (user) {
    // li 要素を作る
    const li = document.createElement("li");

    // 名前とメールアドレスを表示する
    li.textContent = `${user.name} / ${user.email}`;

    // リストに追加する
    listContainer.appendChild(li);
  });
}

このコードでは、各ユーザーを1行でシンプルに表示しています。初心者の方は、リスト形式では「必要最低限の情報を簡潔に見せる」ことが多いと意識すると理解しやすいです。

リスト形式で特に意識したいこと

リスト形式のよさは、構造が単純で作りやすく、見やすいことです。ただし、表示できる情報量が増えると、1行が長くなって見づらくなることもあります。

初心者の方は、「少ない情報を軽く並べるならリスト形式が便利」と覚えておくと役立ちます。

テーブル形式とは何か

次にテーブル形式です。テーブル形式は、列と行で情報を整理して表示する方法です。たとえば、名前、メール、電話番号をそれぞれ列にして、ユーザーごとに1行ずつ並べる形です。複数項目を比較したいときにとても向いています。

初心者の方は、テーブル形式を「表にして比較しやすくする表示」と考えるとイメージしやすいです。

ステップ5：テーブル形式で表示する

テーブル形式は少しだけ構造が増えます。table、thead、tbody、tr、th、td を使います。

function showTable(users) {
  const tableContainer = document.getElementById("tableContainer");
  tableContainer.innerHTML = "";

  // table 要素を作る
  const table = document.createElement("table");

  // ヘッダー部分を作る
  const thead = document.createElement("thead");
  const headerRow = document.createElement("tr");

  const headers = ["名前", "メール", "電話番号"];

  headers.forEach(function (text) {
    const th = document.createElement("th");
    th.textContent = text;
    headerRow.appendChild(th);
  });

  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 本体部分を作る
  const tbody = document.createElement("tbody");

  users.forEach(function (user) {
    const row = document.createElement("tr");

    const nameCell = document.createElement("td");
    nameCell.textContent = user.name;

    const emailCell = document.createElement("td");
    emailCell.textContent = user.email;

    const phoneCell = document.createElement("td");
    phoneCell.textContent = user.phone;

    row.appendChild(nameCell);
    row.appendChild(emailCell);
    row.appendChild(phoneCell);

    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  tableContainer.appendChild(table);
}

function showTable(users) {
  const tableContainer = document.getElementById("tableContainer");
  tableContainer.innerHTML = "";

  // table 要素を作る
  const table = document.createElement("table");

  // ヘッダー部分を作る
  const thead = document.createElement("thead");
  const headerRow = document.createElement("tr");

  const headers = ["名前", "メール", "電話番号"];

  headers.forEach(function (text) {
    const th = document.createElement("th");
    th.textContent = text;
    headerRow.appendChild(th);
  });

  thead.appendChild(headerRow);
  table.appendChild(thead);

  // 本体部分を作る
  const tbody = document.createElement("tbody");

  users.forEach(function (user) {
    const row = document.createElement("tr");

    const nameCell = document.createElement("td");
    nameCell.textContent = user.name;

    const emailCell = document.createElement("td");
    emailCell.textContent = user.email;

    const phoneCell = document.createElement("td");
    phoneCell.textContent = user.phone;

    row.appendChild(nameCell);
    row.appendChild(emailCell);
    row.appendChild(phoneCell);

    tbody.appendChild(row);
  });

  table.appendChild(tbody);
  tableContainer.appendChild(table);
}

このコードでは、列名をヘッダーとして作り、その下に各ユーザーのデータを行ごとに追加しています。初心者の方は、テーブル形式では「列の見出し」と「各行のデータ」を分けて考えることが大切です。

テーブル形式で特に意識したいこと

テーブル形式のよさは、同じ種類の情報を縦横で見比べやすいことです。一方で、情報が多すぎると画面が窮屈になったり、スマートフォンなどでは見づらくなったりすることがあります。

初心者の方は、「比較したい情報が複数列あるときはテーブル形式が強い」と理解すると、使いどころが見えてきます。

3つの表示形式を1つのデータでまとめて試す

では、取得した users データを3つの形式すべてで表示する流れをつなげてみます。

async function loadUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();

  showCards(users);
  showList(users);
  showTable(users);
}

loadUsers();

async function loadUsers() {
  const response = await fetch("https://jsonplaceholder.typicode.com/users");
  const users = await response.json();

  showCards(users);
  showList(users);
  showTable(users);
}

loadUsers();

このように、同じ users 配列を3つの関数に渡すだけで、表示形式を変えられます。初心者の方は、「取得部分は1回、表示方法だけを分ける」という構造を理解すると、コードが整理しやすくなります。

表示ロジックを分けることの大切さ

ここはかなり重要です。初心者の方は、つい1つの関数に全部を書きたくなることがあります。しかし、取得処理と表示処理を分けると、コードが読みやすく、修正しやすくなります。

たとえば今回なら、

• `loadUsers()` はデータ取得担当
• `showCards()` はカード表示担当
• `showList()` はリスト表示担当
• `showTable()` はテーブル表示担当

というように役割分担できます。初心者の方は、「関数ごとに仕事を分ける」という考え方をここで身につけると、その先の開発でとても役立ちます。

そのまま使える完成テンプレート

ここでは、Day 67の内容をまとめた完成テンプレートを紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Day 67 API × DOM</title>
  <style>
    /* カード表示の見た目 */
    .card {
      border: 1px solid #ccc;
      padding: 12px;
      margin-bottom: 12px;
      border-radius: 8px;
      background-color: #f9f9f9;
    }

    /* テーブルの見た目 */
    table {
      width: 100%;
      border-collapse: collapse;
      margin-top: 12px;
    }

    th, td {
      border: 1px solid #ccc;
      padding: 8px;
      text-align: left;
    }

    th {
      background-color: #eee;
    }

    /* リストの余白 */
    li {
      margin-bottom: 6px;
    }
  </style>
</head>
<body>
  <h2>カード形式</h2>
  <div id="cardContainer"></div>

  <h2>リスト形式</h2>
  <ul id="listContainer"></ul>

  <h2>テーブル形式</h2>
  <div id="tableContainer"></div>

  <script>
    // カード形式で表示する関数
    function showCards(users) {
      const cardContainer = document.getElementById("cardContainer");
      cardContainer.innerHTML = "";

      users.forEach(function (user) {
        // カード用の div を作る
        const card = document.createElement("div");
        card.classList.add("card");

        // 名前
        const name = document.createElement("h3");
        name.textContent = user.name;

        // メール
        const email = document.createElement("p");
        email.textContent = "メール: " + user.email;

        // 電話番号
        const phone = document.createElement("p");
        phone.textContent = "電話: " + user.phone;

        // Webサイト
        const website = document.createElement("p");
        website.textContent = "Webサイト: " + user.website;

        // カードに要素を追加する
        card.appendChild(name);
        card.appendChild(email);
        card.appendChild(phone);
        card.appendChild(website);

        // 画面に追加する
        cardContainer.appendChild(card);
      });
    }

    // リスト形式で表示する関数
    function showList(users) {
      const listContainer = document.getElementById("listContainer");
      listContainer.innerHTML = "";

      users.forEach(function (user) {
        // li 要素を作る
        const li = document.createElement("li");

        // 名前とメールアドレスを表示する
        li.textContent = `${user.name} / ${user.email}`;

        listContainer.appendChild(li);
      });
    }

    // テーブル形式で表示する関数
    function showTable(users) {
      const tableContainer = document.getElementById("tableContainer");
      tableContainer.innerHTML = "";

      // table 要素を作る
      const table = document.createElement("table");

      // ヘッダーを作る
      const thead = document.createElement("thead");
      const headerRow = document.createElement("tr");

      const headers = ["名前", "メール", "電話番号", "Webサイト"];

      headers.forEach(function (text) {
        const th = document.createElement("th");
        th.textContent = text;
        headerRow.appendChild(th);
      });

      thead.appendChild(headerRow);
      table.appendChild(thead);

      // 本体を作る
      const tbody = document.createElement("tbody");

      users.forEach(function (user) {
        const row = document.createElement("tr");

        const nameCell = document.createElement("td");
        nameCell.textContent = user.name;

        const emailCell = document.createElement("td");
        emailCell.textContent = user.email;

        const phoneCell = document.createElement("td");
        phoneCell.textContent = user.phone;

        const websiteCell = document.createElement("td");
        websiteCell.textContent = user.website;

        row.appendChild(nameCell);
        row.appendChild(emailCell);
        row.appendChild(phoneCell);
        row.appendChild(websiteCell);

        tbody.appendChild(row);
      });

      table.appendChild(tbody);
      tableContainer.appendChild(table);
    }

    // APIからデータを取得して3つの形式で表示する関数
    async function loadUsers() {
      try {
        const response = await fetch("https://jsonplaceholder.typicode.com/users");

        // HTTPエラーを確認する
        if (!response.ok) {
          throw new Error("ユーザーデータの取得に失敗しました。");
        }

        const users = await response.json();

        // 3つの形式で表示する
        showCards(users);
        showList(users);
        showTable(users);
      } catch (error) {
        console.log("エラー詳細:", error);
      }
    }

    // データ取得を実行する
    loadUsers();
  </script>
</body>
</html>

この完成テンプレートの見どころ

初心者の方は、この完成テンプレートの中で、特に次の点を意識して見ると理解が深まりやすいです。

• データ取得は `loadUsers()` にまとまっていること
• 表示形式ごとに関数が分かれていること
• 同じ `users` データを3回使っていること
• カード・リスト・テーブルで作るHTML要素が違うこと

特に重要なのは、「APIの結果は同じでも、DOMの組み立て方で見た目が変わる」という点です。

どの形式をいつ使うべきか

ここは実践的にとても重要です。初心者の方は、技術として作れるようになるだけでなく、「どんなときにどれを選ぶか」も考えられるとレベルが上がります。

• カード形式は、プロフィールや商品など、1件ごとにまとまりを見せたいときに向いています。
• リスト形式は、名前一覧やシンプルな候補表示など、軽く並べたいときに向いています。
• テーブル形式は、複数項目を比較したいときに向いています。

つまり、表示形式は見た目の好みだけでなく、データの性質と目的によって選ぶものです。

情報セキュリティの観点での注意

今回も、外部APIから取得したデータを画面へ表示しています。そのため、基本姿勢としては、外部データをそのまま強く信頼しすぎないことが大切です。学習段階では信頼できる練習用APIを使っていますが、それでもまずは textContent を中心に、安全に文字列を表示する習慣を身につけるとよいです。また、表示項目が増えるほど、どの情報を見せるべきかを考える必要があります。初心者の方は、「表示できること」と「表示してよいこと」は別の視点だと意識すると、安全な開発感覚が育ちます。

初心者が特に注意したいポイント

Day 67では、次の点を特に意識すると理解が深まりやすいです。

• 取得したデータは同じでも、表示形式は変えられます。
• カード形式は1件ごとのまとまりを見せるのに向いています。
• リスト形式はシンプルな一覧表示に向いています。
• テーブル形式は複数項目の比較に向いています。
• 取得処理と表示処理を分けると、コードが整理しやすくなります。

特に重要なのは、「データを表示する」とは単に画面へ出すことではなく、「見やすい形に組み立てること」でもあるという点です。

Day 67のゴールを整理する

Day 67では、次のことができるようになっていれば十分です。

• APIから取得したデータをDOM操作で表示できる
• カード形式で1件ずつ表示できる
• リスト形式でシンプルに一覧表示できる
• テーブル形式で項目ごとに整理して表示できる
• 表示形式ごとに関数を分けて整理できる

ここまでできれば、Day 67としてはとても順調です。API取得の知識が、画面設計やUI表現へしっかりつながっています。

まとめ

Day 67では、第5フェーズ「非同期処理とAPI」の課題として、取得したデータをカード形式、リスト形式、テーブル形式で表示する練習を行いました。APIはデータを取得する役割を持ち、DOMはそのデータをユーザーが見やすい形で画面へ反映する役割を持ちます。今回は、同じユーザーデータを使いながら、カード形式では1件ごとのまとまりとして、リスト形式ではシンプルな一覧として、テーブル形式では比較しやすい表として表示しました。これにより、「同じデータでも見せ方を変えられる」という感覚を身につけることができます。

特に大切なのは、表示形式によって見やすさや使いやすさが変わるということです。カード形式はまとまりを見せるのに強く、リスト形式は簡潔な一覧に向いており、テーブル形式は複数項目の比較に向いています。また、取得処理と表示処理を分けて関数化することで、コードを整理しやすくなることも重要な学びです。

次に進む前に、今回のテンプレートを実際に動かし、カードに会社名を追加したり、リスト形式を電話番号付きにしたり、テーブルの列を増減させたりしてみるのがおすすめです。そして、「なぜこの情報はこの表示形式が見やすいのか」を自分の言葉で説明できるようになると、Day 67の理解がかなり深まっています。