【JavaScript入門】APIレスポンスを画面に反映する方法｜fetchで取得したデータをDOMに表示する手順を初心者向けに解説

API から取得したデータを画面に表示する処理は、Web アプリ開発で最も頻繁に使われる基本テクニックです。
この記事では、fetch で取得した JSON を DOM に反映する方法から、リスト表示・テーブル表示・ローディングやエラー表示まで、実務で役立つ UI 更新のパターンを分かりやすく解説します。

APIレスポンスを画面に反映する基本の流れ

API通信でデータを取得して画面に表示する流れは次の通りです。

1. fetch でデータを取得する
2. JSON に変換する
3. DOM を操作して画面に反映する

この3ステップを理解すれば、ほとんどの API 表示が作れます。

基本例：取得したデータを画面に表示する

まずは最もシンプルな例から。

async function loadPost() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await res.json();

  document.getElementById("title").textContent = data.title;
  document.getElementById("body").textContent = data.body;
}

loadPost();

HTML側：

<h2 id="title"></h2>
<p id="body"></p>

API のレスポンス（JSON）を DOM に代入するだけで表示できます。

リスト表示（複数データ）

複数のデータをリストで表示する例です。

async function loadPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  const posts = await res.json();

  const list = document.getElementById("postList");

  posts.slice(0, 5).forEach(post => {
    const li = document.createElement("li");
    li.textContent = post.title;
    list.appendChild(li);
  });
}

loadPosts();

HTML側：

<ul id="postList"></ul>

テーブル表示（実務でよく使う）

API のデータを表形式で表示する例です。

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

  const tbody = document.getElementById("userTable");

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

    tr.innerHTML = `
      ${user.id}
      ${user.name}
      ${user.email}
    `;

    tbody.appendChild(tr);
  });
}

loadUsers();

HTML側：

<table border="1">
  <thead>
    <tr><th>ID</th><th>Name</th><th>Email</th></tr>
  </thead>
  <tbody id="userTable"></tbody>
</table>

ローディング表示を追加する（UX向上）

API通信は時間がかかるため、
ローディング表示 を出すのが実務では必須です。

async function loadData() {
  const loading = document.getElementById("loading");
  loading.textContent = "読み込み中...";

  try {
    const res = await fetch("/api/data");
    const data = await res.json();

    document.getElementById("result").textContent = data.message;

  } catch (err) {
    document.getElementById("result").textContent = "エラーが発生しました";

  } finally {
    loading.textContent = "";
  }
}

loadData();

HTML側：

<div id="loading"></div>
<div id="result"></div>

エラー表示を追加する（実務では必須）

API が失敗した場合に備えて、
ユーザーに「何が起きたか」を伝える UI が必要です。

try {
  const res = await fetch("/api");

  if (!res.ok) {
    throw new Error("HTTPエラー: " + res.status);
  }

  const data = await res.json();
  result.textContent = data.message;

} catch (err) {
  result.textContent = "データの取得に失敗しました";
}

実務でのベストプラクティス

• ローディング表示を出す
• エラー時のメッセージを表示する
• DOM操作は最小限にする（パフォーマンス）
• innerHTML の使いすぎに注意（XSS対策）
• データが空の場合の表示も用意する

API のレスポンスを画面に反映する処理は、
Webアプリの基礎であり、実務でも最もよく使われる技術です。

まとめ

API のレスポンスを画面に反映するには、
fetch → JSON → DOM操作 の流れを理解することが重要です。

• 単一データ → textContent で表示
• 複数データ → リスト or テーブルで表示
• ローディング表示・エラー表示は必須
• innerHTML の使いすぎに注意

このパターンを覚えれば、
ほとんどの API 表示 UI を作れるようになります。