先生と生徒の会話形式で理解しよう

生徒

「JavaScriptのオブジェクトを文字列に変換する方法ってありますか？」

先生

「はい、JavaScriptではJSON.stringify()という関数を使うとオブジェクトを文字列に変換できますよ。」

生徒

「文字列に変換するって、どういうときに使うんですか？」

先生

「たとえば、サーバーにデータを送るときやファイルに保存するときは、文字列のほうが扱いやすいんです。逆に文字列から元のオブジェクトに戻すにはJSON.parse()を使います。」

生徒

「なるほど、具体的にどうやって使うか教えてください！」

先生

「それでは基本を詳しく見ていきましょう！」

1. JSONとは何？

JSON（ジェイソン）とは、「JavaScript Object Notation」の略で、データをやり取りするときに使う特別な文字列の形式です。わかりやすくいうと、コンピュータ同士がデータを交換しやすいルールです。

例えば、住所や名前などの情報を整理して文字で表現します。人間も読みやすく、コンピュータも扱いやすい形になっています。

2. JSON.stringify()とは？オブジェクトを文字列に変換する

JSON.stringify()はJavaScriptのオブジェクトや配列を、JSON形式の文字列に変換するための関数です。文字列にすることでデータを保存したり、ネットワークで送ったりできます。


const user = {
  name: "太郎",
  age: 25,
  hobbies: ["読書", "ゲーム"]
};

const jsonString = JSON.stringify(user);
console.log(jsonString);

実行すると、userオブジェクトが次のような文字列になります。


{"name":"太郎","age":25,"hobbies":["読書","ゲーム"]}

この文字列は普通のテキストなので、ファイルに保存したり、サーバーに送ったりできます。

3. JSON.parse()とは？文字列をオブジェクトに戻す

JSON.parse()は、JSON形式の文字列をJavaScriptのオブジェクトや配列に戻すための関数です。


const jsonString = '{"name":"太郎","age":25,"hobbies":["読書","ゲーム"]}';

const user = JSON.parse(jsonString);
console.log(user.name);  // 太郎
console.log(user.hobbies[0]);  // 読書

これで、またJavaScriptのコードの中で使いやすい形に戻すことができます。

4. なぜJSONに変換するの？使い道は？

JavaScriptのオブジェクトは便利ですが、そのままだとファイルやネットワークで扱いにくいことがあります。JSONに変換すると、次のようなメリットがあります。

文字列なのでファイルやデータベースに保存できる
ネットワーク通信で簡単に送受信できる
異なるプログラミング言語でも同じ形式で読み書きできる

例えば、Webアプリがサーバーにユーザー情報を送るときにJSONを使うことが多いです。

5. JSON.stringify()の便利な使い方（整形表示）

JSON.stringifyには、第2引数、第3引数を使って見やすく整形表示する方法もあります。たとえば、インデント（字下げ）をつけることができます。


const user = {
  name: "太郎",
  age: 25,
  hobbies: ["読書", "ゲーム"]
};

const prettyJson = JSON.stringify(user, null, 2);
console.log(prettyJson);

実行すると、下記のようにインデントされた見やすいJSON文字列が得られます。


{
  "name": "太郎",
  "age": 25,
  "hobbies": [
    "読書",
    "ゲーム"
  ]
}

これにより、内容を確認したり編集したりしやすくなります。

6. 注意点：JSONにできないもの

JSONに変換できないデータもあります。例えば、関数やundefined（未定義の値）、SymbolなどはJSONに含められません。

変換すると自動で無視されたり、エラーになることもあります。気をつけましょう。

7. 使い方の流れ

オブジェクトをJSON文字列に変換する → JSON.stringify()
文字列のJSONをオブジェクトに戻す → JSON.parse()

この2つの関数を使いこなすことで、データの保存や通信がスムーズにできます。ぜひ覚えて使ってみてくださいね。

まとめ

JavaScriptにおけるJSON変換は、日常的なWeb開発の中で欠かせない大切な仕組みです。特に、オブジェクトをそのまま扱うだけでは難しい場面、例えばファイル保存やネットワーク通信などでは、文字列に変換したほうが便利です。そこで役立つのがJSON.stringify()とJSON.parse()というふたつの機能です。これらを使いこなせば、さまざまなデータ処理の流れを理解しやすくなり、実際のアプリケーション開発でも力を発揮します。たとえばユーザー情報や設定データを扱うときに、JSONを使うことで他のシステムとも連携しやすい形に整えられるため、とても柔軟なデータ共有が可能になります。また、整形表示機能を使えば視認性の高いデータ管理ができ、複雑なデータ構造でも直感的に読み解けるようになります。こうした積み重ねが、安心して扱えるデータ構造と分かりやすいプログラム作りにつながるのです。

JSON処理のサンプルコード

JSON形式の変換や整形の流れをもう一度確認しておくために、基本的な例を改めてまとめておきます。


// オブジェクトを定義
const book = {
  title: "入門書",
  price: 1200,
  tags: ["学習", "初心者"]
};

// JSON文字列へ変換
const jsonText = JSON.stringify(book, null, 2);
console.log(jsonText);

// 文字列からオブジェクトへ戻す
const parsedBook = JSON.parse(jsonText);
console.log(parsedBook.title);

JSON変換を理解しておくと、APIとの通信やデータ保存処理が想像以上にスムーズになります。特に多くのプロジェクトでJSONが標準の形式として扱われているため、基本的な使い方を習得しておくだけでも新しい技術の習得につながりやすいという利点があります。データの整形や変換の流れを頭に入れておくことで、複雑なアプリケーションでも迷わず処理を追えるようになり、より深く仕組みを理解できるようになります。

先生と生徒の振り返り会話

生徒

「先生、きょうの内容でJSONがどういうものかわかった気がします。でも実際にどんな場面でたくさん使われているんですか？」

先生

「とても良い質問ですね。たとえばWebアプリがサーバーにデータを送るとき、多くの場合はJSONで通信します。ネットワーク経由で扱うデータのほとんどがJSONと思ってもいいくらい広く使われていますよ。」

生徒

「たしかに、見た目もわかりやすいですし、他の言語ともやり取りできるのは便利だなと思いました！」

先生

「そのとおりです。言語に依存しない形式なので、どんな環境でも読み書きできます。だからJSON.stringifyとJSON.parseを覚えておくことで、JavaScriptで扱える範囲がぐっと広がります。」

生徒

「整形表示も便利ですね。複雑なデータでも見やすくなるから、デバッグしやすくなりそうです！」

先生