Zenn
🔥

Jsonを深めてみるっ

2023/03/05に公開
JSON
tech

JSON(JavaScript Object Notation)は、軽量のデータ交換フォーマットの一つです。JSONは、JavaScriptのオブジェクト表記法をベースにしたテキストベースのデータフォーマットで、データの記述がシンプルで読みやすいことが特徴です。

JSONは、Web APIやデータベース、クライアントとサーバー間の通信など、様々な場面で利用されています。また、JavaScript以外のプログラミング言語でも利用が可能であり、人気のあるデータ交換フォーマットの一つです。

【JSONの構造】

JSONは、以下のような構造を持っています。

{
  "key": "value",
  "key2": "value2",
  "key3": [
    "value3-1",
    "value3-2",
    "value3-3"
  ],
  "key4": {
    "nestedKey1": "nestedValue1",
    "nestedKey2": "nestedValue2"
  }
}

JSONは、オブジェクトの中にキーと値のペアを持ち、値には文字列、数値、真偽値、null、配列、または別のオブジェクトを持つことができます。キーは必ず文字列でなければならず、値は次のいずれかの型でなければなりません。
・文字列: "hello"
・数値: 42
・真偽値: true or false
・null: null
・配列: [1, 2, 3]
・オブジェクト: {"key": "value"}

【JSONのパース】

JSONは、JavaScriptのオブジェクト表記法に似た構文を持っていますが、ただの文字列として扱うことはできません。JSONを扱うためには、パース（解析）が必要です。

JavaScriptでは、JSONをパースするためのJSON.parse()メソッドが提供されています。このメソッドは、JSON文字列を受け取り、JavaScriptのオブジェクトに変換します。

例えば、以下のようなJSON文字列があった場合、

{
  "name": "John Doe",
  "age": 30,
  "isMarried": false,
  "hobbies": ["reading", "music", "swimming"],
  "address": {
    "city": "Tokyo",
    "country": "Japan"
  }
}

このJSON文字列をJavaScriptのオブジェクトに変換するには、以下のようにJSON.parse()メソッドを使用します。

const jsonStr = '{"name": "John Doe", "age": 30, "isMarried": false, "hobbies": ["reading", "music", "swimming"], "address": {"city":

JSONデータの利用方法

JSONデータはJavaScriptのオブジェクトとして扱うことができるため、JavaScriptで簡単にパースして利用することができます。JSON.parse()メソッドを使うことで、JSON文字列をJavaScriptオブジェクトに変換することができます。

const jsonStr = '{"name":"John", "age":30, "city":"New York"}';
const jsonObj = JSON.parse(jsonStr);
console.log(jsonObj.name); // "John"
console.log(jsonObj.age); // 30
console.log(jsonObj.city); // "New York"

JSON.stringify()メソッドを使うことで、JavaScriptオブジェクトをJSON文字列に変換することができます。

const jsonObj = {name: "John", age: 30, city: "New York"};
const jsonStr = JSON.stringify(jsonObj);
console.log(jsonStr); // '{"name":"John","age":30,"city":"New York"}'

また、サーバーからJSONデータを取得して利用することもできます。XMLHttpRequestやfetch APIを使ってJSONデータを取得し、JSON.parse()メソッドを使ってパースすることで、取得したデータを利用することができます。

fetch('https://example.com/data.json')
  .then(response => response.json())
  .then(data => console.log(data));

JSONの欠点

JSONは軽量で扱いやすいフォーマットである一方、以下のような欠点もあります。
・JSONはテキスト形式であるため、データサイズが大きくなるとパースやシリアル化の処理に時間がかかることがあります。
・JSONはJavaScriptオブジェクトのシンタックスに準拠しているため、他のプログラミング言語との相互運用性が低いことがあります。
・JSONはコメントをサポートしていないため、データの説明やドキュメンテーションに不向きなことがあります。
・JSONは構造がフラットであるため、複雑な階層構造を表現することができないことがあります。

まとめ

JSONは、軽量で扱いやすいデータフォーマットであり、現在のWeb開発において欠かせない存在です。JSONの基本的な構文や、JavaScriptでJSONデータを扱う方法を学びました。また、JSONの欠点についても理解することが重要です。JSONを適切に活用することで、Webアプリケーションの開発効率を向上させることができます。

参考

MDN Web Docs: https://developer.mozilla.org/ja/docs/Learn/JavaScript/Objects/JSON
JSON.org: https://www.json.org/json-en.html
Microsoft Docs: https://docs.microsoft.com/en-us/dotnet/standard/serialization/system-text-json-how-to
JavaScript.info: https://javascript.info/json

Discussion