非エンジニアのためのJSON入門

# 1.はじめに
毎年、4月になると新卒が入ってきますが、Web業界では非エンジニアでもjsonを使う事は多々あるので、この機会にまとめておこうと思う。

## 1-1.JSON（ジェイソン）とは
JSONは、`JavaScript Object Notation`の略です。直訳すると、「JavaScriptのオブジェクトの表記法」となります。

- JavaScript：プログラミング言語の1つ。JSとも言う
- Object：オブジェクト。エンジニア用語なので、非エンジニアさんは「もの（何かしらのデータのようなもの）」だと思っていただければOK
- Notation：表記法

後でも触れますが、JSON形式の文字列のサンプルはこちら。

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

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

```json
{
  "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サンプルを見てみましょう。

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

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