JSONを理解してJavaScriptのstringifyとparseで操作してみよう

最近ではデータ通信が必要な場面では言語を問わず活用されているJSON。
データの受け渡しをするときにJSONを使えばとても便利なので、インタラクティブなサイトでは必須の技術といえるでしょう。
この記事では、JSONを使い始めるために必要な基本的な知識を実際のコードを紹介しながら解説していきます。

JSONは軽量なデータ交換フォーマット

JSONとは

JSONとは「JavaScript Object Notation」の略で、もともとはJavaScriptと連携する他の言語とデータのやりとりをするために考え出された、軽量なデータ交換フォーマットです。
実際にはJavaScriptだけでなくPHPやPythonといったその他の言語間のやりとりでも使えるため、データ通信を必要とするさまざまなシーンでとても重宝されています。

JSONはオブジェクト構造を表現することができます。近いフォーマットにXMLがありますが、JSONは人間が見ても直感的に理解しやすい記法で書かれており、XMLに比べるとタグ量が少なくて軽量という特徴があります。通信で利用するためには軽量であることは大きな利点です。

こういった特徴からデータ通信が必要な場面で広く活用されるフォーマットになったのです。
実はJSONの歴史は長く、仕様が規定されたのは2006年ですが、1990年代から活用されていたようです。

JSONの書き方

基本的なJSONの書き方について説明します。

JSONデータは、キーと値の組み合わせで構成されます。キーは文字列で、値は文字列、数値、真偽値、配列、オブジェクト、nullのいずれかの型を使用することができます。

JSONにおけるキーと値の組み合わせは、「{」と「}」で囲われます。そしてキーと値の組は、「キー名」:「値」という形式で記述します。

{
    "キー名1": "値1",
    "キー名2": "値2",
    ...
}

値が文字列の場合には以下のようにダブルクォーテーション（”）で囲みます。

{
    "name": “Yamada”,
    "address": “Tokyo”,
    ...
}

値として配列を使用したい場合には角括弧（[ と ]）で囲み、値をカンマで区切ります。

{
    "キー名1": [ "値1", "値2", ...],
    "キー名2": [ 123, 789, ...],
    ...
}

数値は整数や浮動小数を使用することができます。

{
    ”height": 35.8,
    "price": 500,
    ...
}

以下にJSONの書き方の例を示します。

{
    "name": "Taro Yamada",
    "age": 25,
    "isMarried": true,
    "hobbies": [
        "driving",
        "fishing",
        "traveling"
    ]
}

JavaScriptにおけるJSONの扱い方

ここではJavaScriptでJSONをどのように扱うかを説明します。
オブジェクトをJSONへエンコードするためにはJSON.stringify()を使用します。
また、受け取ったJSONはテキストデータであるためそのままでは扱いが難しく、オブジェクトにデコードして操作することが多いです。

オブジェクトのJSONへのエンコード

JavaScriptでオブジェクトをJSONへエンコードするためには、JSON.stringify()を使用します。
JSON.stringify()の戻り値はJSON記法のテキストです。

const obj = {
  name: 'Taro Yamada',
  age: 25,
  isEngineer: true
};

const objAsString = JSON.stringify(obj);

console.log(objAsString);
// 出力結果: {"name":"Taro Yamada","age":25,"isEngineer":true}

この例で変数objは、プロパティname、age、isEngineerを持つオブジェクトです。
JSON.stringify()は引数としてオブジェクトを受け取り、そのオブジェクトをJSON記法の文字列にエンコードして返します。
そして、その文字列をコンソールに出力しています。

また、JSON.stringify()ではオプションを指定することでインデントやプロパティのフィルタリングなど、結果の文字列をフォーマットすることができます。

const obj = {
  name: 'Taro Yamada',
  age: 25,
  isEngineer: true
};

const objAsString = JSON.stringify(obj, null, 2);

console.log(objAsString);
/* 出力結果:
{
  "name": "Taro Yamada",
  "age": 25,
  "isEngineer": true
}
*/

この例では、JSON.stringify()の第2引数をnull、第3引数を2としています。
第2引数はreplacerというもので、JSONとして出力する値の調整ができるのですが、ここではnullとして全てそのまま出力します。
第3引数は、結果の文字列のインデントで使用するスペースの数を指定するものです。
結果のJSON文字列はコンソールに出力され、オブジェクトの各レベルがスペース2つ分インデントされていることが分かります。

JSON文字列からオブジェクトへのデコード

受け取った文字列のJSONデータをより扱いやすくするために、JavaScriptのオブジェクトの形式に変換してみましょう。
ここではJavaScriptのJSON.parse()を使って、JSON文字列をオブジェクトに変換する例を示します。

const jsonString = '{"name":"Taro Yamada","age":25,"isEngineer":true}';

const obj = JSON.parse(jsonString);

console.log(obj);
// 出力結果: { name: 'Taro Yamada', age: 25, isEngineer: true }

この例では、jsonString変数に、JSON記法の文字列が格納されています。
JSON.parse()は、引数として文字列を受け取り、JavaScriptオブジェクトを返します。
そして、そのオブジェクトをコンソールに出力しています。

また、JSON.parse()ではreviver（リバイバー）関数を使用することで、パース中にオブジェクトのプロパティを変換することもできます。

const jsonString = '{"name":"Taro Yamada","age":25,"isEngineer":true}';

const obj = JSON.parse(jsonString, (key, value) => {
  if (key === 'age') {
    return value + 10;
  }
  return value;
});

console.log(obj);
// Output: { name: 'Taro Yamada', age: 35, isEngineer: true }

この例では、JSON.parse()の第2引数に、keyとvalueの2つの引数を取るreviver関数を指定しています。
この関数は、キーが「age」であるかどうかをチェックし、「age」であれば、その値に10を足した値を返します。
結果としてオブジェクト内のageの値は10加算され、その結果がコンソールに出力されます。

まとめ

JSONはもともとJavaScriptで通信を行う際の軽量なデータフォーマットとして使用されていましたが、現在ではその使い勝手の良さから言語を問わず広く使用されています。
JSONは文字列であるため、プログラム内で使用するためにはオブジェクトに変換して操作し、通信に使用する際にはJSON記法の文字列にエンコードして使用します。
JSONは使用する場面が多いため、基本的な記法や扱い方は理解しておきましょう。