今更聞けないJSON.parse()とJSON.stringify()の使い方

parse、stringify、自由自在にできていますか？余裕ですか？

最近、Dify×GASなどAPI周りの連携が増えてJSONやYAMLなどを取り扱うことが増えたと思いますが、特にJavaScriptで使われるJSON.parse()とJSON.stringify()の二つのメソッドの違いを理解しているでしょうか？ 私はDify×GASの事例でAIに任せていたら失敗しまくっていたので、こりゃイカンと調べてきたのでまとめます。

ということで、英語の文献でちょうど良くあった下記のサイトを使います。
https://www.digitalocean.com/community/tutorials/js-json-parse-stringify

JSON.parse()

JSON.parse()はJSONの文字列をJavaScriptのオブジェクトに変換(パース)するメソッドである。

let userStr = '{"name":"Sammy","email":"[e-mail]","plan":"Pro"}';
let userObj = JSON.parse(userStr);

console.log(userObj);
// 実行結果：{name: 'Sammy', email: '[e-mail]', plan: 'Pro'}

ちなみに、JavaScriptと異なり末尾のコンマはJSONでは無効であり、エラーになる。 コンマの次にプロパティが来るはずだと怒られます。

let userStr = '{"name":"Sammy","email":"[e-mail]","plan":"Pro",}';

> Uncaught SyntaxError: Expected double-quoted property name in JSON at position 57 (line 1 column 58) at JSON.parse (<anonymous>) at <anonymous>:1:20

ちなみにJSONからJavaScriptのオブジェクトへパースするとき、プロパティのkeyとvalueに対して操作を加えることもできる。

let userStr = '{"name":"Sammy","email":"[e-mail]","plan":"Pro"}';

let userObj = JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

console.log(userObj); 
// 実行結果：{name: 'SAMMY', email: '[e-mail]', plan: 'PRO'}

JSON.stringify()

JavaScriptオブジェクトを受け取り、それをJSON文字列に変換する。 これはJSON.parse()とは逆の効果になる。

let userObj = {
  name: "Sammy",
  email: "[e-mail]",
  plan: "Pro"
};

let userStr = JSON.stringify(userObj);

console.log(userStr);
// 実行結果：{"name":"Sammy","email":"[e-mail]","plan":"Pro"}

JSON.stringify()は任意で第二引数、第三引数をとることができ、それぞれreplacer関数と、文字列の間に挿入するStringかNumberである。replacer関数はkeyとvalueを引数に取ることができる。

これは使う頻度こそ少ないかもしれないですが、いらないデータが混じってるときに使えますね。

let userObj = {
  name: "Sammy",
  email: "[e-mail]",
  plan: "Pro"
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

// 第二引数にreplacer
let userStrReplacer = JSON.stringify(userObj, replacer);

console.log(userStrReplacer);

let userObj = {
  name: "Sammy",
  email: "[e-mail]",
  plan: "Pro"
};

// replacerは使わない場合null。aaaで区切ってみる。
let userStrSpace = JSON.stringify(user, null, 'aaa');

console.log(userStrSpace);
// 実行結果：'{\naaa"name": "Sammy",\naaa"email": "[e-mail]",\naaa"plan": "Pro"\n}'

まとめ

いかがでしたでしょうか？基礎とは言えど、最近AIばかりに任せていて頭からポッコリ抜け落ちてごちゃごちゃになっていた人もいるのではないでしょうか？(←) そんな同類のお役に立てれば幸いです(^^♪