この記事の要点
JavaScript の JSON.parse(text) でJSON 文字列を配列やオブジェクトに変換 逆方向（配列 → JSON 文字列）は JSON.stringify(arr) 不正な JSON は SyntaxError を投げるので、外部入力は try/catch で囲む fetch API のレスポンスは response.json() が便利（内部で parse される）

 

これはJavascriptのJSONから配列に変換する方法に関する記事です。サーバーから受け取ったJSON文字列や、localStorage に保存しておいた文字列を、JavaScriptで扱える配列やオブジェクトに変換します。

使用する関数

使用する関数
JSON.parse(text)

textにはJSON文字列を入れます。配列を表すJSONなら配列が返りますが、戻り値は常に配列やオブジェクトとは限りません。null・数値・文字列・真偽値も正当なJSON値です。配列として利用するなら解析後にArray.isArrayで確認します。

基本の使い方

const text = '[1, 2, 3, 4]'; const arr = JSON.parse(text); console.log(arr); // [1, 2, 3, 4] console.log(arr[0]); // 1

オブジェクトの配列もOK

const text = '[{"name":"Taro","age":20},{"name":"Jiro","age":18}]'; const users = JSON.parse(text); console.log(users[0].name); // "Taro" users.forEach(u => console.log(u.name, u.age));

逆の変換（配列 → JSON文字列）

逆方向は JSON.stringify を使います。

const arr = [1, 2, 3]; const text = JSON.stringify(arr); console.log(text); // "[1,2,3]"

エラー処理

不正なJSON文字列を渡すと SyntaxError が投げられます。外部入力を扱うときは try-catch で囲むのが安全です。

try {     const data = JSON.parse(text); } catch (e) {     console.error('JSONパース失敗:', e.message); }

fetch との組み合わせ

以下の元の例は取得・解析の最小例です。HTTP失敗や通信失敗、期待と違うデータ形状は処理していません。/api/usersは説明用のエンドポイントで、当サイトのAPIではありません。実用向けの失敗処理は後半の例を参照してください。

サーバーAPIから取得した結果なら、response.json() を使うと JSON.parse を自前で呼ぶ必要はありません。

fetch('/api/users')     .then(res => res.json())     .then(users => console.log(users));

注意点

• JSON はキー名を必ず "（ダブルクォート）で囲む必要がある。シングルクォートだとエラー
• 末尾のカンマ（trailing comma）は不可
• undefined、関数、コメントはJSONでは表現できない
• JSON.parse は同期処理。巨大JSONはメインスレッドを止めるので、必要に応じてWebWorker等で処理する

関連

• JSON.parse(text): JSON文字列 → JavaScript 値
• JSON.stringify(value): JavaScript 値 → JSON文字列
• response.json(): fetch APIで取得した Response を直接パース

解析した値が配列か確認する

JSON.parseはJSONの文法を解析する処理です。Array.isArrayはその戻り値が配列かを判定する処理で、役割が異なります。typeof nullはobjectになるため、typeofだけでは配列判定の代わりになりません。

const value = JSON.parse('[1, 2, 3]');
if (!Array.isArray(value)) {
    throw new TypeError('Expected an array');
}
console.log(value[0]); // 1

JSON文字列	解析結果	配列か
[1,2]	配列	true
[]	空配列	true。空だから不正とは限らない
{}	オブジェクト	false
null / 42 / true	null / 数値 / 真偽値	false。ただしJSONの文法は正しい
[1,]	SyntaxError	配列判定まで到達しない

配列の要素も検証する実行例

次はusers.mjsとして保存するESモジュールの例です。この例のデータ仕様は「各要素がオブジェクトで、nameは空白だけではない文字列、ageは0～150の整数」です。これは例の仕様であり、JSON自体の決まりではありません。余分なキーは戻り値へコピーせず、nameとageだけを返します。業務上の年齢範囲・必須項目・権限確認は別途設計します。

export function requireUsers(value) {
    if (!Array.isArray(value)) {
        throw new TypeError('Expected an array');
    }
    return value.map(user => {
        if (user === null || typeof user !== 'object' || Array.isArray(user)
            || typeof user.name !== 'string' || user.name.trim() === ''
            || !Number.isSafeInteger(user.age) || user.age < 0 || user.age > 150) {
            throw new TypeError('Invalid user shape');
        }
        return { name: user.name, age: user.age };
    });
}

export function parseUsers(text) {
    return requireUsers(JSON.parse(text));
}

export async function loadUsers(url, fetcher = globalThis.fetch) {
    const response = await fetcher(url);
    if (!response.ok) {
        throw new Error(`HTTP ${response.status}`);
    }
    return requireUsers(await response.json());
}

parseUsersはJSON文字列用、loadUsersはHTTP取得用です。response.json()はPromiseを返すのでawaitし、その結果にrequireUsersを適用します。JSON.parseをもう一度呼ぶ必要はありません。Responseの本文は通常一度しか読めないため、同じResponseへjson()を繰り返し呼ばないでください。

文字列を変換する

import { parseUsers } from './users.mjs';
try {
    const users = parseUsers('[{"name":"Taro","age":20}]');
    console.log(users); // [{ name: 'Taro', age: 20 }]
} catch (error) {
    console.error('JSON or user shape is invalid');
}

ブラウザでimportする場合はtype="module"のスクリプトを使い、モジュールをHTTP配信してください。Nodeでは.mjsを実行できます。元の短い例と同じスコープにconst textなどを重複して貼るのではなく、例ごとに分けます。

HTTP取得時も呼び出し元で失敗を扱う

import { loadUsers } from './users.mjs';
try {
    const users = await loadUsers('/api/users');
    console.log(users);
} catch (error) {
    console.error('Could not load users');
}

HTTP 404などはfetch自体のrejectとは限りません。response.okを先に確認してから解析します。この例では204の空本文はJSONとして解析できず失敗になります。APIが204を返す設計なら、空配列にする等の方針を明示して別途扱ってください。例外を無条件に空配列へ置き換えると、通信失敗と正常な0件を区別できません。

失敗したときの切り分け

1. 通信失敗：URL、ネットワーク、CORS、認証などを確認する。
2. HTTP失敗：ステータスを確認する。HTMLのエラー本文をJSONとして解析しない。
3. JSON解析失敗：空本文、HTML、末尾カンマ、シングルクォートなどを確認する。
4. 形状検証失敗：配列でなくusersプロパティを持つオブジェクトなのか、要素の型・必須項目が違うのかを確認する。

解析した文字列を画面に出すときはtextContentやテンプレートのエスケープを使い、innerHTMLへ渡さないでください。JSONだから安全なHTMLというわけではありません。大きな整数のIDはNumberの安全な整数範囲を超えると精度を失うので、API側から文字列として返す方法も検討します。

検証環境と資料

Nodeの実JSON.parse/Responseとモックfetchで27テストを実行し、元の配列例・オブジェクト例・逆変換、正常取得、空配列、不正JSON、要素不正、HTTP 404、204、通信失敗、整数精度を確認しました。実APIへの通信、実ブラウザのCORS・認証・画面表示全体は未検証です。

一次資料: ECMAScript JSON.parse、Fetch Standardのjson()（2026年10月確認）。