はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptの基礎は理解しているが、JSON データをコード内で変数に格納した経験が浅い方、もしくは API から取得したデータを扱う際のベストプラクティスを知りたい開発者を対象としています。
本稿を読むことで、以下ができるようになります。

  • JSON 文字列を安全にオブジェクトへ変換し、変数に代入できる
  • fetch や import を使った外部 JSON の取得方法と、ローカル JSON のインライン定義方法を把握できる
  • 変換時のエラー（構文エラー、サーバーエラー、型の不一致）に対処する具体的な手順が分かる

JSON データは設定情報や UI データ、国際化リソースなど様々な場面で利用されますが、取り扱いミスがバグの温床になりがちです。本記事では、実務で直面しやすいシーンを想定し、実装例とトラブルシューティングを交えて解説します。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。

  • HTML と基本的な JavaScript（変数宣言、関数、非同期処理）の理解
  • ブラウザの開発者ツール（コンソール、ネットワークタブ）の基本操作
  • JSON の構造（オブジェクト・配列、キーと値のペア）が分かっていること

JSONデータを変数に格納する方法：概念と必要性

JSON (JavaScript Object Notation) は、軽量で人間にも機械にも読みやすいデータフォーマットです。JavaScript では文字列として扱われる JSON を JSON.parse() でオブジェクトに変換し、変数へ代入します。この過程で「文字列 → オブジェクト」への型変換が行われ、以降は通常のオブジェクト同様にプロパティ参照や走査が可能になります。

なぜ変数に入れることが重要かというと、次のようなシナリオが考えられます。

  1. 設定情報の集中管理
    アプリケーション全体で利用する API エンドポイントや UI テーマ情報を JSON にまとめ、起動時に一度だけ読み込んで変数に保持すれば、再利用が容易です。

  2. ローカライズデータ
    多言語対応の文字列リソースは JSON で管理し、ユーザーの言語設定に合わせてオブジェクトを切り替えるだけで UI が切り替わります。

  3. データ駆動 UI
    テーブルやカードリストなど、同じ構造の UI コンポーネントを多数生成する場合、JSON 配列を変数に入れて map で描画すればコードがシンプルになります。

変数に格納する際のポイントは「安全に」変換することです。外部から取得した JSON は必ずしも期待した形で来るとは限らず、構文エラーや不正な型が混入するリスクがあります。そこで、try…catch で例外を捕捉し、エラーログを残す習慣をつけると、デバッグコストが大幅に削減されます。

JSONデータを変数に入れる実装手順

以下では、ローカルに埋め込む方法と外部 API から取得する方法をそれぞれ具体的に示します。コードは ES2022（Node.js 18 以降、ブラウザ最新）を前提に書かれています。

ステップ1：ローカル JSON をインラインで定義し変数へ代入

Js

// 1-1. JSON 文字列をそのまま定義
const rawJson = `{
    "appName": "MyCoolApp",
    "version": "1.3.0",
    "features": ["login", "dashboard", "report"],
    "settings": {
        "theme": "dark",
        "itemsPerPage": 20
    }
}`;

// 1-2. JSON.parse でオブジェクトへ変換（エラーハンドリング付き）
let config;
try {
    config = JSON.parse(rawJson);
    console.log('設定オブジェクト:', config);
} catch (e) {
    console.error('JSON の構文エラー:', e);
    // 必要に応じてデフォルト値でフォールバック
    config = { appName: 'fallback', version: '0.0.0', features: [], settings: {} };
}

ポイント
テンプレートリテラル (`) を使うと改行やインデントをそのまま保持でき、可読性が上がります。 *JSON.parseは例外を投げるのでtry…catch` が必須です。
 フォールバック用のオブジェクトを用意すると、後続ロジックがクラッシュしにくくなります。

ステップ2：外部 API から JSON を取得し変数に格納

Js

// 2-1. fetch API（ブラウザ版）で取得
async function loadRemoteConfig(url) {
    try {
        const response = await fetch(url, { cache: 'no-store' });
        if (!response.ok) {
            throw new Error(`HTTP ${response.status} - ${response.statusText}`);
        }
        const data = await response.json();   // 自動で JSON.parse が走る
        console.log('リモート設定取得成功:', data);
        return data;
    } catch (err) {
        console.error('リモート設定取得失敗:', err);
        // フォールバック用のローカル設定を返す
        return {
            appName: 'MyCoolApp',
            version: '1.0.0',
            features: [],
            settings: { theme: 'light', itemsPerPage: 10 }
        };
    }
}

// 2-2. 呼び出し例
(async () => {
    const remoteConfig = await loadRemoteConfig('https://example.com/api/config.json');
    // 以降は remoteConfig を通常のオブジェクトとして利用
})();

ポイント
fetch の response.json() は内部で JSON.parse を行うため、二重にパースする必要はありません。
 ネットワークエラーだけでなく、response.ok が false の場合も例外として扱うと、ステータスコードに応じた処理が書きやすくなります。
* cache: 'no-store' を付与すると、開発中にサーバ側の変更が即時反映されます（本番ではキャッシュ戦略を検討）。

ハマった点やエラー解決

発生した問題 原因 解決策
Unexpected token エラーが頻発 JSON 文字列中に余計な改行やコメントが残っていた JSON はコメントを許容しないため、コメントは除去、もしくは /* */ ではなく別ファイルに分割
fetch が CORS エラーで失敗 API サーバ側で Access-Control-Allow-Origin が未設定 ローカル開発時はプロキシ (vite.config.js の proxy) を利用、またはサーバ側に CORS ヘッダーを追加
取得したオブジェクトが null response.json() 前に response.text() を呼んでストリームを消費してしまった response.json() は一度だけ呼び出すようにし、ストリームの二重消費を防止
変数 config が undefined になる try…catch の外で config を参照したタイミングが非同期処理の前 必要なら await で同期させるか、Promise が解決された後に使用する

解決策の実装例

上記表の「CORS エラー」対策として、Vite 開発サーバでプロキシを設定する例です。

Js

// vite.config.js
export default defineConfig({
    server: {
        proxy: {
            '/api': {
                target: 'https://example.com',
                changeOrigin: true,
                rewrite: path => path.replace(/^\/api/, '')
            }
        }
    }
});

この設定により、/api/config.json へのリクエストはローカルプロキシ経由で外部サーバへ転送され、CORS 制約を回避できます。

まとめ

本記事では、JavaScript で JSON データを変数に格納する基本的な流れと実装パターン を解説しました。

  • ローカル JSON のインライン定義 → JSON.parse＋エラーハンドリングで安全にオブジェクト化
  • 外部 API からの取得 → fetch と response.json() の組み合わせで非同期に取得、ステータスチェックとフォールバックで堅牢化
  • よくあるエラーと対策 → 構文エラー・CORS・ストリーム二重消費などのトラブルシューティング例

この記事を通して、読者は「JSON データを安全に変数へ格納し、アプリケーションの設定・データ駆動 UI に活用できる」ことを身につけました。次のステップとして、取得したデータを TypeScript の型で厳密に定義したり、immer や zustand などのステート管理ライブラリと組み合わせてリアクティブに扱う方法を追求したいと考えています。

参考資料