JS JSONの基本構造と使い方を理解する

今回は、「JSON」についてご紹介させて頂きます。

「JSON」とは、「JavaScript Object Notation」の略で、オブジェクトを表記するための、テキストベースの形式になっているものになります。

本来はJavaScriptと他の言語を連携させるためのものでしたが、現在は様々な用途で使用されています。

「オブジェクト」と名前が付いているように、テキストデータでありながらオブジェクト構造のデータを持つことが出来るため、軽量であることがより多くのシーンで使用される理由の一つになります。

色々と魅力のある「JSON」ですが、ここでは簡単な使い方のみご紹介させていただきます。

JSONの構造
使い方
1. JSのオブジェクトをJSONに変換する
2. JSONをJSのオブジェクトに変換する
あとがき

JSONの構造

[
    {
        "name" : "太郎",
        "age" : "30",
        "address" : "Tokyo",
        "interests" : "野球"
    },
    {
        "name" : "花子",
        "age" : "33",
        "address" : "Kanagawa",
        "interests" : "水泳"
    },
]

「JSON」の構文は、オブジェクトの構文と非常に似ています。

「{ “名前” : “値” }」という形式で記述されます。

記述の際は、以下の点に注意してください。

「名前」、「値」は「”（ダブルクオテーション）」で囲むこと
メソッドは記述することが出来ない

使い方

JSのオブジェクトをJSONに変換する

const person = {
        name : '太郎',
        age : '30',
        address : 'Tokyo',
        interests : '野球'
}

まずシンプルなJSのオブジェクトを作成します。

このオブジェクトを、「JSON.stringify()」メソッドを使って、「JSON」に変換します。

const person = {
        name : '太郎',
        age : '30',
        address : 'Tokyo',
        interests : '野球'
}

let jsonData = JSON.stringify(person);

console.log(jsonData);
 {"name":"太郎","age":"30","address":"Tokyo","interests":"野球"}

コンソールにJSONに変換されたデータが表示されているのを確認してください。

JSONをJSのオブジェクトに変換する

let newPerson = JSON.parse(jsonData);

console.log( newPerson);

{name: '太郎', age: '30', address: 'Tokyo', interests: '野球'}
address: "Tokyo"
age: "30"
interests: "野球"
name: "太郎"
[[Prototype]]: Object

JSONをオブジェクトにするには、「JSON.parse()」メソッドを使用します。

先程JSONにしたデータを、オブジェクトに変換してみます。

式はとても簡単で、

「let newPerson = JSON.parse(jsonData);」

と書くだけです。

コンソールには、無事、オブジェクトに変換されたデータが表示されています。