LoginSignup
136
127

More than 5 years have passed since last update.

@shuntaro_tamura(田村 俊太郎)in株式会社シロク

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

Posted at

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

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

136
127
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
136
127