• 1．JSONとは？
• 2．JSONを使うメリット
• 3．JSONの基本的な書き方
• 4．JSONが対応しているデータ型
• 5．JSONファイルの作り方・読み込み方法
• 6．JSONをよく使用するシーン・事例
• 7．JSON以外のフォーマット

Webアプリケーションを開発するうえで、最近目にするのが「JSON」という形式です。

JSONとは何なのか？いつ使うのか？といった疑問にお答えします。

1．JSONとは？

JSONは「JavaScript Object Notification」の略で、JavaScriptで値を取り扱うためのドキュメント規格です。

その名の通り、JavaScriptの動作においてJSONのオブジェクトは、Javaでいうところのインスタンスと同じように扱えます。

もともとはJavaScript上で値を取り扱うためのフォーマットでしたが、JavaScriptで値を扱ううえで便利に利用できることから、JavaScriptフロントエンドの普及に伴い、バックエンドと通信する際のフォーマットとして利用されはじめました。

今ではその利便性から、さまざまな場所でJSONが利用されています。

2．JSONを使うメリット

昨今のWeb開発において、JSONがどこでも使われるようになったのは、大きなメリットがあったからです。

ここでは、そのJSONがもつメリットを紹介します。

①テキストベースで軽い

古くから、ネットワーク通信のフォーマットといえば「XML」でした。

しかし、XMLはタグを利用するため同じ値を表現する場合でもテキストの総量が多くなり、通信量が増えてしまうという欠点がありました。

XMLと比較してJSONはテキスト量が少ないため、高速な通信を求められる場合には非常に有用です。

XMLの詳細については後述します。

② 解析しやすい

JSONは値と項目のペアで記載するため視覚的にも非常に確認しやすいのが特徴です。また、階層が深くなっても構造を追いやすいというメリットもあります。

③ JavaScriptとの相性が良い

JSONを利用する大きな理由のひとつとして、ReactやVue、Angularといったフロントエンド技術の浸透があります。これらのフロントエンドフレームワークはJavaScriptをベースとした言語で開発します。

前述のとおり、JSONはJavaScript上で扱いやすいフォーマットです。フロントエンド開発において、「通信におけるデータフォーマット」と「ブラウザ内でのデータ保持」の両方に適用できます。

つまり、サーバーからJSON形式でデータを受け取ってしまえば、そのデータをそのまま利用できるのです。

このように、フロントエンド開発においては手間が少ない形式であるということも、JSONの普及を後押ししています。

3．JSONの基本的な書き方

ここでは、JSONの基本的な書き方を紹介します。

①表記形式

JSONの最も基本的な例は、以下のような形です。

{
  "項目名1": 値1,
  "項目名2": 値2
  ・
　・
　・
}

JSONの書き方は非常にシンプルで、以下の4つのルールに従うだけです。

項目名と値のペアで記述する

JSONでは、項目名と値をペアで指定します。

また、項目名と値の区切りとして「:（コロン）」を利用します。

項目名は「”（ダブルクオーテーション）」で囲む

項目名は、”項目名”というようにダブルクオーテーションで囲みます。

’（シングルクオーテーション）は使えないため注意しましょう。

複数のペアを指定するときは「,（カンマ）」で区切る

複数のペアを指定したい場合には、ペアとペアの間に「,（カンマ）」を挿入します。

全体を{}（波カッコ） または[]（カギ角カッコ）で囲む

JSONのデータを記述する場合、全体を{}（波カッコ） または[]（カギ角カッコ）で囲みます。

オブジェクトの場合は波カッコ、配列の場合にはカギ角カッコを利用するのですが、この説明については後述します。

②サンプル

実際のデータが記載されたサンプルを見てみましょう。

この例では、ユーザーの一覧情報が記載されたJSONを紹介します。

{
  "total": 3,
  "users": [{
    "name": "佐藤太郎",
    "age": 22
  }, {
    "name": "高橋次郎",
    "age": 18,
  }, {
    "name": "田中三郎",
    "age": 21,
  }]
}

このデータでは3名のユーザー情報を保持しています。

ユーザーの情報としては、以下の情報が格納されています。

・name（名前）

・age（年齢）

これらのユーザー情報が、配列として「users」の項目に格納されており、実際に格納されているユーザー数が「total」に格納されています。

4．JSONが対応しているデータ型

JSONの項目として指定できるデータの型は決められています。

ここでは、JSONに利用できるデータの型をそれぞれ紹介していきます。

①文字列

文字列を表す場合、”（ダブルクオーテーション）で囲んで記載することで、文字列を表現します。

{
  "str": "文字列項目"
}

②数値

JSONでは、整数や浮動小数点数を含む数値を扱うことが可能です。文字列はダブルクオーテーションで囲んでいたのに対し、数値項目は囲まないことに注意しましょう。

{
  "int": 12,
  "float": 21.23
}

JavaScriptの仕様上、整数と小数点を含む数値は区別されません。

③Bool値

Bool値は、trueかfalseの2値で表されるデータ型です。

2値しかないため、フラグなどの表現に利用することが多いです。

{
  "flag": true
}

④null

nullは「何もない」を表します。

「項目はあるが値がない」という場合には、nullを指定します。

{
  "key": null
}

⑤オブジェクト

JSONのオブジェクトの項目として、JSONオブジェクトを入れ子で指定することが可能です。

JSONオブジェクトは{〜}を用いて表現し、その中に項目と値をペアにして記述します。

{
  "obj": {
    "key": "value",
    "num": 123
  } 
}

なお、値には別のオブジェクトを指定することで入れ子構造も表現できます。

{
  "key": "user1",
  "obj": {
    "max": 2
    "user1": {
      "name": "taro",
      "age": 1
    }, "child2": {
      "name": "jiro",
      "age": 2
    }
  }
}

⑥配列

配列は、オブジェクトと同様に連続したデータを格納します。

JSONオブジェクトは項目と値のペアなのに対し、配列は[]で囲んだ中に値を,（カンマ）区切りで記載していきます。

{
  "arr": [1, 2, 3, 4, 5]
}

配列の中には、文字や数字だけでなくJSONのオブジェクトを格納

することも可能です。

{
  "users": [{
    "name": "taro",
    "age": 16
  }, {
    "name": "jiro",
    "age": 10
  }]
}

5．JSONファイルの作り方・読み込み方法

プログラミング言語ごとに、JSONの扱い方を紹介します。

①JavaScript

JavaScriptでのJSONの取り扱いは非常に簡単です。

JSONオブジェクトまたはJSON配列を定義するだけで、JavaScriptはその情報をJSONオブジェクトとして認識します。

また、JSONオブジェクトを利用することで、文字列とJSONオブジェクトを相互に変換します。

// オブジェクトの文字列化
const obj = {
  "key": "value"
};
const str = JSON.stringify(obj);

// 文字列化したJSONを表示
console.log(str);

// 文字列のJSONオブジェクト化
jsonStr = '{"name": "taro", "age": 16}';
data = JSON.parse(jsonStr);

// JSONから変換したオブジェクトを出力
console.log(data);

②Python

PythonでJSONを扱う場合には、JSON APIを利用します。

import json

# オブジェクトのJSON文字列化
obj = {
  'name': 'taro',
  'age': 16
}
dumpStr = json.dumps(obj)

# 文字列化したJSONを表示
print(dumpStr)

# JSON文字列からオブジェクト化
jsonStr = '{"name": "taro", "age": 16}'
data = json.loads(jsonStr)

# JSONから変換したオブジェクトを出力
print(data)

③PHP

PHPは、JSONを取り扱うための機能を有しています。

json_decodeとjson_encodeを利用することで、それぞれ文字列とPHPオブジェクトを相互に変換します。

<?php

# オブジェクトを文字列化
$obj = [
  "name" => "taro",
  "age" => 16
];
$json_str = json_encode($obj);

# 文字列化したJSONを表示
echo $json_str;

# 文字列をオブジェクト化
$data = json_decode('{"name": "taro", "age": 16}', true);

# JSONから変換したオブジェクトを出力
print_r($data)

?>

④Java

JavaでJSONを扱う場合には、JSONを扱うライブラリを利用します。

Java向けのJSONライブラリはいくつか存在し、それらのライブラリによって記述方法が異なります。

以下のページでは、JSONライブラリである「Jackson」の使い方を紹介していますので、参考にしてみてください。

6．JSONをよく使用するシーン・事例

多くのメリットをもつJSONは、今やさまざまな場面で活用されています。

JSONがどのような場所で活用されているのかを紹介していきます。

①ユーザー生成データの一時保存

フロントエンド上で動作するJavaScriptでデータを保持する場合には、JSONの出番です。

JavaScript上ではJSONオブジェクトはインスタンスのように扱えます。よって、ユーザーが入力した情報や、保持する必要のあるデータを一時的に保管できるのです。

②システム間でのデータ転送

サーバーとクライアント間の通信や、サーバー間での連携を行う仕組みとして、「API」という概念が存在します。

その中でも、多くのサーバーが対応しているのが「REST API」です。

REST APIはJSON形式でデータを記載することで、データの受け渡しや転送を行います。

③アプリケーションのデータ構成

JSONは文字列として保存できることから、データの保存にも利用できます。

JSON形式でデータをローカルへ保存するだけでなく、NoSQLデータベースでは、 JSONの形式でデータを保存するものも存在します。

7．JSON以外のフォーマット

さいごに、通信の際によく利用されるJSON以外のフォーマットをふたつ紹介します。

1. フォームデータ
2. XML

①フォームデータ

フォームデータは、HTMLのフォームを送信するときに利用されるフォーマットです。

name=taro&age=16

のように、項目=値を&で繋げていって表現します。

②XML

XMLは「Extensible Markup Language」の略で、マークアップ言語として定義されているフォーマットです。

HTMLと同様に「タグ」を用いて項目を定義し、タグの中に値を記載します。

<?xml version=”1.0”?>
<form>
  <name>taro</name>
  <age>16</age>
</form>