【JavaScript入門講座】 fetch・データ処理・HTML連携まで、JSON基礎講座

はじめに

JavaScriptでJSONデータを作成して、便利に扱って来ましたが、改めて考えてまともに勉強してこなかったので、備忘録メモを作成してみました。

1. JSONとは？

JSON（ジェイソン）は JavaScript Object Notation の略で、
「データの保存ややりとりに適した軽量な構造」です。

✅ 特徴

  • キーと値のペアで構成される
  • 人にも機械にも読みやすい
  • JavaScriptとの相性が抜群

🔍 書き方の基本（オブジェクト形式）

{
  "title": "PROGRAMMING",
  "names": ["lain", "ChatGPT"]
}

🔍 書き方の基本（配列形式）

[
  { "title": "GRAPHIC", "names": ["Stable Diffusion", "ChatGPT"] },
  { "title": "VOICE", "names": ["VOICEVOX"] }
]

💡 よくある用途

  • サイト設定ファイル（config.json）
  • 多言語化（lang_ja.json, lang_en.json）
  • ゲームのシナリオやエンディングの構成

2. 基本の使い方（stringifyとparse）

JavaScriptでは、オブジェクトをJSON形式に変換したり、その逆を行うために、次の2つの関数がよく使われます。

🔄 JSON.stringify()

オブジェクトや配列をJSON文字列に変換します。

const obj = { title: "PROGRAMMING", names: ["lain", "ChatGPT"] };
const jsonStr = JSON.stringify(obj);
console.log(jsonStr);
// → "{"title":"PROGRAMMING","names":["lain","ChatGPT"]}"

✅ よくある用途

デバッグログに出力する

localStorage に保存する

サーバーへデータ送信する際に使う

🔃 JSON.parse()

JSON文字列をJavaScriptのオブジェクトや配列に変換します。

const jsonStr = ‘{“title”:“GRAPHIC”,“names”:[“ChatGPT”]}’; const obj = JSON.parse(jsonStr); console.log(obj.title); // → GRAPHIC

✅ 注意点

parse() は文字列が正しいJSON形式でないとエラーになります。

文字列の " や , の位置ミスによく注意！

💡 ワンポイント：ログ出力の罠

console.log("data: " + {}); // → "data: [object Object]"
console.log("data:", {});   // ✅ 構造表示される
console.log(JSON.stringify({}, null, 2)); // ✅ 整形して見やすく出力

3. fetchでJSONを読み込む方法

Webアプリでは、サーバーから設定ファイルやデータを非同期で読み込む場面がよくあります。

JavaScriptでは fetch() を使うことで、簡単にJSONファイルを取得できます。

🔰 基本形

const response = await fetch("/assets/data/sample.json");
const data = await response.json();
console.log(data);
  • /assets/data/sample.json は相対パス。プロジェクト構成に応じて調整
  • await を使うためには、関数を async にする必要があります
async function loadData() {
  const response = await fetch("/assets/data/sample.json");
  const data = await response.json();
  console.log("読み込んだデータ:", data);
}

⚠ エラーになりやすいポイント

原因 症状 解決策
ファイルパスの間違い 404 Not Found パスを Networkタブ で確認
.json() を呼ばない Response オブジェクトのまま .json() でパースを忘れずに
await を付け忘れる Promise が表示される 必ず await を付ける
非同期関数でない await が使えないエラー async function にする

実例：エンディングメッセージを読み込む

async function loadEndingData() {
  const res = await fetch("/assets/data/ending.json");
  const json = await res.json();
  json.forEach(({ title, names }) => {
    const block = `<span class="ending-title">${title}</span><br>${names.join("<br>")}`;
    document.querySelector("#credits").innerHTML += `<p>${block}</p>`;
  });
}

4. JSONデータの使い方

読み込んだJSONデータは、JavaScriptの配列やオブジェクトとして扱えます。

ここでは forEach() や map() を使って、データをループ処理しながらHTMLに出力する方法を紹介します。

🔁 forEachでループして出力する

const data = [
  { title: "PROGRAMMING", names: ["lain", "ChatGPT"] },
  { title: "VOICE", names: ["VOICEVOX"] }
];

data.forEach(({ title, names }) => {
  const block = `<span class="ending-title">${title}</span><br>${names.join("<br>")}`;
  document.querySelector("#credits").innerHTML += `<p>${block}</p>`;
});

🪄 mapを使ってまとめてHTMLに変換する

const htmlBlocks = data.map(({ title, names }) => {
  return `<p><span class="ending-title">${title}</span><br>${names.join("<br>")}</p>`;
});

document.querySelector("#credits").innerHTML = htmlBlocks.join("");

💡 innerHTMLの注意点

  • += を繰り返すとパフォーマンスが悪くなる場合もあります
  • textContent と違い、HTMLタグとして解釈されます
  • innerHTML に直接ユーザー入力を入れると XSS脆弱性 の原因になるので注意

5. よくあるエラーと対処法

❌ [object Object] が表示される

const obj = { title: "TEST" };
console.log("data: " + obj); // → "data: [object Object]"

✅ 対処法

  • console.log(“data:”, obj); で構造を見やすく出力
  • JSON.stringify(obj) を使えば文字列に変換して確認できる

❌ undefined になる

console.log(GameSettings.edData); // ← 非同期でまだ読み込まれていない可能性

✅ 対処法

  • await GameSettings.load(); で読み込み完了を待ってから使う
  • 非同期処理のタイミングを意識する

❌ Promise とだけ表示される

const data = fetch("sample.json");
console.log(data); // → Promise { <pending> }

✅ 対処法

  • await を忘れていないかチェック
  • または .then() を使ってコールバックで取得する

❌ JSON.parse()でエラーが出る

const str = '{title: "TEST"}';
const obj = JSON.parse(str); // → Uncaught SyntaxError

✅ 対処法

  • JSONのキー・値は必ずダブルクオートで囲む
  • “title”: “TEST” のように正しく書く

これで基本的な使い方とハマりやすい落とし穴をカバーできました。

次は応用編として「6. JSON活用術（設定ファイル・多言語・データ連携）」を紹介することもできます。

6. JSON活用術（設定ファイル・多言語・データ連携）

ここでは、実際の開発現場でよく使われる JSONの活用パターンを紹介します。

特に設定の外部化や言語切り替え、ユーザーデータとの連携などに便利です。

🔧 設定ファイルとして使う

アプリの設定値をコードにハードコーディングせず、外部の .json ファイルで管理できます。

📁 例：config.json

{
  "theme": "dark",
  "volume": 0.8,
  "language": "ja"
}

const config = await (await fetch("/assets/data/config.json")).json();
document.body.classList.add(config.theme);

🌍 多言語対応（i18n）

JSONを使えば、言語ごとのラベルやテキストをまとめて管理できます。

📁 lang_ja.json

{
  "title": "ゲーム開始",
  "settings": "設定",
  "exit": "終了"
}

const lang = await (await fetch("/assets/data/lang_ja.json")).json();
document.getElementById("btn-start").textContent = lang.title;

✅ 複数の言語ファイルを切り替えるだけで、インターフェース全体を翻訳できます。

🎮 ゲームのデータ定義に使う

たとえば、エンディングスタッフロールやステージ情報などもJSONで持っておけば、柔軟に管理できます。

📁 ending.json

[
  { "title": "PROGRAMMING", "names": ["lain", "ChatGPT"] },
  { "title": "BGM", "names": ["ゆうり", "しゃろう"] }
]

const edData = await (await fetch("/assets/data/ending.json")).json();
edData.forEach(({ title, names }) => {
  const html = `<span class="ending-title">${title}</span><br>${names.join("<br>")}`;
  document.querySelector("#credits").innerHTML += `<p>${html}</p>`;
});

💾 ローカル保存・ユーザー設定にも使える

localStorage と組み合わせて、ユーザーの選択や設定を保存することも可能です。

// 保存
const settings = { bgm: true, volume: 0.7 };
localStorage.setItem("userSettings", JSON.stringify(settings));

// 読み込み
const saved = JSON.parse(localStorage.getItem("userSettings"));
console.log(saved.volume); // → 0.7

これらの応用例を知っておくだけで、開発の柔軟性と効率が大きく変わります。

7. まとめ：JSONを味方につける

JSONは「ただのデータ形式」ではなく、JavaScriptと組み合わせることで、
設定・翻訳・ステージ構成・UI表示など、アプリの構造そのものを外部化・再利用可能にする力を持っています。

✅ この記事で学んだこと

  • JSON.stringify() や JSON.parse() の基本
  • fetch() を使った非同期読み込み
  • 配列・オブジェクトをループしてHTMLに表示
  • よくあるエラー（[object Object]、非同期処理、構文ミス）
  • 実践的な活用法（設定、i18n、localStorage連携）

💬 ひとことアドバイス

JSONに慣れるということは、「コードの柔軟性が増す」＝「開発者としての自由度が広がる」 ということ。

書き方に迷ったら JSON.stringify() と console.log() で中身を見てみる。それだけでも、世界が変わります。

今後の実装やゲーム制作、Webアプリ開発でも、JSONの力をどんどん活かしていきましょう。