JSON.parse()とJSON.stringify()の違い

JSON.parse()とJSON.stringify()の違い

JavaScriptのブラウザーでは組み込みの JSON オブジェクトが利用でき、それには以下の 2 つのメソッドが備わっています。

■ parse(): JSON 文字列を引数に取り、それに対する JavaScript オブジェクトを返します。
■ stringify(): オブジェクトを引数に取り、等価な JSON 文字列を返します。

超簡単にまとめるとJSONの生成する時がJSON.stringfiy()でJSONの読み込みをする時がJSON.parse()になります。

JSON.stringify() – JavaScriptでJSONを作成する

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);
// オブジェクトを引数に取り、等価な JSON 文字列を返します。

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"

配列に対しても利用可能

const myArr = ['bacon', 'lettuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);
// 配列を引数に取り、等価な JSON 文字列を返します。

console.log(myArrStr);
// "["shark","fish","dolphin"]"

■ 応用篇
JSON.parse() は、値が返される前にオブジェクト値を変換できる2つ目の引数として、関数を指定することができます。

const user = {
  name: 'Sammy',
  email: 'Sammy@domain.com',
  plan: 'Pro'
};

const userStr = JSON.stringify(user);

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

↓
{
    "name": "SAMMY",
    "email": "SAMMY@DOMAIN.COM",
    "plan": "PRO"
}

JSON.parse () – JavaScriptでJSONを読み込む

const myObj = {
  name: 'Skip',
  age: 2,
  favoriteFood: 'Steak'
};

const myObjStr = JSON.stringify(myObj);
// オブジェクトを引数に取り、等価な JSON 文字列を返します。

console.log(myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"


---- 追加 ----

console.log(JSON.parse(myObjStr));
// Object {name:"Sammy",age:6,favoriteFood:"Tofu"}

const myArr = ['bacon', 'lettuce', 'tomatoes'];

const myArrStr = JSON.stringify(myArr);
// 配列を引数に取り、等価な JSON 文字列を返します。

console.log(myArrStr);
// "["shark","fish","dolphin"]"

---- 追加 ----

console.log(JSON.parse(myArrStr));
// ["shark","fish","dolphin"]

■ 応用篇
JSON.stringify() は、2つの追加引数を指定することができます。1つ目はreplacer関数で、2 つ目は文字列または数値を、返された文字列のスペース（インデント）として使用します。

const user = {
  id: 229,
  name: 'Sammy',
  email: 'Sammy@domain.com'
};

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

const userStr = JSON.stringify(user, replacer);
// "{"id":229,"name":"Sammy"}"

参考

【parse / stringify】JavaScriptでJSONを簡単に扱う方法 | IT・ものづくりエンジニアの転職・派遣求人情報なら【パソナテック】