はじめに
JSONはJavaScript Object Notationの略で、データ構造を表すための言語のひとつです。もとはJavaScriptの記法ながら、最近では様々な言語のデータ表現として広く使われるようになってきており、Visual studio Code（以下VS Code）などでは設定ファイルとしても使われています。今回はこのJSONの良さと、記法についての基礎を学んでいきたいと思います。
レッスン１．なぜJSONを使うのか
異なるモジュール間のデータのやり取りをする際、通信のためのデータの仕様を決める必要があります。わかりやすく言うと、日本人とアメリカ人が話そうと思ったら、共通の言語として「英語」を使おうといったコミュニケーション方法を決める必要があるわけです。このコミュニケーション方法にあたるのがJSONです。JSONは言語を問わず、一定のルールに従ってデータを表現しますので、異なるプログラミング言語を用いたモジュール間でも、データのやり取りを容易にすることができます。また、JSONは広く普及しているため、外部のモジュールと組み合わせて使う場合にもJSONに対応しているものを選べば、通信ドライバの作り込みにかけるコストが下がり、独自の通信コマンドを採用するより工数をかけずに導入することができます。
このように、データのやり取りをJSONにすることで得られる大きなメリットがあります。
レッスン２．JSONの用途
ここで、JSONの代表的な用途を紹介したいと思います。
- Webページ
もともとJavaScriptの主な用途がWebであることから、Webページに活用されているケースが最も多いです。 - 設定データ
VS Code等のアプリケーションで、ユーザ設定を保存するためのデータとして使われています。 - Lottie
これも厳密にいえばWebに関連した用途なのですが、Lottieというライブラリに用いられています。Webでアニメーションを表現するためのライブラリで、JSONで出力したデータを使ってアニメーションを表示できる、比較的新しい技術です。
また、JavaScript以外にもPythonやJava、C++等の多くの言語でサポートされているため、活用できる場面は多く存在します。
レッスン３．言語仕様の基礎
では、JSONの実際の言語仕様を見てみましょう。
JSON専用のエディタもありますが、エディタとしてのおすすめはVS Codeです。理由は、エラーチェック及び、シンタックスハイライト機能と、ドキュメントフォーマット機能が便利であるためです。尚、VS CodeはJSONをネイティブ対応しているため、これらの機能を特にプラグイン等を入れることなく使えます。
ドキュメントフォーマット機能は、インデントや改行などを自動で行ってくれる機能で、JSONコードを記述した後に、ファイルを右クリックして「ドキュメントのフォーマット」を選択すると、自動整形が行われます。便利な機能ですので、ぜひ活用してみてください。
では、ここからは言語仕様について、アイテム別にコードを交えた説明になります。
変数と型
まずは変数です。JSONではブロックを中括弧で括り、値を“：”で区切って表現します。下記は数値や文字列、未設定値としてNull、そしてBoolean値を扱う例を表現しています。
変数名及び、文字列はダブルクォーテーションで括ります。それ以外の数値、Null、Booleanはそのまま記述します。
コード
{
"Number": 1 ,
"Name": "Taro" ,
"Address": null ,
"Attend" : true
}
配列
変数値として配列を扱うこともできます。要素には先ほど説明した型をどれでも使うことができます。
コード
{
"Number": [1, 2, 3] ,
"Name": ["Taro", "Hanako"]
}
階層
データの階層は、変数をネストすることで表現ができます。一般的な構造体と同じような仕組みを再現することができます。階層化することで、データの構造が分かりやすくなります。
コード
{
"Taro": {
"age": 40,
"attend": true
},
"Hanako": {
"age": 35,
"attend": false
},
"Ichiro": {
"age": 30,
"attend": false
}
}
ネストはどのような深さでも可能です。
{
"Taro": {
"age": 40,
"attend": true,
"family": {
"Sakura": {
"age": 38,
"attend": false
},
"Taichi": {
"age": 5,
"attend": false
}
}
},
"Hanako": {
"age": 35,
"attend": false
},
"Ichiro": {
"age": 30,
"attend": false
}
}
データの参照方法
ここでは、JavaScriptを例にとってデータの参照方法を見てみましょう。下記はJSONのフォーマットにしたデータを読み出して表示するサンプルです。Taroさんの家族であるSakuraさんの年齢を取り出してみましょう。
コード
let data = {
"Taro": {
"age": 40,
"attend": true,
"family": {
"Sakura": {
"age": 38,
"attend": false
},
"Taichi": {
"age": 5,
"attend": false
}
}
},
"Hanako": {
"age": 35,
"attend": false
},
"Ichiro": {
"age": 30,
"attend": false
}
};
console.log( data["Taro"].family["Sakura"].age );
ここで、参照が行われているコードは最後の一行で
console.log( data[“Taro”].family[“Sakura”].age );
の部分になります。階層はドットで繋いで表現します。
取り出し方の例を見るとわかるように、JSONで階層化されているので、参照は非常に分かりやすくなっていることが分かります。
JavaScriptの実行環境がない方は、オンラインの実行環境もありますので、そちらを利用してみてください
https://paiza.io/projects/2Dq-Y5IKv93FOoEIm0Lj5g?locale=ja-jp
おわりに
今回はJSONについて学んできました。冒頭で紹介したように、JSONはWeb以外でも、アプリケーションのバックアップデータとして使われることもあり、現在は多くの用途で使われています。そのため、このデータ構造を理解しておけば、役立つことも多いと思います。文法もシンプルですので、この際にしっかりとモノにしておきましょう。最後までお読みいただき、ありがとうございました。
