はじめに
すべての最新ブラウザで使用可能なJSON
オブジェクトには、JSON 形式のコンテンツを処理するための便利なメソッドであるparse
とstringify
の 2 種類があります。JSON.parse()
は、JSON 文字列を取得し、JavaScriptオブジェクトに変換します。JSON.stringify()
は、JavaScriptオブジェクトを取得し、JSON 文字列に変換します。
次に例を示します。
const myObj = {
name: 'Skip',
age: 2,
favoriteFood: 'Steak'
};
const myObjStr = JSON.stringify(myObj);
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);
console.log(myArrStr);
// "["shark","fish","dolphin"]"
console.log(JSON.parse(myArrStr));
// ["shark","fish","dolphin"]
JSON.parse()
JSON.parse()
は、値が返される前にオブジェクト値を変換できる2つ目の引数として、関数を指定することができます。この時、parse
メソッドの返されたオブジェクトでは、オブジェクトの値が大文字に変換されます。
const user = {
name: 'Sammy',
email: '[email protected]',
plan: 'Pro'
};
const userStr = JSON.stringify(user);
JSON.parse(userStr, (key, value) => {
if (typeof value === 'string') {
return value.toUpperCase();
}
return value;
});
注: JSON では末尾のカンマは無効なため、渡された文字列の末尾にカンマがある場合、JSON.parse()
は、エラーを表示します。
JSON.stringify()
JSON.stringify()
は、2つの追加引数を指定することができます。1つ目はreplacer
関数で、2 つ目は文字列
または数値
を、返された文字列のスペース(インデント)
として使用します。
replacer 関数を使用すると、 undefined
として返された値が結果の文字列から除外されるため、値をフィルターで除外できます。
const user = {
id: 229,
name: 'Sammy',
email: '[email protected]'
};
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"}"
そして、スペース
引数が渡された例を示します。
const user = {
name: 'Sammy',
email: '[email protected]',
plan: 'Pro'
};
const userStr = JSON.stringify(user, null, '...');
// "{
// ..."name": "Sammy",
// ..."email": "[email protected]",
// ..."plan": "Pro"
// }"
まとめ
このチュートリアルでは、JSON.parse()
とJSON.stringify()
メソッドの使用方法を見てきました。JavaScript でJSON を使用する方法について詳しく知りたい場合は、JavaScript でJSON を使用する方法のチュートリアルをご覧ください。
JavaScript でのコーディングの詳細については、JavaScript でのコーディング方法シリーズを参照するか、JavaScriptのトピックページで演習とプログラミングプロジェクトをご覧ください。