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

生徒

「JavaScriptでデータを保存したり読み込んだりするには、どんな方法があるんですか？」

先生

「それならJSON.stringifyとJSON.parseという便利な機能がありますよ。データを文字列に変換したり、また元に戻したりできるんです。」

生徒

「それって難しそうですが、どんなときに使うんですか？」

先生

「データの保存や通信をしたいときによく使います。詳しく説明していきますね！」

1. JSONとは何か？

JSON（ジェイソン）とは、「JavaScript Object Notation」の略で、データを文字列で表現するための形式です。

人間が読んでも分かりやすく、コンピュータにも扱いやすい形です。主に、オブジェクトや配列などのデータを保存したり、他のアプリとやり取りするときに使います。

2. JSON.stringifyでデータを文字列に変換

JSON.stringifyは、JavaScriptのデータをJSON形式の文字列に変換する関数です。文字列にすることで、保存したり送信したりしやすくなります。


let person = {
  name: "たろう",
  age: 25,
  hobbies: ["サッカー", "読書"]
};

let jsonString = JSON.stringify(person);
console.log(jsonString);


{"name":"たろう","age":25,"hobbies":["サッカー","読書"]}

このように、オブジェクトが{}で囲まれた文字列に変わります。見た目は似ていますが、これはただの文字列です。

3. JSON.parseで文字列を元のデータに戻す

JSON.parseは、JSON形式の文字列をJavaScriptのデータ型に戻す関数です。


let text = '{"name":"たろう","age":25,"hobbies":["サッカー","読書"]}';

let obj = JSON.parse(text);
console.log(obj.name);


たろう

このように、JSON.stringifyで作った文字列をJSON.parseで元のオブジェクトに戻せます。

4. なぜデータ型変換に使うの？

JavaScriptでは、配列やオブジェクトなどのデータ型をそのまま保存したり、他のサービスと通信することはできません。なぜなら、文字ではないからです。

そこで、JSON.stringifyで文字列に変換し、JSON.parseでまた元に戻すという流れを使います。これがデータ型変換です。

5. 使いどころの例

たとえば、Webページでユーザーの情報をブラウザに一時保存したいとき、「localStorage」という機能を使います。このとき、文字列しか保存できないので、JSON.stringifyで変換する必要があります。


let user = {
  id: 1,
  name: "さくら",
  login: true
};

// 文字列に変換して保存
localStorage.setItem("user", JSON.stringify(user));

// 保存した文字列を取得して元に戻す
let data = localStorage.getItem("user");
let parsedUser = JSON.parse(data);

console.log(parsedUser.name);


さくら

このように、保存 → 文字列 → 読み込み → 元に戻すという流れで使われます。

6. JSON.stringifyで変換できないデータもある

すべてのデータがJSONに変換できるわけではありません。たとえば、関数やundefined、Symbolなどは変換できません。


let example = {
  name: "じろう",
  greet: function() {
    console.log("こんにちは");
  },
  age: undefined
};

console.log(JSON.stringify(example));


{"name":"じろう"}

このように、関数やundefinedは削除されてしまいます。

7. ネストされたデータも扱える

JSONは入れ子構造（オブジェクトの中にオブジェクトがあるような形）でも扱えます。


let data = {
  user: {
    name: "ひかる",
    info: {
      age: 30,
      city: "東京"
    }
  }
};

let str = JSON.stringify(data);
let parsed = JSON.parse(str);

console.log(parsed.user.info.city);


東京

このように、複雑なデータも扱えるのがJSONの魅力です。

8. 配列もJSONにできる

配列もJSON.stringifyで文字列にできます。そして、JSON.parseで元の配列に戻せます。


let fruits = ["りんご", "バナナ", "みかん"];

let jsonText = JSON.stringify(fruits);
console.log(jsonText);

let backToArray = JSON.parse(jsonText);
console.log(backToArray[1]);


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

配列の順番も保たれているので安心です。

まとめ

JavaScriptの世界では、JSON.stringifyとJSON.parseという二つの機能がさまざまな場面で活躍します。これらはただの補助的な道具ではなく、複雑な情報を安全かつ効率的に扱うために欠かせない基礎的な技術です。初心者が最初につまずきやすい「オブジェクトと文字列の違い」や「保存できるものとできないものの境界」が理解しやすくなるため、今回はその基本から応用までを丁寧に振り返りながら、より実践的な理解につながるように整理していきます。まず、JSONはひと目で見やすくたくさんのシステムで採用されている形式であり、構造化された情報を安全にやり取りできるのが大きな魅力です。特に配列や入れ子になった複雑なオブジェクトにも柔軟に対応できるため、実務でも日常的に利用されています。さらに、ブラウザのlocalStorageやsessionStorage、サーバーとの通信、ファイル形式としての保存など、活用できる幅がとても広いため、身につけておくことで一気に表現できるコードの世界が広がります。こうした背景から、JSON.stringifyは単に文字列に変換するだけの機能ではなく、情報を整理し、別の場所へ受け渡すための重要な橋渡し役として働きます。また、JSON.parseはその文字列を元の姿に戻すための逆変換です。両方をセットで理解することで、データの流れを行き来させる技術が自然と身につきます。この二つの動きがわかると、実際のプログラム内部でどのように情報が動いているのか、より深く理解できるようになります。さらに、変換できない値についても知っておくと、予想外のエラーを避けられます。関数やundefinedが変換中に消えてしまうという性質は、初心者だけでなく経験者でも見落としやすい部分ですが、特徴を知っておくことで安全にデータを扱えるようになります。特にアプリケーション全体の設計を考えるとき、この特徴を理解しておくことは非常に重要です。別の観点では、JSONは構造が安定していて、多くの言語で共通して扱えるという強みがあります。JavaScript、Python、PHP、Javaなど互換性が高く、異なる言語が協力して動くような大規模な仕組みでも便利に利用できます。こうした互換性の広さは、初学者が知っておくと後々の学習でも大きな強みになります。また、データ型変換の知識を深めていくと「データはどのタイミングで文字列になり、どのタイミングでオブジェクトに戻すべきか」という判断力が育ち、コードの見通しも良くなります。間違いの原因になりやすい「意図しない型変換」も抑え込めるようになるため、バグの少ないきれいなコードを書くためにも非常に役立ちます。さらに、JSON.stringifyの第三引数を使った整形は、データを調査したりログとして出力したりするときにとても便利です。これによって大規模な情報の中身が見やすくなり、エラー調査や機能確認にも活かせます。こうした細やかな使い方が自然にできるようになると、プログラムを扱う姿勢自体が大きく変わります。実務での利用を考えると、localStorageとの組み合わせによる「状態管理」も大切なポイントです。ページを更新してもデータが保持されるという性質をうまく利用することで、ユーザー体験を向上する工夫ができるのです。買い物カートやログイン情報の保存、簡易設定の保持など、身近な例でも多くの場面で使われています。逆に、変換できないデータの扱いや循環参照があるオブジェクトなどは注意が必要ですが、基本を理解していれば落ち着いて対処できます。配列についても同じく、文字列化して保存し、必要なときに復元して扱うという流れを身につけておくと、扱えるデータ量が格段に増えます。特に、選択肢のリストや複数の設定項目をまとめて扱うとき、配列の活用は欠かせません。さらに、JSON.parseで復元したあとに配列のメソッドをそのまま使える点は、実践の中でも非常に便利です。総合的に見ると、JSON.stringifyとJSON.parseはJavaScriptの基本を支える柱ともいえる存在であり、初心者の段階からしっかりと理解しておくことで、後々の学習が驚くほど楽になります。データの保存、通信、受け渡しという三つの大きな流れを自然に扱えるようになり、より高度な機能に挑戦するときの土台として役立ちます。今回の学習を通じて、文字列化の仕組み、元に戻す仕組み、変換できない要素の理解、配列や入れ子構造の扱いなど、多くのポイントを総合的に掴めたのではないでしょうか。知識がつながっていくと、JavaScriptの理解はどんどん深まり、さまざまな情報を扱うプログラムが自然と書けるようになります。ぜひ、実際にコードを書きながら試してみて、今回学んだ内容を自分の力として育てていってください。

サンプルコード再確認


let sample = {
  title: "れんしゅう",
  count: 3,
  items: ["りんご", "ばなな", "みかん"]
};
let json = JSON.stringify(sample, null, 2);
console.log(json);
let back = JSON.parse(json);
console.log(back.items[0]);

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

生徒

「きょうの内容で、JSONがどう役立つのかよくわかりました。特に保存のしくみが面白かったです。」

先生

「うんうん。JSONはデータを整理して扱うための大切な道具だから、しっかり理解しておくといろいろ応用できるよ。」

生徒

「配列もオブジェクトも文字列にできて、また元に戻せるっていうのが便利ですね。」

先生

「そうそう。JavaScriptではとてもよく使われる流れだから、今回覚えたことを使いながらさらに深めていくといいよ。」