JavaScriptでJSONファイルを読み込む方法はいくつかありますが、環境（ブラウザ / Node.js）と読み込み方で正解が変わります。古い記事には非推奨の手法や廃止された構文も混ざっているので注意が必要です。
この記事では、ブラウザでの fetch、import、Node.jsでの方法を、現在の正しいやり方で解説します。
fetch ＋ await response.json() が基本です。ローカルのJSONはサーバー経由でないと読めません（file://では失敗）。import で読むなら with { type: "json" }（古い assert は廃止）、Node.jsは fs/promises や require を使います。同期XHRは使いません。fetchで読み込む（async/await）
ブラウザでの基本は fetch です。.then() でもよいですが、async/await のほうが読みやすく、エラー処理も try/catch でまとめられます。
async function loadJSON(url) {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`); // 404などを検知
}
return response.json(); // JSONとしてパース
}
try {
const data = await loadJSON("data.json");
console.log(data);
} catch (error) {
console.error("JSONの読み込みに失敗:", error);
}
response.ok の確認は重要です（fetch は404でも例外を投げず、ok が false になるだけ）。fetch の基本はfetch APIで非同期通信を行う、async/await はPromiseとasync/awaitの使い方を参照してください。
ローカルファイルはサーバー経由で（file://の注意）
file://）と、fetch("data.json") はセキュリティ制限で失敗します（「Failed to fetch」「CORS」エラー）。ローカルで動かすには簡易サーバー経由でアクセスしてください。簡易サーバーは次のように立てられます（プロジェクトのフォルダで実行）。
# Node.js（npx） npx serve # Python python -m http.server # VS Code なら拡張機能「Live Server」も手軽
importで読み込む（with { type: “json” }）
ESモジュール環境では、JSONを直接 import できます。現在の標準は with { type: "json" }（import attributes）です。
// 現在の標準（import attributes）
import data from "./data.json" with { type: "json" };
console.log(data);
assert は使わない：かつての assert { type: "json" } は非推奨で、Node.js 22 では削除されました。必ず with を使ってください。なお対応環境は限られる（モダンブラウザ・新しいNode.js）ため、幅広く動かすなら fetch やビルドツールでの読み込みが無難です。Node.jsで読み込む（fs / require）
Node.js環境では、ファイルシステムから直接読み込めます。fs/promises の readFile ＋ JSON.parse が基本です。
// ESM: fs/promises + JSON.parse
import { readFile } from "node:fs/promises";
const text = await readFile("./data.json", "utf-8");
const data = JSON.parse(text);
// CommonJS なら require でそのまま読める
// const data = require("./data.json");
取得したJSONをブラウザのローカルに保存したい場合はlocalStorageの使い方（JSON保存の章）も参考になります。
同期XHRは使ってはいけない
古い記事では XMLHttpRequest を同期で使う方法を見かけますが、使ってはいけません。
// NG: 第3引数 false = 同期。メインスレッドを止めるため非推奨
const xhr = new XMLHttpRequest();
xhr.open("GET", "data.json", false);
xhr.send(null);
fetch ＋ await で非同期に行うのが正解です。よくある質問（FAQ）
const data = await (await fetch("data.json")).json() のようにfetch ＋ response.json() で取得・パースします。Node.jsでは fs/promises の readFile ＋ JSON.parse、または require() が使えます。file:// で直接開いていると、ローカルファイルへの fetch はセキュリティ制限で失敗します。npx serve や python -m http.server などでローカルサーバー経由でアクセスしてください。assert は廃止され、Node.js 22 で削除されました。現在は import data from "./data.json" with { type: "json" } のようにwith を使います（import attributes）。try-catch で JSON.parse()（や response.json()）をラップし、SyntaxError をキャッチします。fetch では response.ok の確認も必要です。まとめ
JSONファイルの読み込みは、ブラウザなら fetch ＋ await response.json()、Node.jsなら fs/promises ＋ JSON.parse や requireが基本です。
ローカルファイルは file:// では読めずサーバー経由が必要、import は with { type: "json" }（assert は廃止）、そして同期XHRは使わない——この3点を押さえれば、現在の環境で正しく読み込めます。
