ウェブサイト検索

JSON.parse() と JSON.stringify() の使い方

紹介

すべての現代的なブラウザで利用可能なJSONオブジェクトには、JSON形式のコンテンツを処理するための2つの便利なメソッドがあります：parseとstringifyです。

JSON.parse()の日本語翻訳は「JSON.parse()」です。

JSON.parse() は JSON 文字列を取り込み、それを JavaScript オブジェクトに変換します。

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';

let userObj = JSON.parse(userStr);

console.log(userObj);

このコードを実行すると、次の出力が得られます:

{name: 'Sammy', email: 'sammy@example.com', plan: 'Pro'}
  email: "sammy@example.com"
  name: "Sammy"
  plan: "Pro"

JSONでは末尾のカンマは無効であるため、JSON.parse()に渡された文字列に末尾のカンマがあるとエラーが発生します。

JSON.parse()は、オブジェクトの値を返す前に変換できる関数を第二引数として取ることができます。

ここでは、オブジェクトの値が parse メソッドの戻り値のオブジェクト内で大文字に変換されています。

let userStr = '{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}';

let userObj = JSON.parse(userStr, (key, value) => {
  if (typeof value === 'string') {
    return value.toUpperCase();
  }
  return value;
});

console.log(userObj);

このコードを実行すると、次の出力が得られます:

{name: 'SAMMY', email: 'SAMMY@EXAMPLE.COM', plan: 'PRO'}
  email: "SAMMY@EXAMPLE.COM"
  name: "SAMMY"
  plan: "PRO"

値は大文字に変換されました。

JSON.stringify()の日本語翻訳は「JSON.stringify()」です。

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

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

let userStr = JSON.stringify(userObj);

console.log(userStr);

このコードを実行すると、次の出力が得られます:

{"name":"Sammy","email":"sammy@example.com","plan":"Pro"}

JSON.stringify()は、2つの追加の引数を受け取ることができます。最初の引数はreplacer関数です。2番目は、返される文字列内でspaceとして使用されるStringまたはNumber値です。

置換関数は値をフィルタリングするために使用でき、undefinedとして返される任意の値は返される文字列から除外されます:

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

function replacer(key, value) {
  console.log(typeof value);
  if (key === 'email') {
    return undefined;
  }
  return value;
}

let userStrReplacer = JSON.stringify(userObj, replacer);

console.log(userStrReplacer);

このコードを実行すると、次の出力が得られます:

{"name":"Sammy","plan":"Pro"}

オブジェクトからemailキーと値のペアが削除されました。

スペース引数を渡す例:

let userObj = {
  name: "Sammy",
  email: "sammy@example.com",
  plan: "Pro"
};

let userStrSpace = JSON.stringify(user, null, '...');

console.log(userStrSpace);

このコードを実行すると、次の出力が得られます:

{
..."name": "Sammy",
..."email": "sammy@example.com",
..."plan": "Pro"
}

インデントは ... に置き換えられました。

結論

このチュートリアルでは、JSON.parse()とJSON.stringify()メソッドを使用しました。JavaScriptでのJSONの取り扱いについてもっと学びたい場合は、「JavaScriptでJSONを扱う方法」のチュートリアルをチェックしてください。

JavaScriptのコーディングに関する詳細情報は、当社の「JavaScriptのコーディング方法」シリーズをご覧いただくか、演習やプログラミングプロジェクトのためのJavaScriptトピックページをチェックしてください。

関連記事: