JavaScriptのJSONとは？stringify・parseの使い方を解説

PR JavaScript

JavaScriptのJSONとは？stringify・parseの使い方を解説

💡 この記事でわかること

  • JSONとは何か
  • JSONの記法ルール(オブジェクトとの違い)
  • JSON.stringifyでオブジェクトを文字列に変換する方法
  • JSON.parseで文字列をオブジェクトに戻す方法
  • localStorageなど実践での使いどころ

1. JSONとは？

JSON(JavaScript Object Notation)とは、
👉 データを「文字列」としてやり取りするための、世界共通の書き方のルールのことです。

💡 名前にJavaScriptと入っていますが、JSON自体はJavaScript専用のものではなく、Python・PHP・Javaなど、ほとんどのプログラミング言語で読み書きできる共通フォーマットです。そのため、サーバーとブラウザの間でデータをやり取りするAPI通信などで広く使われています。

{
  "name": "田中",
  "age": 25,
  "hobbies": ["読書", "旅行"]
}

👉 見た目はJavaScriptのオブジェクトとそっくりですが、JSONは「文字列」であって、そのままではJavaScriptのコードとして動かせない点が大きな違いです。

👉 JavaScriptのオブジェクトについての記事はこちら

2. JSONの記法ルール

JSONにはJavaScriptのオブジェクトと違って、守らないといけない細かいルールがあります。

  • キー(プロパティ名)は必ずダブルクォート「"」で囲む(シングルクォート不可)
  • 文字列の値もダブルクォートで囲む
  • 最後の要素の後ろに余分なカンマ(,)は付けられない
  • 関数・undefined・コメントは書けない

💡 「JSONっぽい文字列なのにエラーになる」というときは、たいていシングルクォートを使っているか、末尾に余計なカンマが付いていることが原因です。

3. JSON.stringify:オブジェクト→JSON文字列

JavaScriptのオブジェクトをJSON文字列に変換するには、JSON.stringify()を使います。

const user = {
  name: "田中",
  age: 25,
  hobbies: ["読書", "旅行"]
};

const jsonString = JSON.stringify(user);

console.log(jsonString);
// '{"name":"田中","age":25,"hobbies":["読書","旅行"]}'
console.log(typeof jsonString); // "string"

👉 変換後のjsonStringは見た目が似ていても中身は「1本の文字列」であって、オブジェクトではありません。user.nameのようにプロパティへ直接アクセスすることはできなくなります。

4. JSON.parse:JSON文字列→オブジェクト

逆に、JSON文字列をJavaScriptのオブジェクトに戻すにはJSON.parse()を使います。

const jsonString = '{"name":"田中","age":25}';

const user = JSON.parse(jsonString);

console.log(user.name); // "田中"
console.log(user.age);  // 25
console.log(typeof user); // "object"

👉 parseに渡す文字列がJSONのルールに沿っていないと、実行時にエラーになります。外部から受け取ったデータをparseするときは、try・catchで囲んでおくと安全です。

try {
  const user = JSON.parse("これはJSONではない");
} catch (error) {
  console.log("JSONの形式が正しくありません:", error.message);
}

👉 JavaScriptのエラー処理(try・catch・finally)についての記事はこちら

5. 実践例:localStorageにデータを保存する

ブラウザのlocalStorageは、文字列しか保存できません。そのため、オブジェクトを保存したいときはJSON.stringifyとJSON.parseの組み合わせが定番です。

const user = { name: "田中", age: 25 };

// 保存するとき:オブジェクト→文字列に変換してから保存
localStorage.setItem("user", JSON.stringify(user));

// 読み込むとき:文字列→オブジェクトに戻す
const savedUser = JSON.parse(localStorage.getItem("user"));
console.log(savedUser.name); // "田中"

💡 API通信でサーバーからデータを受け取るときも、レスポンスの多くはJSON文字列で届き、JSON.parseで扱いやすいオブジェクトに変換してから使います。

6. 初心者がつまずきやすいポイント

  • JSONとオブジェクトを混同する:JSONはあくまで「文字列」、オブジェクトは「JavaScript上のデータ」という点を区別しましょう
  • シングルクォートを使ってしまう:JSONのキーと文字列値は必ずダブルクォートが必要です
  • 関数を含むオブジェクトをstringifyする:関数プロパティはJSON.stringifyで無視され、結果に含まれません

まとめ

  • JSONは、データをやり取りするための言語共通の文字列フォーマット
  • キーと文字列値は必ずダブルクォートで囲む
  • JSON.stringifyでオブジェクト→JSON文字列に変換する
  • JSON.parseでJSON文字列→オブジェクトに戻す
  • localStorageやAPI通信など、データの保存・受け渡しの場面で頻繁に使われる

JSONはAPI通信やデータ保存の場面で必ずと言っていいほど登場します。stringifyとparseの2つの使い分けさえ覚えておけば、実際のコードで困ることはほとんどなくなるはずです。

-JavaScript
-, ,