JavaScriptのJSON.parseを実例とともに解説

（最終更新月：2023年12月）

✔当記事は以下のような方を対象としています

「JavaScriptでJSONをパースする方法って何？」

「JSON.parseを使ったデータ処理を理解したい」

「具体的なJSON.parseの使用例を見たくない？」

✔当記事を読むことで理解できる内容

JavaScriptでのJSONのパース方法
JSON.parseの使い方とそのテクニック
実際に使用されるJSON.parseの例

当記事では、単にJSONをJavaScriptオブジェクトに変換する方法を説明するだけではなく、JSON.parse機能の細かい使い方やエラーハンドリングまで、実践的な例を交えながら詳細にご紹介していきます。

ぜひ最後までご覧ください。

✔読むのではなく、動画・音声で学びたい方はこちらをどうぞ

筆者プロフィール

【現職】プロダクトマネージャー

【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作

「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。

【当ブログで紹介しているサイト】

当サイトチュートリアルで作成したデモ版日報アプリ

Django × Reactで開発したツール系Webアプリ

✔人に見せても恥ずかしくないコードを書こう

「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。

見るからにきれいなコードの書き方
コードの分割方法
変数や関数の命名規則

エンジニアのスタンダートとすべき基準を一から解説しています。

何回も読むのに値する本なので、ぜひ手にとって読んでみてください。

リーダブルコード ―より良いコードを書くためのシンプルで実践的なテクニック

created by Rinker

JSONデータの基本

こちらでは、JSONデータの基本についてお伝えしていきます。

JSONデータの構造を理解することで、データの交換やウェブAPIの操作に役立つでしょう。

JSON形式の概念解説
JSONオブジェクトとは何か
ウェブAPIとJSONの関係

JSON形式の概念解説

JSON（JavaScript Object Notation）は、データ記述言語のひとつで、シンプルで軽量なフォーマットです。

主に異なるシステム間でデータを送受信する際に使用されます。

{"name": "John", "age": 30}

JSON形式で人の名前と年齢を表しています。

読み書きが容易なため、プログラミングやウェブ開発で広く採用されています。

JSONオブジェクトとは何か

JSONオブジェクトとは、データをキーと値のペアで表現したオブジェクトのことを指します。

「fruit」というキーに「apple」という値が紐づいており、「color」というキーには「red」という値が紐づいています。

{"fruit": "apple", "color": "red"}

この形式はJavaScriptのオブジェクトリテラルに似ていますが、JSONはその構文を元に独立した言語非依存のデータフォーマットです。

ウェブAPIとJSONの関係

ウェブAPIは、異なるソフトウェア間の橋渡しをするためのインターフェースです。

アプリケーション同士がデータをやり取りをおこなうところ。

そのやり取りをする際に、JSONフォーマットがよく使われています。

JSON.parse()の探求

次に、JavaScriptでJSONデータを扱う際に核となる関数、JSON.parse()について掘り下げていきましょう。

この関数の仕様を理解することで、JSONデータの安全で効率的な操作が可能になります。

JSON.parse()が果たす役割
JSON.parse()の基本的な構文
引数の詳細な説明
JSON.parse()からの期待される返値
JSON.parse()使用時の例外とその扱い

JSON.parse()が果たす役割

JSON.parse()関数は、JSON形式の文字列をJavaScriptのオブジェクトに変換する役割を果たします。

以下のようなJSON文字列をJSON.parse()に渡してみます。

'{"name": "Alice", "age": 25}'

JavaScriptで直接操作可能なオブジェクトを得られます。

{name: "Alice", age: 25}

ウェブAPIから受け取ったデータを扱う際になどに使う方法です。

JSON.parse()の基本的な構文

JSON.parse()の基本的な構文はとてもシンプルです。

JSON.parse(text[, reviver])

text: JSON形式の文字列
reviver: オプショナルな引数で、変換処理中に各キーの値を変更するための関数を指定する

初心者はまず、基本的な構文に慣れることから始めましょう。

引数の詳細な説明

JSON.parse()に渡す第一引数は、有効なJSON形式の文字列である必要があります。

無効な形式の場合、SyntaxErrorが発生するからです。

第二引数のreviver関数を使用すると、パースが進むにつれて各キーに対してカスタム処理を実行できます。

例えば、日付文字列をDateオブジェクトに変換する処理を挿入する、などです。

著者の自作した以下のページで、JSON形式かどうか調べられます。

Fun Tools

ReactとDjangoで作成したWebアプリです。便利なツールを揃えているので、ぜひ立ち寄ってみてください。作り方はブログで紹介しています！

JSON.parse()からの期待される返値

JSON.parse()で正常にパースされると、JSON文字列がJavaScriptのオブジェクト、配列、文字列、数値、ブール値、またはnullに変換されます。

一方で、無効なJSONを与えた場合には、エラーがスローされるので適切な例外処理が重要です。

JSON.parse()使用時の例外とその扱い

JSON.parse()を使用する際に、無効なJSON文字列を渡したら、通常はSyntaxErrorがスローされます。

エラー処理には、try...catch構文を使用して例外をキャッチし、適切にハンドリングしましょう。

try {
  const user = JSON.parse('{"name": "Emma", "age": 28');
} catch (e) {
  console.error("パースエラー:", e.message);
}

ここで意図的に閉じカッコを省略しているため、エラーが表示されます。

Fun Tools

ReactとDjangoで作成したWebアプリです。便利なツールを揃えているので、ぜひ立ち寄ってみてください。作り方はブログで紹介しています！

JSON.parse() を実際に使ってみよう

ここでは、JSON.parse()を実際に使ってコードを書き、JSONデータをパースする方法を見ていきましょう。

実践を通じて、より深い理解とスキルを開発できます。

実際にコードを書いてみる
JSONデータのパース手順
reviver関数の活用方法

実際にコードを書いてみる

実際にJSON.parse()を使用したコード例を見てみましょう。

例として、次のJSON文字列をパースするコードを書いています:

const json = '{"name": "David", "skills": ["JavaScript", "React"]}';
const person = JSON.parse(json);

console.log(person.name);  // David
console.log(person.skills);  // ["JavaScript", "React"]

JSON文字列がJavaScriptオブジェクトに変換され、nameプロパティやskills配列にアクセスできます。

JSONデータのパース手順

JSONデータをパースする手順はとてもシンプルです。

有効なJSON文字列を用意
その文字列をJSON.parse()関数に渡して実行
相当するJavaScriptのデータ構造を得られる

このプロセスは同期的に行われるため、変換が完了したらすぐにデータを使用できます。

reviver関数の活用方法

reviver関数は、JSON.parse()呼び出し時に各キーに対してカスタム処理をおこなう場合に便利です。

たとえば、JSON内での日付の文字列をJavaScriptのDateオブジェクトへ変換する際に使います。

const jsonDate = '{"date": "2023-03-01T12:00:00.000Z"}';
const data = JSON.parse(jsonDate, (key, value) => {
  return key === 'date' ? new Date(value) : value;
});

console.log(data.date instanceof Date);  // true

このコードでは、reviver関数がdateキーを検出すると、その値をDateオブジェクトに変換します。

典型的なJSONパースエラーへの対処法

JSONデータのパース時には、いくつかの典型的なエラーに直面することがあります。

これらに適切に対応する方法を学びましょう。

末尾のカンマは受け入れられない問題
JSONではシングルクオート使用は許されない

末尾のカンマは受け入れられない問題

JSON形式では、オブジェクトや配列リテラルの末尾にカンマをつけられせん。

以下のように、末尾のカンマがあるとJSON.parse()はエラーをスローします。

const json = '{"name": "Evan",}';
try {
  const object = JSON.parse(json);
} catch (e) {
  console.error("末尾のカンマは無効です: ", e.message);
}

このエラーを解決するためには、不要なカンマを削除し、適切なJSON形式を保証する必要があります。

JSONではシングルクオート使用は許されない

JSON形式では、文字列をシングルクオート（’）ではなく、必ずダブルクオート（”）で囲みましょう。

シングルクオートで囲われた文字列をJSON.parse()に渡すとエラーになります。

try {
  const wrongJson = "{'key': 'value'}";
  const obj = JSON.parse(wrongJson);
} catch (e) {
  console.error("JSONではシングルクオートは使用できません: ", e.message);
}

適切なJSON形式にするには、全ての文字列をダブルクオートで囲むことが重要です。

JSONとの深い結びつき

JSON.parse()とその逆関数JSON.stringify()はJavaScriptにおけるJSONデータの扱いをより柔軟にします。

これらの関数を適切に使用することで、複雑なデータを簡単に扱えるようになるからです。

JSON.stringify()の利用方法
JSON.parse()とJSON.stringify()の相互作用

JSON.stringify()の利用方法

JSON.stringify()関数は、JavaScriptのオブジェクトや値をJSON形式の文字列に変換します。

オブジェクトのデータをサーバーに送信したり、ローカルストレージに保存したりする際に有効です。

使用方法は簡単で、変換したいオブジェクトを引数として渡すだけです。

const obj = { name: "Lily", age: 29 };
const jsonString = JSON.stringify(obj);

console.log(jsonString);  // {"name":"Lily","age":29}

このように、オブジェクトがJSON形式の文字列に変換されます。

JSON.parse()とJSON.stringify()の相互作用

JSON.parse()とJSON.stringify()を組み合わせることで、オブジェクトのディープコピーを作成できます。

この方法でオブジェクトをコピーすると、元のオブジェクトへの参照は残らず、完全なコピーの作成が可能です。

const original = { name: "Bob", details: { age: 40, city: "New York" } };
const copy = JSON.parse(JSON.stringify(original));

console.log(copy.name);  // Bob
console.log(copy.details === original.details);  // false

このコピーオブジェクトは元のオブジェクトとは独立しているので、片方を変更してももう片方に影響はありません。