JavaScriptでJSONを読み込んで画面に表示する方法

JavaScriptでJSONを読み込む基本は、fetch()で取得して、response.json()でJavaScriptの値に変換し、DOMへ描画する流れです。商品一覧、設定ファイル、簡易ダッシュボード、社内ツールの一覧表示など、実務でもこの形がそのまま使えます。

今回は、fetch と表示処理の最小構成を出発点にして、入力例、出力例、よくある失敗、代替手段までまとめます。APIを初めて触る人でも、そのまま手元で試せる形に絞って整理します。

• できること: JSONファイルやAPIレスポンスを読み込み、一覧や詳細をHTMLに表示できる
• 向いている場面: 商品一覧、ユーザー一覧、設定情報、検索結果の表示
• 先に結論: まずは fetch() → response.ok を確認 → response.json() → forEach() で描画 の順で覚えると失敗しにくい
• 確認時点: 2026年4月25日。本文の仕様説明は MDN と WHATWG Fetch Standard を参照

ここがポイント: response.json() は「JSON文字列を受け取る処理」ではなく、レスポンス本文を読んでJavaScriptの配列やオブジェクトへ変換する処理です。fetch() の直後に毎回 JSON.parse() を書く必要はありません。

前提環境

まず、どこで動かす想定かをはっきりさせます。

• 対象言語: JavaScript
• 主な実行環境: モダンブラウザのフロントエンド
• 想定例: Chrome、Edge、Firefox、Safari の現行系
• 主要API: fetch(), Response.json(), Response.ok, async/await

fetch() と Response.ok は MDN で Baseline の機能として案内されており、広く使えます。実務では古い XMLHttpRequest より、まず fetch() を覚えるほうが自然です。

ただし、ローカルのHTMLを file:/// で直接開いてJSONを読むと、ブラウザの制約で失敗することがあります。練習でも本番でも、http://localhost のようにローカルサーバー経由で確認する前提で進めるのが安全です。

まずは最小例を動かす

最初に、JSONを読み込んで一覧表示する最小構成を見ます。

入力例: users.json

[
  {
    "id": 1,
    "name": "Sato",
    "department": "Sales"
  },
  {
    "id": 2,
    "name": "Suzuki",
    "department": "Engineering"
  },
  {
    "id": 3,
    "name": "Tanaka",
    "department": "Support"
  }
]

HTML例

<ul id="user-list"></ul>
<p id="error-message"></p>

<script src="app.js"></script>

JavaScript例: app.js

const userList = document.getElementById("user-list");
const errorMessage = document.getElementById("error-message");

async function loadUsers() {
  try {
    const response = await fetch("./users.json");

    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }

    const users = await response.json();

    userList.innerHTML = "";

    users.forEach((user) => {
      const li = document.createElement("li");
      li.textContent = `${user.name} / ${user.department}`;
      userList.appendChild(li);
    });
  } catch (error) {
    errorMessage.textContent = `読み込みに失敗しました: ${error.message}`;
  }
}

loadUsers();

出力例

画面には次のように表示されます。

• Sato / Sales
• Suzuki / Engineering
• Tanaka / Support

ここで重要なのは、JSONを取って終わりではなく、取得した配列を画面表示までつなげることです。業務画面では、このあと検索条件の反映や件数表示、空データ時の案内を足していきます。

処理の流れを4段階で理解する

細かい文法より先に、処理の順番を押さえると読みやすくなります。

1. fetch() で取得する

const response = await fetch("./users.json");

fetch() はURLに対してHTTPリクエストを送り、Response を返します。ここではまだ中身のJSON本体を使っていません。受け取ったのはレスポンス全体です。

2. response.ok で成功判定する

if (!response.ok) {
  throw new Error(`HTTPエラー: ${response.status}`);
}

ここは初心者が省略しがちな部分です。fetch() は 404や500でも即座に例外にならない ため、ステータス確認を入れないと「失敗レスポンスなのに次の処理へ進む」ことがあります。

確認したいのは主に次の点です。

• 200台かどうか
• 404でURLを間違えていないか
• 500でサーバー側エラーになっていないか

3. response.json() でJavaScriptの値に変換する

const users = await response.json();

これでレスポンス本文が読み取られ、JSONが配列やオブジェクトとして使えるようになります。

たとえば今回の users.json は配列なので、users.forEach(...) が使えます。もしJSONの中身が次のような形なら、扱い方が変わります。

{
  "items": [
    { "name": "Sato" },
    { "name": "Suzuki" }
  ]
}

この場合は data.items.forEach(...) のように、配列が入っているプロパティをたどります。

4. DOMへ表示する

users.forEach((user) => {
  const li = document.createElement("li");
  li.textContent = `${user.name} / ${user.department}`;
  userList.appendChild(li);
});

取得したデータは、そのままでは画面に出ません。DOMへ流し込んで初めて、一覧やカード、テーブルとして見えるようになります。

実務でよく使う表示先は次のとおりです。

• ul や ol の一覧
• table の行
• カード型レイアウトの div
• 検索結果件数やステータス表示の span

実務で使いやすい表示処理の書き方

最小例の次は、少しだけ実務寄りにします。ポイントは、表示前にHTML文字列を組み立ててまとめて描画することです。

一覧表示の例

const container = document.getElementById("user-list");

async function loadUsers() {
  const response = await fetch("./users.json");

  if (!response.ok) {
    throw new Error(`HTTPエラー: ${response.status}`);
  }

  const users = await response.json();

  container.innerHTML = users
    .map(
      (user) => `
        <li>
          <strong>${user.name}</strong><br>
          <span>${user.department}</span>
        </li>
      `
    )
    .join("");
}

この形は短く書けて見通しも良いですが、APIから受け取った文字列をそのまま innerHTML に入れると危険な場合があります。ユーザー入力や外部データを含むなら、textContent を使うほうが安全です。

空データ時の分岐も入れておく

if (users.length === 0) {
  container.innerHTML = "<li>データはありません</li>";
  return;
}

一覧表示は成功しても、件数ゼロは普通に起こります。エラーと空データを同じ扱いにすると、利用者には状況が伝わりません。

APIからJSONを読む場合の基本形

ローカルJSONだけでなく、Web APIでも流れは同じです。

例

async function loadPosts() {
  try {
    const response = await fetch("https://example.com/api/posts");

    if (!response.ok) {
      throw new Error(`HTTPエラー: ${response.status}`);
    }

    const posts = await response.json();
    console.log(posts);
  } catch (error) {
    console.error("取得失敗:", error);
  }
}

ただしAPIでは、ローカルJSONより次の点が増えます。

• CORS設定が必要なことがある
• 認証が必要なAPIではヘッダー設定が要る
• 通信失敗やタイムアウトを考慮する必要がある
• 本番ではAPIキーをフロントに直接埋め込まない設計が重要になる

フロントエンドだけで完結する画面に秘密鍵や管理者トークンを置くのは避けてください。認証が必要なAPIは、必要に応じてバックエンド経由に分けるのが基本です。

JSON.parse() はいつ使うのか

ここは混同しやすい部分です。

• response.json() を使う場面: fetch() のレスポンス本文をJSONとして読むとき
• JSON.parse() を使う場面: すでに「文字列」として持っているJSONをオブジェクト化したいとき

JSON.parse() が必要な例

const jsonText = '{"name":"Sato","age":30}';
const user = JSON.parse(jsonText);
console.log(user.name);

fetch() では通常こちら

const response = await fetch("./user.json");
const user = await response.json();

fetch() のあとに JSON.parse(await response.json()) のように重ねるのは誤りです。response.json() の時点で、すでにJavaScriptの値になっています。

よくある失敗と対処法

ここは実務で詰まりやすいところです。短く切り分けます。

1. file:/// で開いていて読み込めない

原因として多いのは、HTMLファイルをブラウザで直接開いていることです。現在のブラウザではローカルファイルが別オリジン扱いになり、fetch() が失敗することがあります。

対処は単純です。

• ローカルサーバーを使う
• http://localhost で開く
• JSONファイルの配置パスを再確認する

2. Unexpected token などのJSONパースエラー

JSONの文法が壊れていると、response.json() で失敗します。

ありがちな原因は次のとおりです。

• 末尾カンマがある
• プロパティ名のダブルクォートが抜けている
• JSONのつもりで実際はHTMLエラーページを返している

特に3つ目は多いです。URLが間違っていて404ページを受け取り、それをJSONとして読もうとして落ちる流れです。

3. Cannot read properties of undefined

データ構造の想定違いです。

たとえば、実際のレスポンスがこうなら:

{
  "items": [
    { "name": "Sato" }
  ]
}

次のコードは失敗します。

const data = await response.json();
data.forEach(...);

正しくは data.items.forEach(...) です。まず console.log(data) で構造を確認してから描画処理を書くと、無駄な遠回りが減ります。

4. CORSで失敗する

別ドメインのAPIをブラウザから呼ぶと、サーバー側が許可していない限り取得できません。

見るべき点は次のとおりです。

• APIの提供元がブラウザ利用を許可しているか
• Access-Control-Allow-Origin などの設定があるか
• フロントから直接呼ぶべきAPIか

CORSはJavaScriptの書き方だけでは解決しないことがあります。コードより先に、呼び出し先APIの運用条件を確認してください。

代替手段と使い分け

fetch() が基本ですが、用途によっては別の選択肢もあります。

axios を使う場合

• エラーハンドリングや共通設定をまとめやすい
• 既存プロジェクトで採用済みなら統一しやすい
• ただしブラウザ標準ではないため、学習の入口は fetch() のほうが軽い

XMLHttpRequest を使う場合

• 古いコードではまだ見かける
• 新規実装で最初に選ぶ理由は少ない
• 保守対象を読むための知識としては有用

まず何を覚えるべきか

初心者なら、最初は次の順で十分です。

• fetch(url)
• response.ok
• await response.json()
• 取得データを forEach() や map() で表示

この4点が固まると、API連携の記事や社内画面のサンプルコードもかなり読みやすくなります。

すぐ試せる最小チェックリスト

最後に、手元で確認するときの順番を絞ります。

• HTMLとJSONを同じプロジェクト内に置く
• file:/// ではなくローカルサーバー経由で開く
• fetch() の戻り値で response.ok を確認する
• await response.json() の結果を console.log() で一度見る
• 配列かオブジェクトかを確認してから描画処理を書く
• APIキーやトークンをフロントへ直書きしない

JSON読み込みでつまずく人の多くは、文法より先に「URLの間違い」「レスポンス構造の見誤り」「ローカルファイル起動」の3点で止まります。ここを最初に疑えるようになると、表示処理まで一気に進めやすくなります。

参照リンク

• MDN: Using the Fetch API
• MDN: Fetch API
• MDN: Response.ok
• MDN: async function
• MDN: await
• MDN: JSON.parse()
• MDN: Reason: CORS request not HTTP
• MDN: Cross-Origin Resource Sharing (CORS)
• WHATWG Fetch Standard