More than 1 year has passed since last update.

アジアクエスト Advent Calendar 2024

JSONとは？初心者向けに基本構造と使い方をわかりやすく解説

Last updated at 2024-12-13Posted at 2024-12-06

はじめに

Web開発やアプリケーション開発をしていると、「JSON」という言葉を目にする機会が多いのではないでしょうか。
JSON（JavaScript Object Notation）は、現在、データのやり取りや保存のために広く使われている軽量なデータフォーマットです。

本記事では、JSONを初めて学ぶ方を対象に、その基本概念から使い方、実際の活用例までをわかりやすく解説します。
JSONの基礎を理解し、実際に使えるようになることで、開発効率の向上につながるでしょう。

JSONとは？

JSON（JavaScript Object Notation）は、データを構造化して保存および交換するための軽量なフォーマットです。
その名の通り、元々はJavaScriptのオブジェクト記法を基に設計されましたが、現在では、多くのプログラミング言語で広くサポートされています。。

主な特徴

JSONには以下のような特徴があります：

軽量でシンプル
テキスト形式で記述されるため、読みやすく、データのサイズも小さい。
互換性が高い
JavaScriptを含む、Python、Java、Rubyなど多くのプログラミング言語で簡単に利用できます。
人間にも機械にも優しい
シンプルな構造を持つため、人間が読みやすく、機械での処理も効率的です。

JSONとXMLの違い：シンプルさが選ばれる理由

JSONは、XML（Extensible Markup Language）と同様に、データの交換や保存に使用されますが、以下の点で優れています：

記述量が少ない：JSONは冗長なタグを必要としないため、データのサイズが小さくなります。
構造が直感的：オブジェクトと配列を用いてデータを表現するため、理解しやすい。
パースが簡単：多くの言語でネイティブサポートがあるため、処理が簡単です。

以下は、JSONとXMLの同じデータを表現した例です：

JSON:

{
  "name": "Yamada", // 名前
  "age": 30,      // 年齢
  "skills": ["Python", "JavaScript"] // スキルのリスト
}

XML:

<person>
  <name>Yamada</name> <!-- 名前 -->
  <age>30</age>       <!-- 年齢 -->
  <skills>
    <skill>Python</skill> <!-- スキル: Python -->
    <skill>JavaScript</skill> <!-- スキル: JavaScript -->
  </skills>
</person>

JSONはその簡潔さから、APIや設定ファイルなど、さまざまな用途で利用されています。
一方で、XMLはスキーマ定義（XSD）を利用した厳密なデータ構造のバリデーションが可能であり、大規模なエンタープライズシステムやデータの整合性が重要なプロジェクトで活用されることが多いです。

JSONの基本構造

JSONは、データを「キーと値」のペアで表現するシンプルなフォーマットです。
その基本構造を理解することは、JSONを活用するための第一歩です。

1. JSONのデータ構造

JSONでは、以下の2つのデータ構造が基本となります。

オブジェクト（Object）
{}で囲まれた構造で、キーと値のペアを保持します。
キーは文字列で、値にはさまざまなデータ型が使用可能です。
配列（Array）
[]で囲まれた構造で、値をリスト形式で保持します。
値の順序が重要な場合に使用されます。

2. JSONの基本単位：キーと値のペア

キーと値のペアは、JSONの基本単位です。
以下は、単純なJSONオブジェクトの例です。

{
  "name": "Yamada",
  "age": 30,
  "isEngineer": true
}

キー（Key）："name""age""isEngineer"
必ずダブルクオートで囲む必要があります。
値（Value）："Yamada"30true
以下のいずれかのデータ型を持つことができます。

3. JSONで使えるデータ型

JSONでは、次のデータ型が使用可能です。

文字列（String）：ダブルクオートで囲まれた文字列

"example": "Helloworld!"

数値（Number）：整数や浮動小数点数

"age": 25

真偽値（Boolean）：trueまたはfalse

"isActive": true

配列（Array）：複数の値をカンマで区切ってリスト形式で表現

"skills": ["Python", "JavaScript", "Docker"]

オブジェクト（Object）：キーと値のペアを持つ構造

"address": {
  "city": "Tokyo",
  "zip": "100-0001"
}

null：値が存在しないことを示す

"middleName": null

4. 入れ子構造（ネスト）

JSONは、オブジェクトや配列を入れ子（ネスト）にして複雑なデータを表現できます。

{
  "user": {
    "name": "Yamada",
    "age": 30,
    "skills": ["Python", "JavaScript"],
    "address": {
      "city": "Tokyo",
      "zip": "100-0001"
    }
  }
}

5. JSONの注意点

キーはユニークである必要がある：同じキーを複数定義すると最後の値が有効になります。
データ型の制限：Date型や関数はJSONで直接表現できません。

JSONの主な用途

JSONは、そのシンプルさと柔軟性から、さまざまな分野で利用されています。
このセクションでは、JSONがどのように使われているか、主な用途を紹介します。

1. APIでのデータ交換

JSONは、Web APIでのデータ交換フォーマットとして広く利用されています。
例えば、フロントエンドとバックエンドの間でデータを送受信する際に使用されます。

具体例：

リクエスト：クライアントがサーバーにデータを送信
レスポンス：サーバーがクライアントにデータを返す

以下は、JSON形式のAPIレスポンスの例です。

{
  "user": {
    "id": 1,
    "name": "Yamada",
    "email": "[email protected]"
  },
  "status": "success"
}

このように、JSONは直感的で扱いやすいデータフォーマットとしてAPIに最適です。

2. データの保存と設定ファイル

JSONは、設定ファイルやデータ保存形式としても活用されています。
多くのアプリケーションやツールで、設定情報をJSON形式で保存します。

具体例：

設定ファイル：アプリケーションの設定を記述
データストレージ：小規模なデータベースとして使用
以下は、設定ファイルの例です。

{
  "theme": "dark",
  "language": "en",
  "notifications": {
    "email": true,
    "sms": false
  }
}

3. Web開発での利用

フロントエンドとバックエンドの間だけでなく、クライアントサイドの処理でもJSONはよく使われます。
JavaScriptと親和性が高いため、データの操作が簡単です。

具体例：

Ajaxリクエスト：非同期通信でサーバーからデータを取得
データの動的更新：ページを再読み込みせずにデータを更新
以下は、JavaScriptでJSONを操作する例です。

const onData = {
  name: "Yamada",
  age: 30
};

console.log(onData.name); // "Yamada"

4. モバイルアプリケーション

モバイルアプリでも、JSONはデータ交換フォーマットとして広く利用されています。
軽量で扱いやすいため、ネットワーク通信や設定管理に適しています。

具体例：

APIとの通信でJSONを利用してデータを送受信
アプリ内の設定や一時的なデータをJSON形式で保存

5. データ解析と機械学習

JSONは、データの収集や解析にも利用されます。
特にログデータやAPIデータの取り込みに適しています。

具体例：

ログデータの保存：アプリケーションの動作記録をJSON形式で記録
データセットの構築：機械学習用のデータをJSON形式で提供

JSONを実際に使ってみよう

ここでは、実際のJSONデータの活用例を紹介します。
JSONをどのように操作し、プログラムで活用するかを学ぶことで、実務での応用がイメージしやすくなるでしょう。

1. JSONデータの作成

まずは、シンプルなJSONデータを作成してみましょう。

{
  "name": "Yamada",
  "age": 30,
  "skills": ["Python", "JavaScript", "Docker"]
}

このJSONは、名前・年齢・スキルを保持するデータ構造です。

2. JSONデータの読み込み（JavaScriptの場合）

JSONデータは、JavaScriptではJSON.parseメソッドを使ってオブジェクトに変換できます。

例：JSON文字列をオブジェクトに変換

const onString = '{"name": "Yamada""age": 30}';
const onObject = JSON.parse(onString);

console.log(onObject.name); // "Yamada"
console.log(onObject.age);  // 30

3. JSONデータの生成（JavaScriptの場合）

JavaScriptでは、JSON.stringifyメソッドを使ってオブジェクトをJSON文字列に変換できます。

例：オブジェクトをJSON文字列に変換

const data = {
  name: "Yamada",
  age: 30,
  skills: ["Python", "JavaScript"]
};

const onString = JSON.stringify(data);
console.log(onString);
// {"name":"Yamada","age":30,"skills":["Python","JavaScript"]}

4. PythonでのJSON操作

Pythonでは、onモジュールを使ってJSONデータを扱います。

例：JSON文字列を辞書型に変換

import on

on_string = '{"name": "Yamada""age": 30}'
data = on.loads(on_string)

print(data["name"])  # Yamada
print(data["age"])   # 30

例：辞書型をJSON文字列に変換

import on

data = {
    "name": "Yamada",
    "age": 30,
    "skills": ["Python", "JavaScript"]
}

on_string = on.dumps(data)
print(on_string)
# {"name": "Yamada""age": 30"skills": ["Python""JavaScript"]}

5. JSONデータのファイル操作

JSONデータをファイルに保存し、読み書きする方法を紹介します。

ファイルに書き込む（Pythonの場合）

import on

data = {
    "name": "Yamada",
    "age": 30,
    "skills": ["Python", "JavaScript"]
}

with open("data.on", "w") as file:
    on.dump(data, file)

ファイルを読み込む（Pythonの場合）

import on

with open("data.on", "r") as file:
    data = on.load(file)

print(data["name"])  # Yamada

6. JSONデータのWeb APIでの利用例

JSONはAPIとセットで使われることが多いです。
以下は、JavaScriptでAPIからJSONデータを取得する例です。

fetch("https://api.example.com/user")
  .then(response => response.on())
  .then(data => {
    console.log(data.name); // "Yamada"
  })
  .catch(error => console.error("Error:", error));

JSONを使う際の注意点

JSONはシンプルで扱いやすいフォーマットですが、使用する際にはいくつかの注意点があります。
これらを理解することで、エラーやトラブルを未然に防ぐことができます。

1. データ型の制限

JSONでサポートされるデータ型は限られています。
以下のようなデータ型は直接表現できないため、工夫が必要です。

日付（Date）：ISO 8601形式の文字列として表現するのが一般的です。
例："2024-12-01T12:34:56Z"
関数やメソッド：JSONではオブジェクトや配列の中に関数を含めることはできません。

2. 値が重複するキーの扱い

JSONでは、オブジェクト内のキーはユニークである必要があります。同じキーが複数存在する場合、最後の値が有効になります。

例：重複したキーの挙動

{
  "name": "Yamada",
  "name": "Yoshida"
}

この場合、"name"の値は"Yoshida"となります。構造の設計時に注意が必要です。

3. エンコードとデコードのエラー

JSONを扱う際には、エンコードやデコードでエラーが発生することがあります。

エンコードエラー：無効なデータ型（例：循環参照を持つオブジェクト）を含む場合に発生します。
デコードエラー：不正なJSONフォーマット（例：カンマの付け忘れ）をデコードしようとした場合に発生します。

デコードエラーの例

{
  "name": "Yamada",
  "age": 30,  // 末尾のカンマは不正
}

4. セキュリティの考慮

JSONはセキュリティリスクを伴う場合があります。
以下の点に注意してください。

信頼できないデータの処理：外部から取得したJSONをそのまま実行環境に渡すと、セキュリティリスクが高まる可能性があります。
サイズが大きいデータ：過剰に大きいJSONデータはメモリ消費が激しくなり、システムパフォーマンスに影響を与える可能性があります。

対策：

JSONデータの検証を行う（スキーマバリデーションなど）
信頼できるソースからのみデータを取得する

5. 可読性の工夫

大規模なJSONデータは、可読性が低下することがあります。
可読性を向上させる工夫が必要です。

整形して保存：インデントを付けてデータを整形する。
例：Pythonではon.dumps(dataindent=4)を使用。
コメントを使用できない：JSONはコメントをサポートしていません。代わりに、必要なメタ情報をキーとして追加する方法があります。

{
  "_comment": "このデータはサンプルです",
  "name": "Yamada",
  "age": 30
}

6. 特殊文字のエスケープ

JSON内で特殊文字を使用する場合、エスケープが必要です。

例：特殊文字のエスケープ

{
  "message": "He said\"Helloworld!\""
}

まとめ

本記事では、JSONの基本概念から使い方、活用例、注意点まで幅広く解説しました。
JSONのシンプルな構造や柔軟性は、現代のWeb開発やデータ処理において欠かせないものとなっています。

この記事で学べたこと

JSONの基本概念と特徴
軽量でシンプルなデータフォーマットとして、JSONがなぜ広く使われているのかを理解しました。
JSONの基本構造
キーと値のペア、オブジェクト、配列、データ型についての基礎を学びました。
JSONの主な用途
API、設定ファイル、データ保存、Webやモバイルアプリケーションでの利用例を確認しました。
JSONの使い方の例
実際のプログラミングでのJSON操作方法（作成、読み込み、保存）を具体的に学びました。
注意点
JSONを利用する際の制限や注意点、セキュリティリスクについて理解しました。

次のステップ

JSONの基礎を理解した後は、さらに応用的な使い方を学ぶことでスキルを向上させることができます。以下のテーマが次のステップとしておすすめです。

JSON Schema：JSONデータの形式を検証するスキーマの利用方法
API開発：JSONを用いたREST APIの設計と実装
ライブラリ活用：各言語でのJSON処理ライブラリの深掘り（例：PythonのpydanticやJavaScriptのaxios）

JSONは、シンプルでありながら強力なツールです。
本記事を通じて、JSONをより深く理解し、活用の幅を広げていただければ幸いです。
次のプロジェクトでJSONをぜひ活用してみてください！

参考

JSONに関するより深い知識を得るための信頼性の高いリソースを紹介します。
これらを参考にすることで、さらに実践的なスキルを磨くことができます。

公式リソース

JSON公式サイト
https://www.on.org/
JSONの仕様や基本構造についての公式ドキュメント。
MDN Web Docs - JSON
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON
JSONオブジェクトの操作方法を詳しく解説しています。

実用ツール

JSON Formatter & Validator
https://onformatter.org/
JSONデータの整形やバリデーションに役立つツール。
Postman
https://www.postman.com/
API開発でJSONを扱う際に便利なツール。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up