【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の力をどんどん活かしていきましょう。
COMM_LOG: javascript-json