JavaScriptでJSONを文字列に変換する方法を初心者向けに解説！JSON.stringifyの使い方ガイド

1. JSONとは何かを理解しよう

1. JSONとは何かを理解しよう

JSONは「JavaScript Object Notation」の略で、データをわかりやすく整理する形式です。オブジェクトや配列の形でデータを書きます。例えば、ユーザー情報を表す場合は次のように書けます。

const user = {
  name: "太郎",
  age: 20,
  hobby: "読書"
};

このオブジェクトはJavaScriptでは直接使えますが、サーバーに送るときには文字列に変換する必要があります。

2. JSON.stringifyとは？

2. JSON.stringifyとは？

JSON.stringifyは、JavaScriptのオブジェクトや配列をJSON形式の文字列に変換する関数です。文字列に変換することで、保存や送信が簡単になります。

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

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

このようにオブジェクトが文字列になりました。

3. 配列を文字列に変換してみよう

3. 配列を文字列に変換してみよう

オブジェクトだけでなく配列もJSON.stringifyで文字列にできます。

const fruits = ["りんご", "みかん", "バナナ"];
const jsonFruits = JSON.stringify(fruits);
console.log(jsonFruits);

["りんご","みかん","バナナ"]

配列の形をそのまま文字列として保持できるのが便利です。

4. ネストしたオブジェクトも文字列化できる

4. ネストしたオブジェクトも文字列化できる

オブジェクトの中にオブジェクトや配列が入っていてもJSON.stringifyで変換可能です。

const user = {
  name: "花子",
  age: 25,
  hobbies: ["音楽", "映画"],
  address: { city: "東京", zip: "100-0001" }
};
const jsonUser = JSON.stringify(user);
console.log(jsonUser);

{"name":"花子","age":25,"hobbies":["音楽","映画"],"address":{"city":"東京","zip":"100-0001"}}

どんなに複雑なデータでも文字列としてまとめることができます。

5. 整形して見やすく変換する方法

5. 整形して見やすく変換する方法

JSON.stringifyには、引数を追加して見やすく整形する方法があります。インデントを指定すると読みやすいJSONになります。

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

{
  "name": "花子",
  "age": 25,
  "hobbies": [
    "音楽",
    "映画"
  ],
  "address": {
    "city": "東京",
    "zip": "100-0001"
  }
}

このように改行やスペースが入ることで、他の人が見ても理解しやすくなります。

6. JSON.stringifyで注意すること

6. JSON.stringifyで注意すること

注意点として、関数やundefinedは文字列化できません。また、循環参照（自分自身を参照するオブジェクト）もエラーになります。

const obj = {
  name: "太郎",
  greet: function() { console.log("こんにちは"); }
};
console.log(JSON.stringify(obj));

{"name":"太郎"}

関数部分は無視されて文字列化されます。

7. 実際の利用例：サーバーに送信するデータ

7. 実際の利用例：サーバーに送信するデータ

例えばWebアプリでユーザー情報をサーバーに送る場合、文字列化したJSONを使います。

const data = { username: "taro", score: 100 };
fetch("https://example.com/api", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(data)
});

このように、オブジェクトをそのまま送信するのではなく、JSON.stringifyで文字列化して送るのが一般的です。

8. まとめに向けて理解を深めるポイント

8. まとめに向けて理解を深めるポイント

今回学んだことを整理すると、JSON.stringifyはオブジェクトや配列を文字列化するための便利な関数です。文字列化することでデータの保存や通信が簡単になり、整形することで読みやすくなります。また、文字列化できないものや循環参照には注意する必要があります。

プログラミング初心者でも、JSON形式とJSON.stringifyを理解しておくと、データ操作やWeb開発で非常に役立ちます。

まとめ

まとめ

本記事では、JavaScriptにおけるJSON.stringifyの基本から応用までを丁寧に解説しました。まず、JSONはデータを整理してやり取りするための軽量な形式であり、オブジェクトや配列の構造をそのまま保持できることがわかりました。JSON.stringifyを使うことで、JavaScriptのオブジェクトや配列をサーバーに送信したりファイルに保存したりする際に文字列として扱うことができ、データのやり取りが簡単かつ安全になります。

さらに、配列やネストしたオブジェクトも文字列化できること、また引数に工夫を加えることでインデント付きの整形されたJSONを作成できることも学びました。これにより、他の開発者や将来の自分が見ても理解しやすく、デバッグやデータ確認が容易になります。反対に、関数やundefined、循環参照などは文字列化できないため、変換前に注意して扱う必要があることも理解しました。

実際の利用例として、Webアプリでユーザー情報やスコアデータをサーバーに送信する際、JSON.stringifyで文字列化してから送る方法を紹介しました。この手法は、API通信やデータ保存において最も基本的であり、開発者にとって必須のスキルです。文字列化によってデータ構造を崩さずに送信できるため、サーバー側での解析も簡単になります。

結論として、JSON.stringifyはJavaScriptでのデータ操作やWeb開発において欠かせない関数であり、初心者でもまず理解しておくべき基礎知識です。配列、オブジェクト、ネスト構造、整形表示、そして文字列化できないデータの扱いまで、幅広く理解しておくことで、将来的により複雑なデータ操作やAPI開発に応用できます。

 // オブジェクトを文字列化してサーバー送信する例 const user = { name: "太郎", age: 30, hobbies: ["読書", "映画"], address: { city: "大阪", zip: "530-0001" } }; const jsonData = JSON.stringify(user, null, 2); console.log(jsonData);

 { "name": "太郎", "age": 30, "hobbies": [ "読書", "映画" ], "address": { "city": "大阪", "zip": "530-0001" } }