jsonとは？XMLとは？しっかりまとめたjson入門

こんにちはもきおです！☺️

jsonについて理解したい！データの送受信について理解したい。でもネットの情報は分散していてなかなかひとまとめになったページを見つけれず苦労している方も多いのでは？

ここではデータ形式の全体像を理解するため、広く、わかりやすくデータ形式の種類や歴史についてまとめています。

jsonとは

まずjson（JavaScript Object Notation）とは何か、正式名称に注目すると『JavaScript』とあります。これは

「JavaScriptのオブジェクト記法を用いたデータ交換フォーマット」のためです。

JavaScriptでオブジェクトを作成する構造をもとにしてjsonの記法ができました。元々はJavaScriptで使われる想定で作成されたデータ構造なので、JavaScriptと相性が良いです。

Python、PHP、JavaScript、C++、Javaなど他の様々な言語でサポートされています。なのでjsonで違うプログラミング言語間でのデータの受け渡しをするとスムーズにやり取りができます。共通のデータ記述形式です。

データフォーマットの歴史と種類

データの受け渡しは固定長→CSV→XML→jsonという流れでフォーマットが進化していきました。jsonは近年主流となってきましたが元はXMLというデータ構造でのデータの受け渡しが主流でした。XMLに代わりAJAX(非同期通信)やREST APIなどで使われるようになりました。

コード(変数名"code")	名前（変数名"name")	好きな物事(変数名"like")
123	mokio	fishing
111	motoki	chocolate

このデータを元にそれぞれのデータ形式の種類で表します。

固定長フォーマット

123mokio□fishing□□111motokichocolate

□は半角空白文字の事です。

固定長フォーマット(フラットフォーマット)各データが改行も無く並んでいます。OO番目〜OO番目がOOOである。という定義がされています。今回で言うと1~3番目がコード名、4~9番目は名前、10〜18番目が好きな物事、19番目から二人目のデータ。といった様に定義されています。

CSVフォーマット

123,mokio,fishing

111,motoki,chocolate

CSV（Character-Separated Valuesフォーマット）は各データがカンマで区切ってデータ分けが定義されています。

XMLフォーマット

<data name="人員管理">     <recode>         <code>123</code> <name>mokio</name> <like>fishing</like>     </recode>     <recode>         <code>111</code> <name>motoki</name> <like>chocolate</like>     </recode> </data>

XML(Extensible Markup Language)はHTMLの記法を元にしたデータ定義方法であり、データ定義言語と呼ばれています。HTMLの様に全データがタグに囲まれることにより意味を持ちます。タグの中にタグを入れてツリー構造で表すことができます。（XMLよりも前に使われていた）CSVよりも複雑な構造も扱えました。しかし直感的には読み取りづらかったのです。

Ajaxとは

Asynchronous JavaScript, XMLの頭文字です。
Asynchronousとは「非同期で」という意味です。同期は画面の更新という意味なので、非同期通信とはページ遷移を必要としない通信のことを指します。

そしてJavaScriptとXMLを使って非同期にサーバとの間の通信を行います。
同期通信では一度ページ全てを新しく読み込んでページが表示されるため、非同期通信の方が可読性が高まります

非同期通信の一例として『Google マップ』が挙げられます。Google マップはページを更新しなくても地図をスライドさせると新しい地域がそのページのまま読み込まれますよね。

JSONフォーマット

[     {"code":111, "name":"mokio", "like":"fishing" },     {"code":123, "name":"motoki", "like":"chocolate" } ]

json（JavaScript Object Notation）はXMLよりコードも見やすく、XMLより少ないコード量で記述できます。ツリー構造でデータを表すことができます。javaScriptのオブジェクト記法をもとにしたのがjsonフォーマットです。

jsonの基本の書き方

・シングルクォートで挟むことはできません。

・変数名はなからずダブルクォートで囲みます。

・文字列はバックスラッシュ(\)とダブルクォート(")だけ使えません。

・数値、null、bool値はダブルクォートで挟みません。（挟むと文字列扱いになってしまう）

・nullは全て小文字で記入します。

jsonが対応するデータ型

・文字列

・数値

・null

・真偽値（bool値）

・オブジェクト

・配列

文字列

文字列はバックスラッシュ(\)とダブルクォート(“)だけ使えません。

{"name" : "hello"}

数値

数値はダブルクォートで囲めません。ダブルクォートで囲むと文字列になってしまいます。

{"id", 1}

null

nullは全て小文字で指定します。

{"id" : null}

真偽値（bool値）

bool値（trueとfalse）も扱えます。ダブルクォートで囲いません。

{"a" : true, "b" : false}

オブジェクト

オブジェクトを {...} で指定します。

{ "id": 123, "name": "mokio" }

配列

オブジェクトの場合は {} だが、配列を使う場合は [] を使用します。文字列、数値、ヌル値、真偽値、オブジェクト、配列すべてを使用することができます。
配列内の要素はカンマで区切ることで複数入力できます。

{     "id": 1,     "name": "tanaka",     "result": [         87,         83,         71,         59,         91     ] }

オブジェクトと配列の違いについて

オブジェクト

{     "id": 123,     "name": "mokio",     "like": "fishing" }

オブジェクトは、単一のアイテムの様々なプロパティのグループ化を含むために使用します。

配列

{     "like" : [ "fishing", "programming", "handmade" ] }

JSON配列では、同様のアイテムのグループ化をするために使用します。

ネスト構造について

オブジェクトの中にオブジェクト、配列の中に配列など、入子構造にコードを組むことができます。これをネスト構造（入れ子構造）といいます。

オブジェクトのネスト構造

{     "id": 123,     "name": "mokio",     "like": "fishing" },  {     "id": 111,     "name": "motoki",     "like": "chocolate" }

配列のネスト構造

{     "like" : [ [ "hoikushi", "programming" ], [ "fishing", "handmade"] ] }

※もっと複雑に分けたい場合、配列の中にオブジェクトを入れたりすることもできます。（ネスト構造が増えれば増える分見難さは増す）

まとめ

データの受け渡しは固定長→CSV→XML→jsonという流れでフォーマットが進化していきました。jsonの記法はJavaScriptを基になっていて、他の様々な言語でサポートされています。なのでjsonで違うプログラミング言語間でのデータの受け渡しをするとスムーズにやり取りができます。つまりjsonとは共通のデータ記述形式です。