本記事では、JavaScriptでJSONをオブジェクトに変換する方法について解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
| 出版社 | 技術評論社 |
|---|---|
| 著者 | 山田 祥寛 |
| 発売日 | 2023/2/13 |
| ページ数 | 624ページ |
| レビュー (Amazon) | (4件) |
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ！
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ！
綺麗なコードが書けるようになる！
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
| 出版社 | オライリージャパン |
|---|---|
| 著者 | Dustin Boswell / Trevor Foucher |
| 発売日 | 2012/6/23 |
| ページ数 | 260ページ |
| レビュー (Amazon) | (620件) |
先輩くん
より良いコードを書きたい人におすすめの本だよ！
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです！
JSON.parseメソッドの使い方
JSONをオブジェクトに変換したい時は、JSON.parseメソッドを使用します。基本的な使い方は以下のとおりです。
let result = JSON.parse(jsonデータ, [function]);構文解説
- result：オブジェクト形式に変換されたJSONが代入される
- jsonデータ(第一引数)：オブジェクト形式に変換したいJSONを指定
- function(第二引数)：データを加工したい場合は処理を記述する(省略可能)
実際にJSON.parseメソッドを使用してオブジェクト形式に変換してみましょう。
let jsonData = '{"name": "Taro", "age": 20, "gender": "male", "hobby":["Soccer", "Reading"]}';
let personObj = JSON.parse(jsonData);
console.log(personObj); // => {name: 'Taro', age: 20, gender: 'male', hobby: ['Soccer', 'Reading']}
console.log(personObj.name); // => Taro
console.log(personObj.hobby[0]); // => Soccer「オブジェクト.プロパティ名」で値を取得することが出来ました。これでJSONをオブジェクトのように扱うことが可能になります。
続いて、省略可能な第二引数の関数を使用してデータを加工してみましょう。今回は、JSONの年齢(age)を-2歳若くしたデータをpersonObjに渡したいと思います。
let jsonData = '{"name": "Taro", "age": 20, "gender": "male", "hobby":["Soccer", "Reading"]}';
let personObj = JSON.parse(jsonData, (key, value) => {
if (key === "age") {
return value - 2;
}
return value;
});
console.log(personObj); // => {name: 'Taro', age: 18, gender: 'male', hobby: ['Soccer', 'Reading']
console.log(personObj.age); // => 18関数の第一引数(key)にはプロパティ名が渡され、第二引数(value)には値が渡されます。
if文を使用してkeyの値がageの時にだけ「return value -2」を返します。するとvalueの値が-2されたデータを渡すことが出来ます。
それ以外は特にデータを加工しないので、「return value」でそのまま返してあげます。
DMM WEBCAMP 
CodeCamp 
TechAcademy 
