2017/12 JSON入門

2017年12月20日に公開大阪

JSONとは

JSONは、データのフォーマット(記述ルール)の一種
テキスト形式で扱え、フォーマットがシンプルなのが特徴
JavaScriptで簡単に扱え、サーバサイドとデータのやり取りするのにとても便利

フォーマット

概要

{
    "name": "山田太郎",
    "age": 22,
    "pet": false,
    "school": ["小学校", "中学校", "高校", "大学"],
    "parents": [
        {
            "name": "山田一郎",
            "age": 52
        },{
            "name": "山田花子",
            "age": 50
        }
    ]
}

このように左の「キー」、右の「各種データ」をつなげてデータを記述します。この例では個人情報を記述しています。「キー」を見ていくとなんとなく内容が見えてくると思います。

各種データの型

{
    "数値": 123,
    "文字列": "もじ",
    "真値": true,
    "偽値": false,
    "配列": [1, 2, 3],
    "null": null,
    "オブジェクト": {
        "name": "山田一郎",
        "age": 52
    }
}

数値、文字列、真偽値、配列、null、オブジェクトの６つの型を利用できます。コメントは書けません。

配列

{
    "数値": [1, 2, 3],
    "オブジェクト": [
        {
            "name": "山田一郎",
            "age": "52"
        },{
            "name": "山田花子",
            "age": "50"
        }
    ],
    "配列": [
        [1, 2, 3],
        [2016, 2017, 2018],
        [22, 52, 55]
    ]
}

配列の中には、数値を入れることも、オブジェクトを入れることも、配列の中に配列を入れることもできます。

階層を掘って関連性を表現

{
    "name": "山田太郎",
    "smartphone": {
        "kind": "iphone",
        "company": {
            "name": "apple",
            "country": "America"
        }
    }
}

JSONはデータを並べるだけではありません。このように個人(1層)->スマートフォン(2層)->会社(3層)と階層を掘り下げ繋げることで、個人の持っているスマホのメーカーを表現できます。

Tips

データの関連性

{
    "user": "山田太郎",
    "name": "photo.png",
    "size": 500,
    "imageWidth": 300,
    "imageHeight": 200,
    "imageType": "png",
}

写真のデータを上記のような形でついつい横並びにデータを並べしまうことがよくあります。しかし、下記のように画像データは画像データとして、オブジェクトにまとめることがおすすめです。まとめられるものはまとめておくことが、半年後、１年後にメンテナンスするときの助けになるでしょう。

{
    "user": "山田太郎",
    "image": {
        "name": "photo.png",
        "size": 500,
        "width": 300,
        "height": 200,
        "type": "png"
    }
}

配列とオブジェクト

{
    "users": "山田太郎",
    "goods": [
        {
            "item": "wallet",
            "price": 10000,
            "old": 2
        },{
            "item": "watch",
            "price": 20000,
            "old": 4
        },{
            "item": "glasses",
            "price": 8000,
            "old": 1
        }
    ]
}

// javascript
const wallet = data.goods.find((element)=>{
    return element.item == "wallet"
});

ユーザの持ち物を表現するのに、上記のように持ち物を配列で表現することができます。しかし、下記のように持ち物をオブジェクトで表現することもできます。

{
    "users": "山田太郎",
    "goods": {
        "wallet": {
            "price": 10000,
            "old": 2
        },
        "watch": {
            "price": 20000,
            "old": 4
        },
        "glasses": {
            "price": 8000,
            "old": 1
        },
    }
}

// javascript
const wallet = data.goods.wallet;

どう使い分ける？

配列
- 並び順番を表現できる
- JSで欲しいデータを得る手順が複雑
オブジェクト
- 並び順番を表現できない
- JSで欲しいデータを得るのが楽

むやみにデータを配列に入れ込む設計ではなく、ソート順番を表現したい場合は配列を使い、それ以外のときはオブジェクトで設計したほうがよいと思います。

# 入門 # フロントエンド # 大阪