【完全ガイド】JavaScriptでJSONを読み込む方法｜fetch・parseからHTML表示まで徹底解説│JScript Katana

1 1. はじめに：JavaScriptでJSONを読み込む理由とは？
2 2. JSONの基本構造をおさらい
3 3. JavaScriptでJSONを読み込む3つの方法【サンプルコード付き】
4 4. JSONデータをHTMLに表示する方法
5 5. JSON読み込み時によくあるエラーと対処法
6 6. よく使うJSON読み込みの実践例
7 7. まとめ：JSONを読み込めるようになると世界が広がる
8 よくある質問（FAQ）：JavaScriptでのJSON読み込みについて

1. はじめに：JavaScriptでJSONを読み込む理由とは？

JavaScriptとJSONの関係とは？

Webアプリケーションの開発において、JSON（JavaScript Object Notation）は今や欠かせない存在です。JSONは、その名前の通りJavaScript由来のデータ形式であり、構文も非常に似ています。そのため、JavaScriptとの相性は抜群で、特別なライブラリを用いずに簡単に扱うことができます。

Webページで情報を動的に表示したり、外部サービスと連携してデータを取得するような場面では、JSON形式のデータをJavaScriptで読み込んで処理するのが一般的です。特にREST APIなどからのレスポンスはほぼJSONで返されるため、JavaScriptでのJSON読み込みは実践上、必須のスキルと言えるでしょう。

JSONが広く使われている理由

JSONがここまで広く普及した理由は、次のような特徴にあります。

軽量でシンプルな構造
データをテキストで表現するため、ネットワークを通じて高速にやり取りできます。
人間にも読みやすい
括弧（{}や[]）とキー・バリューの組み合わせで構成されており、構文が直感的です。
プログラミング言語に依存しない
JavaScript以外の多くの言語でもパース（解析）可能なため、サーバーサイドとのやり取りにも向いています。
APIとの親和性が高い
多くのWeb APIがデフォルトでJSONを使っており、JavaScriptのfetchやXMLHttpRequestで簡単に取り扱えます。

本記事で学べること

この記事では、JavaScriptでJSONを読み込む方法を基礎から実践的な応用まで順を追って解説します。具体的には、fetchを使った読み込みや、JSON.parse()を使って文字列をオブジェクトに変換する方法、さらには取得したデータをHTMLに表示する手順など、初心者でも実際に動かせるコードを交えて紹介していきます。

「JavaScriptでJSONを読み込んでみたいけど、何から手をつければいいかわからない」
そんな方にこそ、本記事はぴったりです。

2. JSONの基本構造をおさらい

JSONとはどんな構文？

JSON（JavaScript Object Notation）は、JavaScriptのオブジェクト表記法をベースにしたデータフォーマットです。テキスト形式であるため、ファイルとして保存したり、ネットワーク越しにやりとりする際にも便利です。

基本的な構成は「キーと値のペア（key-value）」であり、複雑なデータ構造もネストして表現することが可能です。構文的にはJavaScriptのオブジェクトリテラルに非常に似ていますが、厳密には異なるルールもあるため注意が必要です。

JSONの構文ルール

以下はJSONの代表的な構文ルールです：

キーは必ずダブルクォーテーション（”）で囲む必要がある
値には、文字列、数値、真偽値、null、配列、オブジェクトが使用可能
最後の要素にカンマ（,）を付けない
全体はオブジェクト（{}）または配列（[]）で囲む

{
  "name": "佐川",
  "age": 28,
  "skills": ["JavaScript", "Python", "HTML"],
  "isActive": true,
  "profile": {
    "location": "Tokyo",
    "experience": 5
  }
}

このように、JSONでは入れ子構造（ネスト）を使って複雑な情報も整理して表現できます。

JSONで使えるデータ型

データ型	例	備考
文字列	`"hello"`	必ずダブルクォーテーションで囲む
数値	`123`, `3.14`	整数・小数の両方に対応
真偽値	`true`, `false`	小文字で記述
null	`null`	値が存在しないことを示す
配列	`["A", "B", "C"]`	要素はカンマ区切りで並べる
オブジェクト	`{"key": "value"}`	値にもオブジェクトを使える

よくある構文ミスと注意点

JSONの書き方で初心者がよく陥るミスには以下のようなものがあります：

シングルクォーテーションを使用する → NG：'name': 'Taro'
末尾に余分なカンマがある → NG："age": 30,}
コメントを書いてしまう（JSONはコメント非対応） → NG：// これはコメント

JavaScriptのオブジェクト記法とは微妙に違う部分があるため、コピペで流用する際には注意が必要です。

3. JavaScriptでJSONを読み込む3つの方法【サンプルコード付き】

JSONデータの読み込みとは？

JSONデータは多くの場合、外部ファイルやAPIから取得され、JavaScriptで処理されます。ここでは、実際の開発でよく使われる3つの読み込み方法を紹介します。

3-1. fetchを使って外部JSONファイルを読み込む

最も一般的かつモダンな方法は、fetch()関数を使った読み込みです。これは非同期通信を行う関数で、ブラウザに標準で備わっています。

サンプルコード

<!-- index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>JSON読み込みデモ</title>
</head>
<body>
  <div id="output"></div>

  <script>
    fetch('data.json')
      .then(response => response.json())
      .then(data => {
        document.getElementById('output').textContent = data.message;
      })
      .catch(error => console.error('エラー:', error));
  </script>
</body>
</html>

// data.json
{
  "message": "こんにちは、JSONの世界！"
}

ポイント

response.json()はレスポンスをJSON形式に変換する処理です。
ネットワークが非同期で動作するため、.then()で順次処理する必要があります。

3-2. JSON.parse()を使って文字列をオブジェクトに変換する

既にJavaScript内にJSON形式の文字列がある場合、それをJavaScriptオブジェクトに変換するにはJSON.parse()を使います。

サンプルコード

const jsonString = '{"name": "佐川", "age": 30}';
const obj = JSON.parse(jsonString);

console.log(obj.name); // 出力：佐川
console.log(obj.age);  // 出力：30

注意点

jsonStringが正しいJSON形式でなければ、エラー（SyntaxError）が発生します。
JSONは必ずダブルクォーテーションを使い、構文が厳密です。

3-3. ローカルファイルの読み込みと制限について

開発時にローカルファイル（たとえば、file://で始まるパス）を読み込もうとすると、CORS（クロスオリジン）制限に引っかかることがあります。ブラウザはセキュリティの観点から、ローカルファイルの直接読み込みをブロックする仕様になっています。

解決策：ローカルサーバーの利用

以下のようなツールを使ってローカルWebサーバーを立てることで、ローカルJSONファイルを安全に読み込めます。

VS Codeの拡張機能「Live Server」
Node.jsのhttp-serverモジュール
Pythonの簡易サーバー：python -m http.server

# Pythonの場合（カレントディレクトリで実行）
python -m http.server 8000

これにより、http://localhost:8000配下でファイルを読み込むことができ、fetchなども問題なく使えるようになります。

4. JSONデータをHTMLに表示する方法

なぜHTMLへの表示が必要なのか？

JavaScriptでJSONを読み込んだだけでは、ユーザーの目には見えません。データを視覚的に表示することで、ユーザーに価値を届けることができます。たとえば、APIから取得した天気情報やユーザーリストをWebページに動的に反映する場面では、JSONデータをHTMLに組み込むことが不可欠です。

基本：テキストを1行表示する

まずは、JSON内の単一データ（たとえば文字列）をHTMLに表示するシンプルな例を見てみましょう。

サンプルコード

<div id="message"></div>

<script>
  const data = { "message": "こんにちは、JSON!" };
  document.getElementById("message").textContent = data.message;
</script>

解説

textContentプロパティを使うことで、安全に文字列を挿入できます。
innerHTMLを使うとHTMLタグごと挿入できますが、XSS対策として基本はtextContent推奨です。

配列データをリスト形式で表示する

JSONの配列データは、HTMLリスト（<ul>や<ol>）と相性がよく、ループ処理で表示すると効率的です。

サンプルコード

<ul id="skills-list"></ul>

<script>
  const data = { "skills": ["JavaScript", "Python", "HTML"] };
  const listElement = document.getElementById("skills-list");

  data.skills.forEach(skill => {
    const li = document.createElement("li");
    li.textContent = skill;
    listElement.appendChild(li);
  });
</script>

解説

forEachやfor...ofを使って配列をループ処理するのが基本です。
createElement()で要素を生成し、appendChild()で挿入します。

複雑なオブジェクトをテーブルで表示する

次に、JSONでよくある「オブジェクトの配列」を表として表示する例です。たとえば、ユーザー一覧を表示する場面を想定します。

サンプルJSON

[
  { "name": "佐川", "age": 30 },
  { "name": "田中", "age": 25 },
  { "name": "山田", "age": 28 }
]

サンプルコード（HTMLとJavaScript）

<table border="1" id="user-table">
  <thead>
    <tr><th>名前</th><th>年齢</th></tr>
  </thead>
  <tbody></tbody>
</table>

<script>
  const users = [
    { "name": "佐川", "age": 30 },
    { "name": "田中", "age": 25 },
    { "name": "山田", "age": 28 }
  ];

  const tbody = document.querySelector("#user-table tbody");

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

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

    const ageTd = document.createElement("td");
    ageTd.textContent = user.age;

    tr.appendChild(nameTd);
    tr.appendChild(ageTd);
    tbody.appendChild(tr);
  });
</script>

解説

データの見た目を整えたい場合、<table>が有効です。
DOM操作はやや冗長ですが、動的に要素を生成できる柔軟性があります。

条件付き表示やフィルターの例

実務では、データの一部だけを表示したい場合もあります。たとえば「30歳以上のユーザーだけ表示する」といった条件も簡単に追加できます。

const filtered = users.filter(user => user.age >= 30);

これをforEachで処理するだけで、条件付き表示が可能です。

5. JSON読み込み時によくあるエラーと対処法

初心者がつまずきやすい落とし穴とは？

JavaScriptでJSONを扱う際、文法はシンプルでも意外と多くの落とし穴があります。特に、外部ファイルやAPIからデータを取得する場合、思い通りに表示されない、エラーになる、といった問題に遭遇しがちです。

ここでは、実際によく発生する3つの代表的なエラーと、それぞれの解決策を紹介します。

5-1. CORS（クロスオリジン）エラー

症状

Access to fetch at 'https://example.com/data.json' from origin 'http://localhost:5500' has been blocked by CORS policy...

原因

ブラウザはセキュリティ対策として、異なるドメイン間の通信（クロスオリジン）に制限をかけています。たとえば、自分のサイト（localhost）から外部のAPI（example.com）にリクエストを送ろうとした場合、サーバー側がCORSを許可していないとブロックされます。

解決策

開発中：APIが提供しているCORS対応用のエンドポイントを使う、またはプロキシサーバー（例：API Gateway）を利用する。
本番運用：サーバー側の設定（Access-Control-Allow-Origin ヘッダー）を見直す必要あり。
回避例：API提供元がCORS対応済みかどうか、事前に公式ドキュメントで確認する。

5-2. JSON.parseでSyntaxErrorが発生する

症状

const obj = JSON.parse("{name: '佐川'}"); // ← SyntaxError

原因

JSONの構文ルールに違反しているため、エラーになります。主な原因は以下のようなケースです：

キーや文字列にシングルクォートを使っている（JSONではダブルクォーテーション必須）
末尾にカンマが付いている
コメントを記述している（JSONはコメント非対応）

解決策

JSON構文チェッカー（例：https://jsonlint.com/）で検証する
JavaScriptのオブジェクトリテラルと混同しないよう注意する
コードエディタの拡張機能（JSON Linter）を活用して即座に気付けるようにする

5-3. fetchでJSONを取得できない（失敗）

症状

fetch('data.json')
  .then(response => response.json()) // ← ここでエラー

原因と考えられる要因

data.jsonが存在しない、パスが間違っている（404エラー）
ファイルのMIMEタイプが正しくない（application/jsonでない）
ネットワークの問題、ローカルサーバーを使っていない状態でfile://経由でアクセスしている

解決策

パスが相対パス/絶対パスどちらか正しいか確認
ローカル環境ではLive Serverなどを使ってHTTP経由でアクセス
console.log(response)で中身を確認して、ステータスコードが200かチェック

5-4. 非同期処理のタイミングによる未定義エラー

症状

console.log(data.message); // ← undefinedになる

原因

fetch()は非同期処理のため、データが読み込まれる前に表示処理が走ってしまうケースがあります。

解決策

then()またはasync/awaitを用いて、データ取得完了後に処理を行うようにする

async function loadData() {
  const response = await fetch('data.json');
  const data = await response.json();
  console.log(data.message); // ここで表示される
}
loadData();

6. よく使うJSON読み込みの実践例

実務に役立つ活用例を知っておこう

JSONの読み込み方法を学んだ後は、「実際にどんな場面で使われるのか？」を知ることで、理解がより深まります。ここでは、現場で頻繁に使われる3つのユースケースを厳選して紹介します。

6-1. REST APIとの連携で天気情報を取得する

概要

多くのWebサービスでは、APIを通じてJSONデータを取得できます。以下は、OpenWeatherMapのAPIから天気情報を取得し、HTMLに表示する例です。

サンプルコード（要APIキー）

<div id="weather"></div>

<script>
  const API_KEY = 'YOUR_API_KEY'; // ここに自分のAPIキーを入力
  const city = 'Tokyo';

  fetch(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric&lang=ja`)
    .then(response => response.json())
    .then(data => {
      const description = data.weather[0].description;
      const temp = data.main.temp;
      document.getElementById("weather").textContent = `東京の天気：${description}、気温：${temp}℃`;
    })
    .catch(err => console.error('取得エラー:', err));
</script>

解説

OpenWeatherMapは無料プランあり。登録すればAPIキーが発行されます。
fetch + JSON + DOM操作の典型例です。

6-2. ユーザーフォームのデータをJSONとして送信する

概要

フォームで入力された値をサーバーへ送信する際、JSON形式で送ることでAPIとの連携が容易になります。fetchのPOSTリクエストを使用します。

サンプルコード（POST送信）

<form id="user-form">
  <input type="text" id="username" placeholder="名前">
  <input type="email" id="email" placeholder="メールアドレス">
  <button type="submit">送信</button>
</form>

<script>
  document.getElementById("user-form").addEventListener("submit", function(e) {
    e.preventDefault();

    const data = {
      name: document.getElementById("username").value,
      email: document.getElementById("email").value
    };

    fetch('https://example.com/api/submit', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
      console.log('成功:', result);
    })
    .catch(error => {
      console.error('エラー:', error);
    });
  });
</script>

解説

JSON.stringify()を使って、JavaScriptオブジェクトをJSON文字列に変換します。
Content-Typeヘッダーにapplication/jsonを指定するのが重要です。

6-3. JSONを使ってシングルページアプリ（SPA）風の表示切替を実装する

概要

あらかじめ取得しておいたJSONデータを使って、ユーザーの操作に応じて動的に表示内容を切り替える構成です。SPAの基礎になります。

サンプルコード（メニュー選択で詳細表示）

<select id="user-select">
  <option value="0">佐川</option>
  <option value="1">田中</option>
  <option value="2">山田</option>
</select>
<div id="user-detail"></div>

<script>
  const users = [
    { name: "佐川", age: 30, job: "エンジニア" },
    { name: "田中", age: 25, job: "デザイナー" },
    { name: "山田", age: 28, job: "マーケター" }
  ];

  document.getElementById("user-select").addEventListener("change", function(e) {
    const selected = users[e.target.value];
    document.getElementById("user-detail").textContent = `${selected.name}（${selected.age}歳）：${selected.job}`;
  });
</script>

解説

外部リクエストがなくても、ローカルに保持したJSONでページ内容を変化させられるのがSPAの特徴。
選択肢やページの切り替えが滑らかに行えます。

これらの活用例は、フロントエンド開発の実務で非常によく使われるパターンです。基本を押さえた上で、目的に応じた使い分けができるようになれば、実践力は確実に向上します。

7. まとめ：JSONを読み込めるようになると世界が広がる

学んだことを振り返ろう

ここまでの記事で、JavaScriptによるJSONの読み込みと活用方法について、基礎から応用まで一通り解説してきました。具体的には次のようなポイントを押さえました。

JSONの基本構造とルール（文字列はダブルクォーテーション、末尾カンマNGなど）
JavaScriptでの読み込み方法：fetch、JSON.parse()、ローカル環境での制限
HTMLにデータを動的に表示するテクニック（innerHTMLやループ処理）
実際のエラーへの対処法（CORS、構文ミス、非同期処理の落とし穴）
REST API連携やフォーム送信など、実務的なユースケースの実装例

これらは、Webアプリケーションの開発を行ううえで欠かせない基本スキルです。

JSONが使えると、できることが一気に広がる

JSONの読み書きができるようになると、以下のような領域へもステップアップが可能です。

APIを活用した動的コンテンツの生成
ニュース一覧、為替レート、天気情報などをリアルタイムで表示
フォームやチャットアプリのデータ送信
ユーザー入力内容をJSON形式でサーバーに送る
シングルページアプリケーション（SPA）構築
ReactやVue.jsなどのフレームワークとの親和性も高く、動的な画面切り替えが可能
データ可視化ライブラリとの連携
Chart.jsやD3.jsなどで、JSONデータを元にグラフやチャートを描画

つまり、JSONを読み込んで扱える＝Webのあらゆるデータと対話できる力を持つということです。

次のステップへ進むために

もし「もっと効率的にデータを扱いたい」と感じたなら、以下のトピックに進んでみると良いでしょう。

async/await を使った非同期処理の最適化
Axiosなどのライブラリによる高度な通信制御
Node.js環境でのJSON処理（サーバーサイド）
JSON Schemaでのバリデーション

これらを身につけることで、フロントエンド開発者としてのスキルをさらに一段階高めることができます。

最後に

Web開発の現場では、「JSONが読める・使える」ことはもはや前提条件とも言えるスキルです。最初は難しく感じるかもしれませんが、実例に触れて手を動かしていくことで、確実に習得できます。

このガイドが、あなたの開発スキル向上の一助となれば幸いです。ぜひ、身近なプロジェクトでJSONを扱ってみてください。

よくある質問（FAQ）：JavaScriptでのJSON読み込みについて

Q1. fetchとXMLHttpRequestの違いは何ですか？

A1.
どちらも外部リソースを取得するための機能ですが、fetchはPromiseベースで設計されており、コードがシンプルで直感的です。一方、XMLHttpRequestは古い仕様であり、コールバック地獄になりやすいため、現在はfetchの使用が推奨されています。

Q2. JSONファイルをローカルで読み込むとエラーになります。なぜですか？

A2.
ブラウザでは、file://で始まるローカルファイルから直接JSONを読み込むと、セキュリティ制限（CORS）によりブロックされることがあります。開発時は、ローカルWebサーバー（例：VS CodeのLive ServerやPythonの簡易サーバー）を使ってHTTP経由で読み込むようにしましょう。

Q3. JSON.parse()でエラーが出る原因は何ですか？

A3.
主な原因は以下の通りです：

キーや文字列にシングルクォート（’）を使っている
末尾にカンマがついている
コメントを記述している（JSONはコメント非対応）
JSONではなく通常のオブジェクトリテラルを渡している

構文が正しいか確認するには、JSONLintのようなツールで検証するのが効果的です。

Q4. JSONが読み込めても、HTMLにうまく表示されません。なぜでしょう？

A4.
非同期処理が原因で、データ取得前に表示処理が実行されている可能性があります。対策としては以下の方法があります：

fetch().then()内で表示処理を行う
async/await構文で順序を制御する

表示処理は「データが届いてから」行うことが鉄則です。

Q5. JSONの中に入れ子構造があってどう扱えばいいかわかりません。

A5.
JSONではオブジェクトや配列のネスト（入れ子）構造が一般的です。たとえば、user.profile.locationのようにドット記法でアクセスできます。また、for...inやforEachを使えば、ネストされた要素をループ処理して取り出すことも可能です。

const user = {
  name: "佐川",
  profile: {
    location: "Tokyo",
    age: 30
  }
};

console.log(user.profile.location); // 出力: Tokyo

Q6. JSONを使う上で、セキュリティの注意点はありますか？

A6.
はい、以下の点に注意してください：

外部JSONをそのままinnerHTMLで挿入しない（XSSの危険）
信頼できないAPIやデータ元からの読み込みには注意
ユーザーからの入力をJSONとして受け取る場合は、サーバー側でのバリデーションが必須

セキュリティを意識しながら実装することで、安全なWebアプリケーションが構築できます。

以上が、JavaScriptでJSONを扱う際によくある質問とその解答です。ここまで読んでくださった方であれば、もう「JSONって何？」と迷うことはないでしょう。

引き続き、実際のコードに触れて手を動かしながら学ぶことで、知識が確実なスキルへと進化していきます。どうぞ、ご自身の開発に活かしてください。

【完全ガイド】JavaScriptでJSONを読み込む方法｜fetch・parseからHTML表示まで徹底解説

1. はじめに：JavaScriptでJSONを読み込む理由とは？

JavaScriptとJSONの関係とは？

JSONが広く使われている理由

本記事で学べること

2. JSONの基本構造をおさらい

JSONとはどんな構文？

JSONの構文ルール

JSONで使えるデータ型

よくある構文ミスと注意点

3. JavaScriptでJSONを読み込む3つの方法【サンプルコード付き】

JSONデータの読み込みとは？

3-1. fetchを使って外部JSONファイルを読み込む

サンプルコード

ポイント

3-2. JSON.parse()を使って文字列をオブジェクトに変換する

サンプルコード

注意点

3-3. ローカルファイルの読み込みと制限について

解決策：ローカルサーバーの利用

4. JSONデータをHTMLに表示する方法

なぜHTMLへの表示が必要なのか？

基本：テキストを1行表示する

サンプルコード

解説

配列データをリスト形式で表示する

サンプルコード

解説

複雑なオブジェクトをテーブルで表示する

サンプルJSON

サンプルコード（HTMLとJavaScript）

解説

条件付き表示やフィルターの例

5. JSON読み込み時によくあるエラーと対処法

初心者がつまずきやすい落とし穴とは？

5-1. CORS（クロスオリジン）エラー

症状

原因

解決策

5-2. JSON.parseでSyntaxErrorが発生する

症状

原因

解決策

5-3. fetchでJSONを取得できない（失敗）

症状

原因と考えられる要因

解決策

5-4. 非同期処理のタイミングによる未定義エラー

症状

原因

解決策

6. よく使うJSON読み込みの実践例

実務に役立つ活用例を知っておこう

6-1. REST APIとの連携で天気情報を取得する

概要

サンプルコード（要APIキー）

解説

6-2. ユーザーフォームのデータをJSONとして送信する

概要

サンプルコード（POST送信）

解説

6-3. JSONを使ってシングルページアプリ（SPA）風の表示切替を実装する

概要

サンプルコード（メニュー選択で詳細表示）

解説

7. まとめ：JSONを読み込めるようになると世界が広がる

学んだことを振り返ろう

JSONが使えると、できることが一気に広がる

次のステップへ進むために

最後に

よくある質問（FAQ）：JavaScriptでのJSON読み込みについて

Q1. fetchとXMLHttpRequestの違いは何ですか？

Q2. JSONファイルをローカルで読み込むとエラーになります。なぜですか？

Q3. JSON.parse()でエラーが出る原因は何ですか？

Q4. JSONが読み込めても、HTMLにうまく表示されません。なぜでしょう？

Q5. JSONの中に入れ子構造があってどう扱えばいいかわかりません。

Q6. JSONを使う上で、セキュリティの注意点はありますか？

JavaScriptのプロパティ完全ガイド｜基本から応用まで徹底解説

JavaScriptのグローバル変数を完全解説｜使い方・注意点・安全な設計方法まで