1.はじめに
毎年、4月になると新卒が入ってきますが、Web業界では非エンジニアでもjsonを使う事は多々あるので、この機会にまとめておこうと思う。
1-1.JSON(ジェイソン)とは
JSONは、JavaScript Object Notation
の略です。直訳すると、「JavaScriptのオブジェクトの表記法」となります。
- JavaScript:プログラミング言語の1つ。JSとも言う
- Object:オブジェクト。エンジニア用語なので、非エンジニアさんは「もの(何かしらのデータのようなもの)」だと思っていただければOK
- Notation:表記法
後でも触れますが、JSON形式の文字列のサンプルはこちら。
{
"productId": 1,
"productName": "A green door",
"price": 12.50,
"tags": [ "home", "green" ]
}
(参考)
▼JSONのHP
http://json-schema.org/
▼JSONサンプル
http://json-schema.org/learn/getting-started-step-by-step.html#intro
1-2.JSONの特徴
JSONは、エンジニアからすれば慣れ親しんだ表記法ですが、非エンジニアからすると難しく感じられます。ここでは簡単にJSONの特徴を書いておくので、頭の片隅にでもおいてもらえたらと思います。
- 世で広く使われているデータの表記法
- 人間にとって読みやすい(平易なテキストデータである)
- 軽量(
XML
と違ってデータ量が軽い)-
XML
:XMLもJSONのようなデータの記述法であり、重め
-
- プログラムに容易に組み込める(形式がJSのオブジェクトと全く同じ形式)
- ほとんどのプログラミング言語でJSONをサポートしている(異なる言語でもJSONでやり取りできる)
- JSONファイルの拡張子は
.json
2.JSONの書き方
2-1.全体の記述方法
JSONの記述方法のルールは、
-
{}
(波括弧)で囲む - それぞれのデータは、キー(key)と値(value)のペアにする必要がある
- keyとvalueは
:
(コロン)で区切る
- keyとvalueは
- それぞれのデータを
,
(カンマ)で区切る - keyは文字列、valueは様々なデータ型で記述可能
- 文字列は必ず
""
(ダブルクオーテーション)で囲む
- 文字列は必ず
である。改めてサンプルを見ると、
{
"productId": 1,
"productName": "A green door",
"price": 12.50,
"tags": [ "home", "green" ]
}
{
で始まり}
で終わっている。
productId
というkeyに対応するvalueが1
である。
productName
というkeyに対応するvalueがA green door
である。
全てのkeyとvalueは:
で区切られている。
key/valueの組み合わせは,
で区切られている。
keyはすべて"
で囲まれた文字列となっている。
valueには色んなデータの型が許容されていそう。
といったことが、なんとなくお分かりいただけると幸いです。
2-2.値(value)で利用可能なデータの種類
値(value)で利用可能なデータの種類は6つあります。それは、「文字列、数値、真偽値、配列、オブジェクト、Null値」です。
2-2-1.文字列
文字列は、必ず""
(ダブルクオーテーション)で囲みます。
ただし、'
(シングルクオーテーション)による代用は不可。
- 例 →
"あああああ"
,"http:\/\/hogehoge.com"
2-2-2.数値
「整数」または「実数」をそのまま表現可能です。
- 例 →
1001
,3.14
2-2-3.真偽値
真偽値はBoolean
とも言います。true
, false
のいずれかの値を取ります。
2-2-4.配列
配列は必ず[]
(角括弧)で囲みます。
配列内のデータは必ず,
(カンマ)で区切り、データはどんな型(文字列、数値、真偽値、配列、オブジェクト、Null値)のものでも入れることができます。
- 例 →
["milk", "bread", "eggs"]
,[1, "hoge", true, "fuga"]
2-2-5.オブジェクト
オブジェクトは、{}
で囲みます。また、キー(key)と値(value)のペアにする必要があり、それぞれのデータは,
(カンマ)で区切ります。
JSON自体がオブジェクト(JavaScript Object
Notation)であり、JSONの記述方法と同様のルールで表現します。
- 例 →
{ "productId": 1, "productName": "A green door", "price": 12.50, "tags": [ "home", "green" ] }
2-2-6.Null値
Null値は、何もない(空データ)を表します。小文字のnull
で表記します。
(おまけ)文字列のエスケープについて
「特殊文字」は「エスケープ」する必要があります(ここはわからなければ一旦飛ばしてOK)。
どういう事かと言うと、例えば、文字列として"
(ダブルクオーテーション)を表現したい場合、"""
と書いてしまうと、文字列を判別するための"
なのか文字列そのものとしての"
なのかわからなくなってしまいます。こういう時に、特殊文字("
など)を表現できるようにする表記方法をエスケープ
と言います。
エスケープが必要な文字と、その表現方法で主なものは下記になります。
エスケープ表記 | 元の文字 | 説明 |
---|---|---|
\" |
" | ダブルクォーテーション |
\\ |
\ | バックスラッシュ |
\/ |
/ | スラッシュ |
\n |
改行 | |
\t |
タブ |
エスケープした文字列の例は、"http:\/\/hogehoge.com"
, "<img src=\"image01.jpg\"\/>"
などです。
(参考)
▼JSON でのエスケープ処理
https://www.ipentec.com/document/json-character-escape
3.便利ツール、その他
3-1.JSONの整形、バリデーションチェック
JSONは、階層が深くなったり、データ量が多くなると、記述方法を間違えやすいです。そういった時に、
- 見た目を見やすくする(整形する)
- 記述方法に誤りがないかチェックする(バリデーションチェック)
が簡単にできるととても便利です。そんな便利ツールがあるので紹介します。
▼JSONLint - The JSON Validator
https://jsonlint.com/
▼JSON Pretty Linter - JSONの整形と構文チェック
https://lab.syncer.jp/Tool/JSON-Viewer/
あと、余談ですが、僕は新卒時代に【魚をもらうのではなく、釣り方を教えてもらえ】という言葉を、上司からかけてもらったことがあります。
社会人になるとわからないことが無限に出てきますが、「ググり力(Google検索で調べる力)」が養われると、多くのことは調べれば解決できるようになります。
今回の例でいうと、「バリデーション」や「整形」などの用語を覚えておくと、後から検索しやすいのでオススメです。「JSON 整形」で検索すれば、上記リンクもすぐに見つかります。
3-2.ありがちなJSON記述ミスランキングTOP3
これは完全に個人の経験則であり、特に非エンジニアが陥りやすい記述ミスを取り上げています。
- 1位:カッコの数や位置がおかしい。
{
と}
の整合性が取れていない - 2位:カンマが抜けているorカンマが余分
- 3位:「"」が「”」などに変換されている
防ぐ方法
- json整形サービス使って確かめる(整形されていないと、
{
と}
の整合性が取れていないことに気付きにくい) - インデント揃える(インデントもjson整形ツール使えば一瞬で整う)
-
”
で検索して探す(これはエバーノート保存すると自動変換されがち)
3-3.その他おまけ
jsonの記述方法についていくつか補足。
- カンマ区切りのデータは、順番変えてもOK
- あくまで「keyとvalueの組み合わせ」が大事で、順番は関係ない
- key/valueの値の外側では、「半角スペース」や「改行」を入れても問題ない
- key文字列やvalue値の中で半角スペースなど入れたら意味が変わるので注意
- 「半角スペース」は入れても良いが、「全角スペース」は入れたらダメ
上記を理解した上で、改めてJSONサンプルを見てみましょう。
{
"productId": 1,
"productName": "An ice sculpture",
"price": 12.50,
"tags": [ "cold", "ice" ],
"dimensions": {
"length": 7.0,
"width": 12.0,
"height": 9.5
},
"warehouseLocation": {
"latitude": -78.75,
"longitude": 20.4
}
}
値(value)のところに注目すると、
-
productId
というkeyに対応するvalueは、1
(数値) -
productName
というkeyに対応するvalueは、"An ice sculpture"
(文字列) -
price
というkeyに対応するvalueは、12.50
(数値) -
tags
というkeyに対応するvalueは、[ "cold", "ice" ]
(配列) -
dimensions
というkeyに対応するvalueは、{ "length": 7.0, "width": 12.0, "height": 9.5 }
(オブジェクト) -
warehouseLocation
というkeyに対応するvalueは、{ "latitude": -78.75, "longitude": 20.4 }
(オブジェクト)
以上です。
本記事を読んで、少しでも誰かの理解の助けになっていたら嬉しいです。