今回はJSONを解説します。
JSONとは、JavaScript Object Notationの略で、・・・と解説し始めるとどんどん複雑になります。
解説は以降の章に任せるとして、ここではそういったデータ形式があるとだけお伝えしておきます。
一体何に使うのかと思った方も多いでしょうが、これが以外と大事なんですよ。
JSONとは何か？
JSONとは何かを平たくいうと、名前からも分かるとおりJavaScriptと仲良しのデータ形式とでも覚えればだいじょうぶでしょう。
さらにデータ形式って何？といいますと、要はデータの表現方式とでも思ってください。
JSON以外に、XMLもデータ形式の1つといえば分かりやすいでしょうか。
まずは実際に見てください。
{
"生徒 太郎": {
"生徒番号":1,
"国語":65,
"算数":70,
"理科":80,
"社会":50
},
"生徒 花子": {
"生徒番号":2,
"国語":80,
"算数":90,
"理科":100,
"社会":95
}
}
生徒太郎さんと生徒花子さんの、それぞれの属性（つまり生徒番号やテストの点数）をJSONで表現しました。
XMLとのちがい
仮にこのJSONをXMLで表現するとこうなります。
<students>
<student>
<生徒番号>1</生徒番号>
<生徒名>生徒 太郎</生徒名>
<国語>65</国語>
<算数>70</算数>
<理科>80</理科>
<社会>50</社会>
</student>
<student>
<生徒番号>2</生徒番号>
<生徒名>生徒 花子</生徒名>
<国語>65</国語>
<算数>70</算数>
<理科>80</理科>
<社会>50</社会>
</student>
</students>
XMLを見れば、何となくJSONの特徴が分かってきたのではないでしょうか？
XMLと比較して閉じタグが不要なのにもお気づきでしょう。JSONの方がかなり楽に書けますね。
結局何に使うのか(WebAPI)
JavaScriptとの親和性を生かし、さまざまな箇所で活用できます。
特に重要なのがWebAPIとのデータ交換でよく使われることです。
イマドキのWebAPIでは、受信するデータの形式はXMLやJSON、HTMLから選べます。
実際にWebAPIからJSONでデータを取得してみましょう。
京都市オープンデータポータルサイトには、各種データのリクエストURLがあります。
この参考例のURLをそのまま使います。
https://data.city.kyoto.lg.jp/API/action/datastore/search.json?resource_id=f14b57c2-48dd-4aa7-b754-a4f4ac340f2d&limit=20&offset=5&fields=name,address
このアドレスを、ブラウザのURL欄にそのまま貼り付けてください。以下のような長い文字列が表示されるはずです。
{"help":"Search a datastore table. :param resource_id: id or alias of the data that is going to be selected.","success":true,"result":{"resource_id":["f14b57c2-48dd-4aa7-b754-a4f4ac340f2d"],"limit":20,"total":"1737","records":[{"name":"\u6771\u90e8\u307e\u3061\u7f8e\u5316\u4e8b\u52d9\u6240","address":"\u4eac\u90fd\u5e02\u5de6\u4eac\u533a\u9ad8\u91ce\u897f\u958b\u753a34-3"},
（以下略）
めまいがしそうな長い文字列が表示されました。
人間への可読性を残したといわれているJSONデータですが、これではさすがに読めません。
そんな場合は、JSONを整形してくれるサイトがありますので活用しましょう。その名もJSON整形です。
先ほどの長い文字列をすべてコピーし、JSON整形を開き四角の枠に貼り付けて、「整形」ボタンをクリックしてください。
[実行結果]
{
help: Search a datastore table. :param resource_id: id or alias of the data that is going to be selected. (string)
,success: true (boolean)
,result: {
resource_id: [
f14b57c2-48dd-4aa7-b754-a4f4ac340f2d
]
,limit: 20 (number)
,total: 1737 (string)
,records: [
{
name: 東部まち美化事務所 (string)
,address: 京都市左京区高野西開町34-3 (string)
}
,{
name: 山科まち美化事務所 (string)
,address: 京都市山科区小野弓田町3 (string)
}
・
・
・
]
}
}
非常に見やすい形式に整形されました。
上部の複雑な部分はさておいて、records:以降を見てください。何となくイメージがつきませんか？
JSONの活用方法
結局何に使うのかなのですが、繰り返しになりますがJavaScriptとの親和性が高いことを活用します。
WebAPIから取得したJSONは、JavaScriptを使って簡単にHTML上に展開できます。ということは、毎回ページを開くたびにWebAPIから取得した新鮮なデータを、自分のページに展開できる、ということです。
今回は地味なデータをご紹介しましたが、これが株価やAmazon、楽天の購買データといったタイムリー性が求められるデータであれば、活用方法は無限です。
JSONの読み込み
本来であれば実際にWebAPIからデータを取得して・・・といきたいところですが、あまり派手な内容はJSONの解説としては不向きなので、前述した簡単な成績表を例に使いましょう。
WebAPIではなく、テキストファイルからのデータ読み込みをやってみましょう。
[再掲：成績表]
{
"生徒 太郎": {
"生徒番号":1,
"国語":65,
"算数":70,
"理科":80,
"社会":50
},
"生徒 花子": {
"生徒番号":2,
"国語":80,
"算数":90,
"理科":100,
"社会":95
}
}
これを、成績表.jsonとして保存したのち、以下を実行します。
require 'json'
File.open("成績表.json") do |file|
hash = JSON.load(file)
p hash
end
[実行結果]
{"生徒 太郎"=>{"生徒番号"=>1, "国語"=>65, "算数"=>70, "理科"=>80, "社会"=>50},
"生徒 花子"=>{"生徒番号"=>2, "国語"=>80, "算数"=>90, "理科"=>100, "社会"=>95}}
JSONの内容が、ハッシュとして取得できました。
JSONの書き出し
今度は逆に、JSON形式でファイルに書き出してみましょう。
require 'json'
File.open("成績表2.json", 'w') do |file|
hash = {"生徒 太郎"=>{"生徒番号"=>1, "国語"=>65, "算数"=>70, "理科"=>80, "社会"=>50}, "生徒 花子"=>{"生徒番号"=>2, "国語"=>80, "算数"=>90, "理科"=>100, "社会"=>95}}
str = JSON.dump(hash, file)
end
[実行結果(成績表2.jsonの中身)]
{"生徒 太郎":{"生徒番号":1,"国語":65,"算数":70,"理科":80,"社会":50},
"生徒 花子":{"生徒番号":2,"国語":80,"算数":90,"理科":100,"社会":95}}
JSON形式で書き出すことができました。
まとめ
今回は、JSONとは何かという点に重点を置いたので、解説は少なめになりました。
みなさんの作るWebサイトに、WebAPIから取得した何らかのデータをあつかうときなど、JSONは避けて通れないものです。
本記事の内容はとても基礎的なことですので、ぜひマスターしておいてくださいね！
