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は様々なデータ型で記述可能
- 文字列は必ず""（ダブルクオーテーション）で囲む

である。改めてサンプルを見ると、

{
  "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 }（オブジェクト）

以上です。
本記事を読んで、少しでも誰かの理解の助けになっていたら嬉しいです。