JSONは「データをやり取りするときのデータ構造の一つ」です。
例えばサーバから送られてきたJSONデータをクライアント側で処理して表示する、といった使われ方をされています。
ここでは「JSONって何？」「JSONとXMLの違いは？」「JSONの使い方が知りたい」といった方へ、JSONについて解説します。
JSONとは
JSONとは「JavaScript Object Notaion」の略で、直訳すると「JavaScriptオブジェクト記法」となります。ちょっとよくわからないと思いますが、要は「JavaScriptのオブジェクトの書き方をベースにしたデータ定義方法」です。JavaScriptではオブジェクトを作成する際に {} や [] といったカッコを使って書きますが、JSONはその記法をベースにしています。
元々はJavaScriptで使われる想定で作られたのでこのような名前になっていますが、現在はJavaScriptに囚われず、PythonやJava、PHPなど、幅広い言語で使われています。
なので、JavaScriptなどのクライアント言語とPythonなどのサーバーサイド言語間のデータのやり取りによく使われています。REST APIやAjaxでのデータ通信が代表的です。
JSONとXMLの違い
これまではデータのやり取りにはXMLが主に使われていましたが、最近ではJSONが主流となっています。
XMLはhtmlの記法をベースとしたデータ定義言語で、タグを使ってデータの構造を定義します。様々なデータ構造を記述できるのでCSVよりも複雑な構造を取り扱えましたが、その分人間にとって直感的には理解し難いのが難点でした。
[XMLの例]
<?xml version="1.0" encoding="utf-8"?>
<data>
<item>
<id>001</id>
<name>佐藤</name>
</item>
<item>
<id>002</id>
<name>鈴木</name>
</item>
</data>JSONはJavaScriptの記法で書かれているので、JavaScriptに慣れている人にとっては取っつきやすく、かつ同じ記法で書かれているので、例えばPythonから送ったJSONをJavaScriptの変数にそのまま代入するといったことが可能です。これがXMLだと一度XML構文を解析する処理を挟む必要があり、その分プログラムのパフォーマンスが低下してしまいます。
[JSONの例]
[
{"id" : "001", "name" : "佐藤"},
{"id" : "002", "name" : "鈴木"}
]JavaScriptはWeb開発に必須です。こういった環境の変化もJSONが主流になった要因の一つと言えるでしょう。
JSONの書き方
次にjsonの書き方を見ていきましょう。
基本の書き方
JSONは {} の中にダブルクォーテーション(“)で囲ったキーと値を、コロン(:)で区切って記述します。
キーは必ずダブルクォーテーションで囲む必要があります（シングルクォーテーションもダメ）
{“key” : “value”}カンマで区切ると複数記述できます。
{“key1” : “value1”, “key2” : “value2”}行数が多くなってくると読みにくくなってくるので、その場合は改行とインデントを使って見やすくすることも多いです。
{
“key1” : “value1”,
“key2” : “value2”,
“key3” : “value3”
}対応している型
JSONでは次のデータ型に対応しています。
- 文字列
- 数値
- null
- bool値
- オブジェクト
- 配列
文字列
文字列はダブルクォーテーション(“)、バックスラッシュ(\)以外の文字を使用できます。
{“name” : “sato”}数値
数値はダブルクォーテーションで囲みません。
{“id”, 100}null
nulは全て小文字で指定します。
{“nothing” : null}bool値
bool値の指定も可能です。こちらも数値と同じくダブルクォーテーションは必要ありません。
{“1” : true, “0” : false}オブジェクト
オブジェクトの中にオブジェクトを入れて、ネストさせることもできます。
複雑になりますが、jsonを本格的に扱うと大体このようにネストすることが多いです。
{
"id": 100,
"name": "sato",
"attribute": {
"gender": "1",
"phone": "0977736674",
"birthday": "19930715"
}
}配列
オブジェクトの場合は {} を使いましたが、配列を格納したい場合は [] を使います。
{
"id": 100,
"name": "sato",
"score": [
216,
179,
225,
223,
256
]
}JSON使い方
最後に、実際にJSONを使って、簡単にデータのやり取りをしてみましょう。
ここではjQueryのAjaxを使い、拡張子が「.json」のjsonファイルからデータを取得して表示します。
[index.html]
<!DOCTYPE html>
<div><span id="id_0"></span> : <span id="name_0"></span></div>
<div><span id="id_1"></span> : <span id="name_1"></span></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.ajax({
url: 'sample.json',
type: 'GET',
dataType: 'json',
})
.done(function(datas) {
for (i = 0; i < datas.length; i++) {
$("#id_" + i).text(datas[i]["id"]);
$("#name_" + i).text(datas[i]["name"]);
}
})
.fail(function(jqXHR, textStatus, errorThrown) {
})
</script>
[sample.json]
[
{"id" : "001", "name" : "佐藤"},
{"id" : "002", "name" : "鈴木"}
][出力結果]
まずはsample.jsonの中身から見ていきましょう。
sample.jsonには次のjsonデータが入っています。
[
{"id" : "001", "name" : "佐藤"},
{"id" : "002", "name" : "鈴木"}
]キーと値の組み合わせ（オブジェクト）の配列をJSONとして格納しています。Pythonだと辞書のリストですね。
JSONではこのようにキーと値の組み合わせでデータを格納します。
次にjavaScriptを見ていきましょう。今回はjQueryのAjaxを使っています。
$.ajax({
url: 'sample.json',
type: 'GET',
dataType: 'json',
})
.done(function(datas) {
for (i = 0; i < datas.length; i++) {
$("#id_" + i).text(datas[i]["id"]);
$("#name_" + i).text(datas[i]["name"]);
}
})urlにsample.jsonのパスを指定します。今回は同じディレクトリ配下にsample.jsonを配置していますが、ファイルの場所に応じて適宜変更してください。
dataTypeにはjsonを指定します。これでAjaxのレスポンスがjsonで取得できます。
返ってきたレスポンスはdatas変数の中に入っています。後は返却されたデータを繰り返し処理でtextに入れています。
この例のように、javaScriptではjsonで受け取ったデータは解析不要でそのまま使え、親和性の高さがうかがえます。
