はじめに

以前、勉強がてらに Reactの環境開発に関する記事を投稿しました。React のプロジェクトを作成する際に、その設定ファイルとして package.json を作成しました。そこで、JSON 形式というものがどういったものなのか、勉強をしたいと思い、備忘録として本記事をまとめました。

JSON形式とは

JSON 形式とはどういったものなのかを紐解いていきます。

定義

まずは、JSON 形式の定義を理解していきましょう。

JSON (JavaScript Object Notation)は、軽量のデータ交換フォーマットです。人間にとって読み書きが容易で、マシンにとっても簡単にパースや生成を行なえる形式です。

参考文献『JSON』より引用

つまり、JSON 形式は情報を他のシステムやプログラムと簡単にやり取りするために利用され、シンプルで軽量にデータを管理することができます。また、テキストベースで可読性が高く、データを理解しやすくまとめることができます。

特徴

JSON の特徴として、モジュールやパッケージ、ライブラリなどのツールを利用することで、あらゆるプログラミング言語で扱えることが挙げられます。次に、その一例を示します。

言語	必要なツール
JavaScript	デフォルトで利用可能
Python	`json` モジュール
Ruby	`JSON` モジュール
Java	`org.json` パッケージ
C#	`Newtonsoft.Json` ライブラリ
PHP	`json_encode` / `json_decode` 関数
Swift	`Codable` プロトコル
Go	`encoding/json` パッケージ
C++	`jsoncpp` ライブラリ
Kotlin	標準ライブラリ

Python

また、JSON 形式は、MongoDB や CouchDB といったデータベースでも利用が可能です。

概念

オブジェクト

JSON 形式は JavaScript をベースに開発されたフォーマットであり、それと同様にオブジェクト(オブジェクト)を用いてデータを管理します。

値とキー

具体的な情報を示すものが値(value)であり、その識別子がキーです。

値は次のデータ型が利用できます。

データ型	例
数値	`0`, `10`, `3.14`
文字列	`"Hello, World!"`
真偽値	`true`, `false`
オブジェクト	`{"key1": 1, "key2": "value2"}` ( 後述 )
配列	`["apple", "banana", "orange"]`
空値	`null`

プログラムでは、キーによって、値を参照することができます。従って、全く同じ値は存在しても問題ありませんが、それをプログラム上で識別する各キーは一意の名称である必要があります。

メンバー

メンバーは、キーと値の組み合わせのことです。

全体的な構造

JSON 形式において、オブジェクトは単一あるいは複数のメンバーをまとめ、メンバーはキーと値によって構成されます。プログラムでは、キーを指定することで値にデータの読み書きができます。

オブジェクト
  L (キー1, 値1) <- メンバー1
  L (キー2, 値2) <- メンバー2
  L (キー3, 値3) <- メンバー3

構文

JSON 形式のファイルにおける基本的な構文をいくつか示します。

基本的な構文

オブジェクトは中括弧 { } で囲んで表す
キーの名称はダブルクォーテーション " " で囲んだ文字列で表す
キーと値はコロン : で区切る
メンバー間はカンマ , で区切る

参考文献『JSON』より引用

次に例を示します。

オブジェクトの例

{
    "key1" : 1, 
    "key2" : "value2", 
    "key3" : true, 
}

配列

配列を値としたいとき、大括弧(ブラケット) [] で囲みます。

参考文献『JSON』より引用

次に例を示します。

配列の例

{
    "key1" : [
        "apple",
        "orange",
        "banana"
    ]
}

オブジェクトのネスト

値をオブジェクトにすることで、ネスト(入れ子)構造をとることができます。次にその例を示します

オブジェクトのネスト

{
    "object": {
        "key1": 1,
        "key2": 2
    }
}

実装例

JSON の理解を深めるにあたり、いくつかの実装例を示します。

例1: オブジェクトの表現

次の情報をもつ JSON オブジェクトを作成してみます。

ユーザーに関する情報
- ユーザー名
- 年齢
- メールアドレス
住所
- 郵便番号
- 都道府県
- 市区町村

オブジェクトの表現

{
  "user": {
    "username": "JohnDoe",
    "age": 30,
    "email": "john@example.com"
  },
  "address": {
    "postalCode": "100-0001",
    "prefecture": "Tokyo",
    "city": "Chiyoda"
  }
}

例2: 配列の表現

複数の本に関する情報をもつ JSON 配列を作成してみます(全て架空の著書です)。

タイトル	著者	出版年
日本語で遊ぼう	田中太郎	1998
サルでもわかるPython	山田次郎	2016
ディープラーニング解体新書	鈴木三郎	2020

配列の表現

[
  {
    "title": "日本語で遊ぼう",
    "author": "田中太郎",
    "publishedYear": 1998
  },
  {
    "title": "サルでもわかるPython",
    "author": "山田次郎",
    "publishedYear": 2016
  },
  {
    "title": "ディープラーニング解体新書",
    "author": "鈴木三郎",
    "publishedYear": 2020
  }
]

例3: ネストの表現

次のような学校およびコースの情報をもつ school オブジェクトを作成してみます。

学校の情報

項目内容

学校名 A高等学校

場所東京

コース文系、理系
コースに関する情報

コース名科目

文系国語、歴史、政治、英語

理系数学、生物、化学、物理

ネストの表現

{
  "school": {
    "name": "A高等学校",
    "location": "東京",
    "course": [
      {
        "courseName": "文系",
        "subject": [
            "国語",
            "歴史",
            "政治",
            "英語"
        ]
      },
      {
        "courseName": "理系",
        "subject": [
            "数学",
            "生物",
            "化学",
            "物理"
        ]
      }
    ]
  }
}

おわりに

本記事では JSON 形式について、まとめました。React で作成する package.json の他にも、vsCode にある settings.json のように、しばしば JSON 形式を見かけることがあります。しかし、筆者はあまり理解していなかったので、今回の記事でおおまかなイメージが掴めて少し満足です。誰かの助けになれば幸いです。

参考文献

本記事を作成するにあたり、次のWebページを参考にさせていただきました。

日本語版

英語版