はじめに
すべての最新ブラウザで使用可能な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のトピックページで演習とプログラミングプロジェクトをご覧ください。