Getting Started

2020/03/05

JSON を学習

どうも、こんにちは！JellyWareです。

Getting Started!! Riiiver tutorialの第9弾となります。

このシリーズは、Riiiverやプログラミングを学び、初心者の方でもEco-Drive Riiiverを活用したオリジナルアプリを理解して作れるようになることを目指します。

第9弾では、データ形式の1つである『JSON』について解説していきます。

前回のAPI通信で返ってきたデータの形式もJSONです。Riiiverでも取り扱われているため、どういったデータ形式なのか確認していきましょう。

目次

JSONとは？

JavaScript Object Notaion を省略してJSONと呼びます。『JavaScriptでのオブジェクトの書き方』という意味で、冒頭でも述べましたがデータ形式の1つです。

プログラミングで何かしらのデータを扱う場合、『JSON』を使ってよく表します。(他には、XMLやCSVという形式もあります。)

まずは、簡単なJSONデータを見ていきましょう。

{"name": "Japan"}

JSONの特徴として、{ }で括ってその中にデータを表記します。このJSONデータの場合だと、"name": "Japan"が中身のデータとなります。

この:を使って表しているのを『member』、コロンの左側を『key』、右側を『value』と呼びます。

今回の場合、memberは"name": "Japan"、keyはname、valueはJapanです。

keyの場合はダブルクォートをつけるだけですが、valueにはいくつか型があります。本コンテンツで扱うvalueを以下にまとめました。

型 例 説明
文字列 "Kyoto" ダブルクォートが必要
数値 7 ダブルクォートは不要
配列 ["Kyoto", "Shiga"] [ ]で括ってカンマで区切る
オブジェクト {"name": "Japan"} JSONの書き方と同じ
ブーリアン true true または falseを表記する

valueの種類

例として日本の地理データをJSON形式で表しながら、valueをどのように表現するのか確認していきましょう。

文字列と数値

上記のJSON例では、memberが1つだけでした。複数ある場合はどうなるのでしょうか？

{"name": "Japan","area": 378000}

このようにmemberを増やすだけです。ただし、区切りとしてカンマを使う必要があります。

また、読みやすいようにスペースと改行を使って整えることができます。

{
    "name": "Japan",
    "area": 378000
}

こちらのサイトを使用すると、自動で整えることができます。

"name": "Japan"のvalueは文字列なので、ダブルクォートをつける必要があります。

また、追加した"area": 378000のvalueは数値なので、文字列と異なりダブルクォートは不要です。

それぞれ、名前がJapanであること、面積が378,000km2であることを表しています。(便宜上、JSONデータでは単位を割愛しておりますが特に気にしないでください。)

配列

配列を使用することで、1つのkeyに対して複数のvalueを表すことができます。

{
    "name": "Japan",
    "area": 378000,
    "prefecture": ["Hokkaido", "Tokyo", "Osaka", "Okinawa"]
}

追加した"prefecture": ["Hokkaido", "Tokyo", "Osaka", "Okinawa"]のvalueが配列です。
書き方は[ ]で括り,で区切るだけです。

今回のように都道府県を1つのvalueにまとめて表すことができます。
※全都道府県を記載すると長くなるため4つだけにしています。また、並び順には特に意味はありません。

オブジェクト

次に、オブジェクトについて説明します。

{
    "name": "Japan",
    "area": 378000,
    "prefecture": ["Hokkaido", "Tokyo", "Osaka", "Okinawa"],
    "capital": {
        "name": "Tokyo",
        "area": 2188
    }
}

追加した"capital": {"name": "Tokyo","area": 2188}のvalueがオブジェクトで、JSONと同じ書き方をします。

オブジェクトを使用することで、複数のmemberを扱えます。

例えば、今回のように日本の地理データと合わせて首都の地理データを1つのJSONで表すことができます。

ブーリアン

ブーリアンは、true(真)かfalse(偽)の二通りしかありません。

{
    "name": "Japan",
    "area": 378000,
    "prefecture": ["Hokkaido", "Tokyo", "Osaka", "Okinawa"],
    "capital": {
        "name": "Tokyo",
        "area": 2188
    },
    "isPresident": false
}

追加したmemberの"isPresident": falseの値がブーリアンです。

大統領制かどうかのデータをブーリアンで表しています。日本は大統領制ではないためfalseになります。

true か false の2つしかない制約により、ブーリアンは条件分岐と結びつけやすくプログラミングでシンプルに扱うことができます。

JavaScriptでJSONを扱う

さて、JSONがどういったデータ形式なのかを確認できましたので、次にJavaScriptでの扱い方を学んでいきましょう。

今回も引き続きglitchを使っていきます。













let jsonData = {
    "name": "Japan",
    "area": 378000,
    "prefecture": ["Hokkaido", "Tokyo", "Osaka", "Okinawa"],
    "capital": {
        "name": "Tokyo",
        "area": 2188
    },
    "isPresident": false
}

console.log(jsonData);

このように変数に代入することができます。下記が出力結果となります。

{ name: 'Japan',
  area: 378000,
  prefecture: [ 'Hokkaido', 'Tokyo', 'Osaka', 'Okinawa' ],
  capital: { name: 'Tokyo', area: 2188 },
  isPresident: false }

出力結果を確認するとkeyのダブルクォートが外れていると思います。これは、JavaScriptのオブジェクトだとこのような書き方になるためです。また、valueのダブルクォートがシングルクォートになっていますが、これも特に気にする必要はありません。

次に、特定のvalueだけを抜き出してみましょう。最後のconsole.logのところを書き変えてください。

console.log(jsonData["prefecture"]);

keyを指定することで、そのkeyに対するvalueだけを抜き出すことができます。
書き方はシンプルで、変数名["key"]となります。今回は、prefectureを指定しています。

[ 'Hokkaido', 'Tokyo', 'Osaka', 'Okinawa' ]

実際、出力結果もprefectureに対するvalueとなっています。他のvalueを抜き出したい場合は、同様に指定するkeyを変更します。

では次に、配列の扱い方を確認しましょう。配列も任意のvalueを抜き出すことができます。

console.log(jsonData["prefecture"][2]);

配列の場合は、『インデックス』を指定します。
『インデックス』というのは、配列内のvalueの並び順で、左から『0,1,2 …』と数えていきます。『0』から始まるので注意してください。

この例では、『2』番目を指定しています。

Osaka

また、今回のように[ ]を連ねて書くことで、配列やオブジェクト内のvalueを抜き出すことができます。

オブジェクトの場合も確認しましょう。capitalのareaを抜き出してみます。

console.log(jsonData["capital"]["area"]);

同様に、["captial"]["area"]と順にkeyを指定します。

2188

以上で、JSONについての説明は終わりです。

これは少し中級者向けの話となりますが、以下がJSONが広く使われている理由となります。

  • 他のデータ形式と比べてシンプルで汎用性が高い
  • プログラミングで扱う際にkeyからデータの内容を把握しやすい例： jsonData["capital"]["area"] のように 首都 の 面積 を扱っているのが読み取れる
  • 配列やオブジェクトなど様々なデータの型を扱える

一言で簡単にまとめると、人と機械の両方にとって扱いやすいということです。

また、Pieceを作成する上で、1からJSONデータを作成する必要はなくサンプルのJSONデータを活用できます。

ご覧くださいましてありがとうございました。