JSON.parse（）とJSON.stringify（）の使用方法

序章

最新のすべてのブラウザーで使用可能なJSONオブジェクトには、JSON形式のコンテンツを処理するための2つの便利なメソッドparseとstringifyがあります。

JSON.parse()

JSON.parse()はJSON文字列を受け取り、それをJavaScriptオブジェクトに変換します。

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

let userObj = JSON.parse(userStr);

console.log(userObj);

このコードを実行すると、次の出力が生成されます。

Output{name: 'Sammy', email: '[email protected]', plan: 'Pro'}
  email: "[email protected]"
  name: "Sammy"
  plan: "Pro"

末尾のカンマはJSONでは無効であるため、渡された文字列に末尾のカンマが含まれている場合、JSON.parse()はエラーをスローします。

JSON.parse()は、オブジェクトの値が返される前に変換できる2番目の引数として関数を受け取ることができます。

ここで、オブジェクトの値は、parseメソッドの返されたオブジェクトで大文字に変換されます。

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

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

console.log(userObj);

このコードを実行すると、次の出力が生成されます。

Output{name: 'SAMMY', email: '[email protected]', plan: 'PRO'}
  email: "[email protected]"
  name: "SAMMY"
  plan: "PRO"

値は大文字に変換されています。

JSON.stringify()

JSON.stringify()はJavaScriptオブジェクトを受け取り、それをJSON文字列に変換します。

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

let userStr = JSON.stringify(userObj);

console.log(userStr);

このコードを実行すると、次の出力が生成されます。

Output{"name":"Sammy","email":"[email protected]","plan":"Pro"}

JSON.stringify()は2つの追加の引数を取ることができます。 1つ目はreplacer関数です。 2つ目は、返された文字列でspaceとして使用するStringまたはNumberの値です。

undefinedとして返される値は、返される文字列から除外されるため、replacer関数を使用して値を除外できます。

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

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

let userStrReplacer = JSON.stringify(userObj, replacer);

console.log(userStrReplacer);

このコードを実行すると、次の出力が生成されます。

Output{"name":"Sammy","plan":"Pro"}

emailキーと値のペアがオブジェクトから削除されました。

そして、space引数が渡された例：

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

let userStrSpace = JSON.stringify(user, null, '...');

console.log(userStrSpace);

このコードを実行すると、次の出力が生成されます。

Output{
..."name": "Sammy",
..."email": "[email protected]",
..."plan": "Pro"
}

インデントは...に置き換えられました。

結論

このチュートリアルでは、JSON.parse()およびJSON.stringify()メソッドを使用しました。 JavascriptでJSONを操作する方法について詳しく知りたい場合は、JavaScriptでJSONを操作する方法チュートリアルをご覧ください。

JavaScriptでのコーディングの詳細については、 JavaScriptでコーディングする方法シリーズをご覧になるか、演習やプログラミングプロジェクトについてはJavaScriptトピックページをご覧ください。