この内容は古いバージョンです。最新バージョンを表示するには、戻るボタンを押してください。
バージョン:4
ページ更新者:atom
更新日時:2026-06-11 07:10:02

タイトル: JSONから配列に変換
SEOタイトル: JSONから配列に変換

この記事の要点
  • 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を入れます。戻り値として配列（またはオブジェクト）が返却されます。

基本の使い方

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 との組み合わせ

サーバー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 を直接パース