JavaScriptでJSONを扱う!parse・stringifyメソッドの使い方を徹底解説!



JavaScriptでJSONを扱う!parse・stringifyメソッドの使い方を徹底解説!

エンジニアの皆さん、JSON使ってますか?

JSONはPHPなどのサーバーサイドから、フロントエンドのJavaScriptに値を渡す際に便利なデータフォーマットです。これはJSONがJavaScript Object Notationの略称であることを鑑みれば当然だとわかります。JSONがJavaScriptのオブジェクト形式を参考にして作られたフォーマットであるため、JavaScriptと親和性が高いのです。

ですが、普段サーバーサイドを中心に開発しているエンジニアはJavaScriptを苦手視する傾向にあります。この記事ではサーバーサイドから受け取ったJSONフォーマットのデータを、JavasScript側で簡単に取り扱えるメソッドの使い方を紹介します。

目次
  1. JSON.parseの使い方
  2. JSON.stringlifyの使い方

JSON.parseの使い方

サーバーサイドから受け取った際のJSONフォーマットのデータは、この時点では単なる文字列に過ぎません。あくまでフォーマットのルールに従って作成された文字列なため、これを解析してJavaScriptのオブジェクトに変換する必要があります。この解析して変換する作業をパースといいます。

JavaScriptでJSONフォーマットの文字列をパースするには JSON.parse() というメソッドを使います。書式は下記の通りです。

JSON.parse( text [, reviver] )

JSON.parse() が取る引数は以下のようになります。

引数 説明
text JSONとして解析する文字列を渡します。JSONの構文に準拠している必要があります。
reviver 解析してオブジェクト化したデータの返却前に、データのフィルタリングや成形を行う関数を渡します。原則として関数を渡し、省略が可能です。

基本的な使い方をご紹介しましょう。

JSON.parse('{}');  // {}
JSON.parse('true');  // true
JSON.parse('"foo"');  // "foo"
JSON.parse('[1, 5, "false"]');  // [1, 5, "false"]
JSON.parse('null');  // null
JSON.parse('{"code": "camp", "id": 1234}');  // {code: "camp", id: 1234}

前述のとおり、第一引数(text部分)に渡す文字列はJSONの構文に準拠している必要があります。もし構文に準拠していない文字列を作成し、引数に渡して解析できない場合はSyntaxError例外をスローします。

主に構文エラーとなる場合は下記の原因が考えられます。

  • 文字列がダブルクォーテーションで括られていない
  • オブジェクトのプロパティ名がダブルクォーテーションで括られていない
  • 理論値(trueやfalse、null)が大文字になっている

ここで間違えやすいJSONの構文エラーと解決方法も紹介します。

// 文字列がダブルクォーテーションで括られていない
❌ JSON.parse('codecamp');
⭕️ JSON.parse('"codecamp"');

// プロパティ名がダブルクォーテーションで括られていない
❌ JSON.parse('{code: true}');
⭕️ JSON.parse('{"code": true}');

// 理論値(trueやfalse、null)が大文字になっている
❌ JSON.parse('True');
⭕️ JSON.parse('true');

次に第二引数(reviver部分)に渡す関数についても説明しましょう。

これまで確認したように第二引数を省略した場合、第一引数に渡したJSON構文の文字列をパースしてオブジェクトとして値を返却するのが JSON.parse() の挙動でした。

もし第二引数に関数を指定した場合、このパースと値の返却の間に指定した関数で処理を挟むことが可能となります。例えば下記のような使い方が可能となります。

JSON.parse('{"a": 5, "b": "five"}', function(key, value) {
  // valueが数値型の場合は2を乗算して返却
  if (typeof value === 'number') {
    return value * 2;
  }
  // 数値型以外はそのまま返却
  return value;
});

// 返却される値は下記の通り
{a: 10, b: "five"}

この例の場合は値が数値型の場合は一律2を乗算して返却、数値型以外はそのまま返却するサンプルです。

JSONデータがオブジェクトの場合、関数には第一引数にプロパティ名(key)、第二引数にプロパティ値(value)が渡されます。関数の戻り値に有効な値を返すことで対応する値が再定義されます。

もし戻り値にundefinedやnullなどの有効ではない値を返した場合、そのプロパティは下記サンプルのようにオブジェクトから削除されてしまいます。

JSON.parse('{"a": 5, "b": "five"}', function(key, value) {
  // valueが文字列型の場合はオブジェクトから削除
  if (typeof value === 'string') {
    return undefined;
  }
  // 数値型以外はそのまま返却
  return value;
});

// 返却される値は下記の通り
{a: 5}

また、JSONデータがもし配列の場合、第一引数にインデックス(index)、第二引数に値(value)が渡されます。

JSON.parse('["apple", "orange", "banana", "berry" ]', function(index, value) {
  // 奇数番目の値に文字列を付与
  if (index % 2) {
    return value + ' is fruit';
  }
  // 以外はそのまま返却
  return value;
});

// 返却される値は下記の通り
["apple", "orange is fruit", "banana", "berry is fruit"]

JSON.stringlifyの使い方

次は JSON.parse とは逆に、JavaScriptのオブジェクトを解析してJSON構文の文字列に変換する JSON.stringlify というメソッドです。書式は下記の通りです。

JSON.stringify( value [, replacer] )

JSON.stringify() が取る引数は以下のようになります。

引数 説明
value JSON 文字列に変換する値、オブジェクト。
replacer 文字列化の前に、データのフィルタリングや成形を行います。関数または 文字列型か数値型からなる配列を渡し、省略は可能です。関数の場合は戻し値に応じた値を文字列として変換。配列の場合は配列内の値をホワイトリストとして参照して、オブジェクトのプロパティがホワイトリストに存在する値のみ文字列として変換されます。

基本的な使い方をご紹介しましょう。

JSON.stringify({});  // '{}'
JSON.stringify(true);  // 'true'
JSON.stringify('foo');  // '"foo"'
JSON.stringify([1, 'false', false]);  // '[1,"false",false]'
JSON.stringify({ x: 5 });  // '{"x":5}'

また、もしも値に undefined が存在した場合、オブジェクトの場合は削除され、配列の場合は null に置き換えられます。

JSON.stringify({code: 'JavaScript', camp: undefined});  // '{"code":"JavaScript"}'
JSON.stringify(['JavaScript', undefined, 'php']);  // '["JavaScript",null,"php"]'

次に第二引数(replacer部分)についても説明します。前述のように関数と配列を引数に渡すことが可能です。

関数を用いる場合は下記のようなコードとなります。

JSON.stringify({a: 1, b: "two", c: 3, d: "4" }, function(index, value) {
  // 文字列の場合は削除
  if (typeof value === "string") {
    return undefined;
  }
  // 以外はそのまま返却
  return value;
});

// 返却される値は下記の通り
'{"a":1,"c":3}'

この例の場合は値が文字列型の場合は削除するというサンプルです。

次に配列を用いる場合は下記のようなコードとなります。

JSON.stringify({a: 1, b: "two", c: 3, d: "4" }, ['b', 'd']);

// 返却される値は下記の通り
'{"b":"two","d":"4"}'

第二引数にホワイトリストとなるプロパティの文字列を配列で渡します。

関連記事

阿蘇
この記事を書いた人
阿蘇
\ 無料体験開催中!/自分のペースで確実に習得!
オンライン・プログラミングレッスンNo.1のCodeCamp