地方エンジニアの日記

山口県でエンジニアをしています。元々都会の方で1年ほどWEB系のエンジニアをしていました。都会と比べると、学びの場を自分から作っていかないとなかなか難しいと感じています。

#006 JSONの基本

概要

JSONは普段から使っていますが、他の部分と相変わらず雰囲気で使っていました。

せっかくなので、JSONとは何か、基本は何かについてまとめました。

JSONとは

JavaScript Object Notation(JSON)は日本語に直訳すると、「JSのオブジェクト表記」 となり、HTMLや、CSSXMLなどのデータ記述言語の1つにあたります。XMLをご存知の方は、XMLをもっとシンプルにしたものと言えるでしょう。

特徴としては、

  • データが必要最小限なので、XMLより軽量

キーとバリューというセットで構成される単純な作りなので、情報量が必要最小限に抑えられます。それにより、XMLよりデータ量が軽くなります。

  • 作りが単純で読み書きが簡単

先ほどと理由は同じですが、キーとバリューのセットで記述しているので、データの関連が非常にみやすくなっています。

文法やデータ型は、JavaScriptをベースとしています。JavaScriptをベースとしていますが、JavaScriptとは完全に独立したものです。なので、あらゆる言語で利用することが可能です。

  • AJAXでよく使われる

後ほどJavaScriptでデータを取得してみようと思います。

JSONのデータ型

JSONにはデータ型が6つあります。数値、文字列、真偽値、null、配列、オブジェクトです。

以下、簡単な説明

  • 数値

124や12.5などintegerとfloatどちらも扱います。

  • 文字列

"文字列" シングルクォートも使えますが、基本的には、ダブルクォートが推奨されているようです。

  • 真偽値

true, falseです。

  • null

存在しないことを表すnullです。

  • 配列

順番のあるデータ構造です。

["math", "english", "sciense"]
  • オブジェクト(JSONの元)

順番ではなく、キーを持つデータ構造です。一番最後の値の後ろには、カンマはつけてはいけません。

{
    "name": "taro",
    "year": 23
}

JSONの書き方

JSONを扱う上で最低限覚えておいた方がいいのは、キーとバリューのセット構造であるという点だけです。

// data.json

{
    "people": [
        {
            "name": "hiro",
            "age": 12
        },
        {
            "name": "taro",
            "age": 6
        },
        {
            "name": "saburo",
            "age": 3
        }
    ]
}

キーとバリューのセットとは、上記のJSONで言えば、 peopleと配列

nameと実際の名前(hiroやtaro, saburo)

ageと実際の年齢(12, 6, 3)

という風に必ず値にはラベル(その値が何を指しているかの情報)がセットになります。

上記のことさえ覚えていれば、JSONとは何かという点については問題ないでしょう。

他にも、 ファイルの拡張子が、『.json』であること、MIMEタイプは、"Application/json"であることなども覚えているとよいと思います。

簡単なAJAX

Asynchronous JavaScript + XML(AJAX)とは、非同期にサーバーとデータのやりとりを行う手法のことです。XMLと書いていますが、JSONでもできますし、むしろJSONの方がよく使われています。

先ほどのdata.json(同じディレクトリにある想定です)を利用して、AJAXを行ってみます。XMLHttpRequestを利用して通信を行っています。この後、同じ内容のものをfetch APIを用いて行います。

<body>
    <ul id="learn_json"><li>Learn JSON!!</li></ul>

<script>
var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function () {
      if (this.readyState == 4 && this.status == 200) {
        // JSON形式でデータが渡ってくるので、配列、オブジェクト構造に変換する。
        var response = JSON.parse(xhttp.responseText);

        // peopleの中のそれぞれのデータからnameを取り出して、liを作る
        var name_list = "";
        for(var person of people) {
          name_list += "<li>" + person.name + "</li>";
        }

        document.getElementById("learn_json").innerHTML = name_list;
      }
    };
    xhttp.open("GET", "data.json", true);
    xhttp.send();
</script>
 </body>

以上です。 以下Fetch API verです。(JavaScript部分のみ)

 fetch('./data.json')
      .then(response => response.text())
      .then(text => {
        var name_list = "";
        for (var person of people) {
          name_list += "<li>" + person.name + "</li>";
        }
        document.getElementById("learn_json").innerHTML = name_list;
      });

中身を詳しく説明すると、それぞれのオブジェクトの説明が大変なので、簡単に。 fetchメソッドで、引数に対してデータを要求します。thenメソッドで、帰ってきたデータを取得して、テキストデータを取り出して、そのデータからnameを取得して表示しています。

感想

JSONは思っていたより非常にシンプルでした。ただ、この非常にシンプルな構造を作成するには、バックエンド側の設計が非常に重要になると思いました。特にDB設計、DBをシンプルになるように作成しておけば、オブジェクトの繋がりをJSONデータとしてフロントに渡すのは非常に簡単になるでしょうから。

参考