0Pricing
JavaScript Academy · レッスン

JSON.parse / JSON.stringifyの基礎

オブジェクトをJSON文字列に変換して戻す方法を学びます。replacer/reviverも簡単に扱い、不正な入力を安全に処理します。

「JSON.parse / JSON.stringifyの基礎」はCoddyKit上の無料JavaScript Academyレッスンです。 これはレッスン1/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

なぜJSONなのか

目標：安全にシリアライズとパースを行います。

  • JSON.stringify → 文字列
  • JSON.parse ← 文字列
  • replacer/reviverを試す
  • 基本的な安全対策
JSON.parse / JSON.stringifyの基礎 — イラスト1

stringify()

JSON.stringify(value)を使うと、JSON文字列を取得できます。読みやすくするには、spaceに数値（例：2）を渡します。

// Turn a value into a JSON string
const user = { name: "Ayla", score: 12, active: true };
const json = JSON.stringify(user);
console.log("json:", json);

// Optional: pretty-print with spaces (2)
const pretty = JSON.stringify(user, null, 2);
console.log("pretty:", pretty);
JSON.parse / JSON.stringifyの基礎 — イラスト2

parse()

JSON.parse(text)は値を返します。入力は有効なJSON文字列でなければなりません。

// Parse a JSON string back to a value
const raw = "{\"name\":\"Ayla\",\"score\":12,\"active\":true}";
const value = JSON.parse(raw);
console.log("name:", value.name, "score:", value.score);
JSON.parse / JSON.stringifyの基礎 — イラスト3

Replacer（stringify）

replacer(key, value)を使うと、シリアライズ時にフィールドを除外したり変更したりできます（例：パスワードを隠す）。

// Replacer: filter or transform keys during stringify
const account = { id: 7, password: "secret", role: "user" };

// Hide sensitive fields
function replacer(key, value) {
  if (key === "password") return undefined; // drop it
  return value;
}

const safeJson = JSON.stringify(account, replacer, 2);
console.log("safeJson:", safeJson);
JSON.parse / JSON.stringifyの基礎 — イラスト4

Reviver（parse）

reviver(key, value)を使うと、パース中に値を変換できます（例：文字列をDateに変換する）。

// Reviver: convert specific strings back into richer types
const orderJson = "{\"when\":\"2024-06-01T10:00:00Z\",\"total\":25}";

function reviver(key, value) {
  if (key === "when" && typeof value === "string") {
    return new Date(value); // restore Date
  }
  return value;
}

const order = JSON.parse(orderJson, reviver);
console.log("is Date?", order.when instanceof Date);
console.log("total:", order.total);
JSON.parse / JSON.stringifyの基礎 — イラスト5

安全対策と制限

ヒント：

  • 信頼できない入力を扱う場合は、JSON.parseをtry/catchで囲みます。
  • ログへの記録や共有の前に、replacerを使って機密フィールドを削除します。
  • JSONでは関数やプロトタイプ情報が失われ、データだけがシリアライズされます。
JSON.parse / JSON.stringifyの基礎 — イラスト6

stringifyとparseのクイズ

簡単な確認：値をシリアライズします。

JSON.parse / JSON.stringifyの基礎 — イラスト7

まとめ

まとめ：JSON.stringify/JSON.parseで値を変換します。replacerでフィールドを絞り込み、reviverでDateのような型を復元します。安全のためにtry/catchも追加します。

JSON.parse / JSON.stringifyの基礎 — イラスト8

よくある質問

「JSON.parse / JSON.stringifyの基礎」レッスンは無料ですか？

はい。「JSON.parse / JSON.stringifyの基礎」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「JSON.parse / JSON.stringifyの基礎」で何を学びますか？

オブジェクトをJSON文字列に変換して戻す方法を学びます。replacer/reviverも簡単に扱い、不正な入力を安全に処理します。 ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/3です。

「JSON.parse / JSON.stringifyの基礎」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. JSON.parse / JSON.stringifyの基礎
  2. 構造化クローンとURLSearchParams
  3. 安全なJSONパースの戦略
← JavaScript Academyに戻る