JavaScriptのJSONとオブジェクトの違いをわかりやすく解説！初心者でも理解できるJSON操作入門

1. JSONとは何か？

1. JSONとは何か？

JSON（JavaScript Object Notation）は、データを文字列で表現するための形式です。読みやすく、他のプログラミング言語でも扱いやすいという特徴があります。例えば、サーバーからデータを受け取るときや保存するときに使われます。

const jsonString = '{"name":"太郎","age":20}';
console.log(jsonString);

{"name":"太郎","age":20}

2. JavaScriptのオブジェクトとは？

2. JavaScriptのオブジェクトとは？

オブジェクトは、JavaScriptで使うデータの集合体です。プロパティと呼ばれる名前と値の組み合わせで構成されています。オブジェクトはプログラム内で直接操作できます。

const user = {
  name: "太郎",
  age: 20
};
console.log(user.name);

太郎

3. JSONとオブジェクトの見た目の違い

3. JSONとオブジェクトの見た目の違い

JSONは文字列なので、ダブルクオートで囲まれた文字列として存在します。オブジェクトは{}で囲まれたデータ構造として存在します。

// JSON
const jsonString = '{"name":"花子","age":25}';

// オブジェクト
const obj = {name: "花子", age: 25};

4. JSONをオブジェクトに変換する方法

4. JSONをオブジェクトに変換する方法

JSONは文字列なので、そのままではJavaScriptで操作できません。JSON.parse()を使うとオブジェクトに変換できます。

const jsonString = '{"name":"次郎","age":30}';
const obj = JSON.parse(jsonString);
console.log(obj.age);

30

5. オブジェクトをJSONに変換する方法

5. オブジェクトをJSONに変換する方法

逆に、オブジェクトをJSONに変換するにはJSON.stringify()を使います。これで文字列としてサーバーに送信できます。

const user = {name: "三郎", age: 28};
const jsonString = JSON.stringify(user);
console.log(jsonString);

{"name":"三郎","age":28}

6. JSONとオブジェクトの用途の違い

6. JSONとオブジェクトの用途の違い

JSONはデータの保存や通信に使います。オブジェクトはJavaScriptのプログラム内で操作するために使います。例えば、サーバーから取得したJSONをオブジェクトに変換して操作し、再びJSONに変換して送信します。

const jsonFromServer = '{"score":100,"level":5}';
const gameData = JSON.parse(jsonFromServer);
gameData.level = 6; // オブジェクトとして操作
const updatedJson = JSON.stringify(gameData);
console.log(updatedJson);

{"score":100,"level":6}

7. JSONの注意点と基本ルール

7. JSONの注意点と基本ルール

JSONにはいくつかのルールがあります。プロパティ名は必ずダブルクオートで囲むこと、文字列もダブルクオートで囲むこと、関数やundefinedはJSONにできないことなどです。これらを守らないとエラーになります。

// NG例
const invalidJson = '{"name":太郎,"age":20}'; // 太郎がクオートで囲まれていない

8. 実際の利用例：JSONでデータをやり取りする

8. 実際の利用例：JSONでデータをやり取りする

例えば、Webアプリでユーザー情報をサーバーに送る場合、オブジェクトをJSONに変換して送信します。

const user = {name: "四郎", age: 32};
fetch("/api/user", {
  method: "POST",
  headers: {"Content-Type": "application/json"},
  body: JSON.stringify(user)
});

このように、JSONはオブジェクトを文字列化して通信や保存に活用できるのです。

9. まとめに近い理解のコツ

9. まとめに近い理解のコツ

ポイントは3つです。JSONは「文字列のデータ」、オブジェクトは「プログラム内で操作できるデータ」、そしてJSON.parse()とJSON.stringify()で相互に変換できることです。この理解があると、JavaScriptでデータ操作やサーバー通信がスムーズになります。

まとめ

まとめ

JavaScriptにおけるJSONとオブジェクトの違いを理解することは、Web開発やサーバー通信を行う上で非常に重要です。JSONは文字列としてデータを表現するため、サーバーとのデータのやり取りやデータ保存に向いています。一方、オブジェクトはJavaScriptのプログラム内で直接操作できる生きたデータ構造であり、プロパティや値の追加・変更・削除が容易に行えます。

JSONとオブジェクトはそれぞれ用途が異なりますが、JSON.parse()でJSON文字列をオブジェクトに変換し、JSON.stringify()でオブジェクトをJSON文字列に変換することで相互に利用できます。これにより、サーバーから取得したデータを操作したり、ユーザーの入力情報をサーバーに送信したりすることが可能になります。

また、JSONには守るべき基本ルールがあります。プロパティ名と文字列は必ずダブルクオートで囲み、関数やundefinedなどはJSON化できません。これを意識することで、エラーなく安全にデータのやり取りを行うことができます。

実際にWebアプリでJSONを使う場合、オブジェクトをJSONに変換してサーバーに送信し、サーバーから返ってきたJSONをオブジェクトに変換して操作するという流れが一般的です。これを理解することで、フロントエンドとバックエンド間のデータ通信をスムーズに設計することが可能です。

サンプルコード：JSONとオブジェクトの変換

 // JSON文字列をオブジェクトに変換 const jsonString = '{"name":"五郎","age":40}'; const userObj = JSON.parse(jsonString); console.log(userObj.name); // 五郎
// オブジェクトをJSON文字列に変換
const updatedUser = {name: "六郎", age: 35};
const updatedJson = JSON.stringify(updatedUser);
console.log(updatedJson); // {"name":"六郎","age":35}

五郎
{"name":"六郎","age":35}