JSON.parse()、JSON.stringify()の使い方|間違えやすいポイントも解説します!

 2023.04.27  株式会社システムインテグレータ

TSC

JavaScript Object Notation (JSON) は、データのやり取りを簡単にするために開発された軽量なデータ交換フォーマットです。JSONは言語に依存せず、多くのプログラミング言語で利用できます。

この記事では、JSONの基本的な使い方であるparse()stringify()メソッドについて解説し、よくある間違いや注意点についても説明します。
Young man wearing futuristic glasses against blue background-2


JSON.parse()とは

JSON形式の文字列をJavaScriptオブジェクトに変換するのがJSON.parse()メソッドです。これにより、JSONデータをJavaScriptで操作しやすくなります。

// 使用方法(オブジェクト準備~.parse()実行):
const jsonString = '{"name": "Sayoko", "age": 25}';
const jsonObject = JSON.parse(jsonString);

// 出力指示
console.log(jsonObject.name); 

// 出力結果:
Sayoko

JSON.parse()の間違えやすいポイント

1.JSON形式の文字列内にあるプロパティ名と値はダブルクォーテーション(")で囲む必要があります。シングルクォーテーション(')を使うと、エラーが発生します。

2.JSON.parse() は、文字列が正しいJSON形式であることを前提としています。文字列の末尾がカンマになっているなど不正な形式の場合、SyntaxErrorが発生します。

JSON.stringify()とは

JSON.stringify()メソッドは、JavaScriptオブジェクトをJSON形式の文字列に変換します。これにより、データをサーバーに送信する前にデータを整形することができます。

// 使用方法(オブジェクト準備~.stringify()実行):
const jsonObject = {
    name: "Kallen",
    age: 18
};
const jsonString = JSON.stringify(jsonObject);

// 出力指示
console.log(jsonString); 

// 出力結果:
{"name":" Kallen","age":18}

JSON.stringify()の間違えやすいポイント

1.JSON.stringify()メソッドは、オブジェクトのプロパティがシンボル型の場合、そのプロパティを無視します。

// 例:
const mySymbol = Symbol('mySymbol');
const jsonObject = {
    name: "Nunnally",
    age: 15,
    [mySymbol]: 'hiddenValue
};
const jsonString = JSON.stringify(jsonObject);

// 出力指示
console.log(jsonString);

// 出力結果:
{"name":"Nunnally","age":15}
2.JSON.stringify()は、プロパティ値が関数型の場合、そのプロパティも無視します。

 3.循環参照があるオブジェクトをJSON.stringify()で変換しようとすると、TypeErrorが発生します。

// 例:
const jsonObject1 = {
    name: "Kallen",
    age: 18
};
const jsonObject2 = {
    name: "Gino",
    age: 17
};

jsonObject1.friend = jsonObject2;
jsonObject2.friend = jsonObject1;

const jsonString = JSON.stringify(jsonObject1);

// 出力指示
console.log(jsonString);

 // 出力結果:
Error: TypeError Converting circular structure to JSON 
(循環参照)

循環参照を解決するには、JSON.stringify()の第二引数にリプレイサ(置換関数)を渡ます。リプレイサを使って、循環参照を無視するか別の方法で処理することができます。

JSON.stringify()の第二引数にリプレイサ(置換関数)を設定する例

上の間違えやすいポイントの解説で出てきた、JSON.stringify()のリプレイサ(置換関数)についてもう少し詳しく解説します。

JSON.stringify()の第二引数にリプレイサを渡すことで、JSONデータをフィルタリングすることができます。リプレイサは、キーと値のペアを引数に取り、値を返す関数です。返された値によって、結果のJSON文字列に含めるかどうかが決まります。

// 例
// オブジェクトの準備
const jsonObject1 = {
    "name": "Kallen",
    "age": 18
};
const jsonObject2 = {
    "name": "Gino",
    "age": 17
};

// 互いに相手のオブジェクトへの参照を持つfriendプロパティを追加
jsonObject1.friend = jsonObject2;
jsonObject2.friend = jsonObject1;

// friendプロパティの循環参照によるエラーを回避するリプレイサ関数
function excludeFriendProperty(key, value) {
    if (key === "friend" && typeof value === "object" && value !== null) {
        return undefined;
    }
    return value;
}

// jsonObject1をJSON文字列に変換(リプレイサ関数を適用)
const filteredJsonString = JSON.stringify(jsonObject1, excludeFriendProperty);

// 出力指示
console.log(filteredJsonString);

// 出力結果: 
{"name":"Kallen","age":18}

この例では、リプレイサ関数がfriendプロパティの値をチェックし、オブジェクトの場合はundefinedを返しています。undefinedが返されると、そのプロパティはJSON文字列に含まれません。

まとめ

この記事では、JSONparse()stringify()メソッドの使い方と、間違えやすいポイントについて解説しました。これらのメソッドを使うことで、データを簡単にやり取りすることができます。今回ご紹介した、シンボル型や関数型のプロパティ、循環参照などのエラーには注意しながらどんどん使っていきましょう。


-----参考情報-----
■TV出演動画:ええじゃない課Biz(2022/05/29 放送 TOKYO MX)
アンタッチャブル柴田さん、アルコ&ピースさんがレギュラーのビジネス情報番組「ええじゃない課Biz」にて、プログラミングスキル判定サービス「TOPSIC」と企業・学校対抗プログラミングコンテスト「PG BATTLE」のご紹介をさせていただきました。


教養としてのプログラミング入門BOOK

RELATED POST関連記事


RECENT POST「プログラミング」の最新記事


プログラミング

【初心者向け】SQLとは?データベース言語の基礎知識から具体例まで分かりやすく解説

プログラミング

【初心者向け】JSONとは?データ形式の基礎や書き方、使用例などを解説

プログラミング

UPDATE文(SQLを基本から学ぶシリーズ)

プログラミング

サーバーサイドエンジニアとは? 仕事内容や年収、必要なスキル・知識を解説

JSON.parse()、JSON.stringify()の使い方|間違えやすいポイントも解説します!

TOPSIC TOPへ

新規CTA

TOPSIC-SQL4コマ漫画

RANKING人気資料ランキング

RANKING人気記事ランキング

RECENT POST 最新記事