JavaScriptのJSON操作【プログラミング初心者向け教材】

JSONは外部のAPIや他システムと連携する際のデータフォーマットとしてよく用いられるフォーマットです。

プログラム内では受け取ったJSONデータをシステム内に取り込んだり、その逆を行ったりすることがあるため、JSONデータの操作が必要となります。

本記事では、JavaScriptにおけるJSONデータの操作についてまとめます。

プログラミング初心者の方の学習や、忘れてしまった方の復習として、参考にしていただければ幸いです。

記載しているプログラムは、Node.js14.14.0を使って動作確認をしています。

JavaScriptのJSON操作

JavaScriptのJSON操作として以下の内容を採り上げます。

JSONファイルの読み込み

本記事では、以下のJSONデータを扱います。

{
  "string": "文字列",
  "int": 2020,
  "bool": true,
  "null": null,
  "array": [
    {"no": 1, "name": "JavaScript"},
    {"no": 2, "name": "Python"}
  ],
  "object": {
    "no": 3,
    "name": "Java"
  }
}

この内容を data.json というファイルで保存し、プログラムから読み込みます。

s = fs.readFileSync('./data.json', 'utf-8');
console.log(s); // -> (上記のJSONファイルの内容が表示される)

ファイルから読み込んだ時点では、文字列としてJSONデータを扱っている状態になります。

文字列からJSONオブジェクトへの変換

文字列からJSONオブジェクトへ変換するには、JSON.parse を使います。
JSONオブジェクトは標準で使用可能な組込みオブジェクトです。

json = JSON.parse(s);
console.log(json);

上記のプログラムを実行すると、以下のように整形されて表示されます。

{
  string: '文字列',
  int: 2020,
  bool: true,
  null: null,
  array: [ { no: 1, name: 'JavaScript' }, { no: 2, name: 'Python' } ],
  object: { no: 3, name: 'Java' }
}

JSONデータの参照

JSONオブジェクトのデータを参照するには、データの型によって参照方法が異なります。

文字列や整数の参照

文字列や整数の参照は、直接キー名を参照することで値を参照することができます。

console.log(json.string); // -> 文字列
console.log(json.int); // -> 2020
console.log(json.bool); // -> true
console.log(json.null); // -> null

配列の参照

配列の参照は、キー名にインデックスを指定して値を参照することができます。

console.log(json.array[0].no); // -> 1
console.log(json.array[0].name); // -> JavaScript
console.log(json.array[1].no); // -> 2
console.log(json.array[1].name); // -> Python

配列なので、ループによる参照も可能です。

json.array.forEach((data) => {
    console.log(data.no); // -> 1 -> 2
    console.log(data.name); // -> JavaScript -> Python
});

filterやfindを使って、必要な値をだけを取得するなどの処理を行うことも可能です。

オブジェクトの参照

オブジェクトの参照は、ネストするオブジェクトのキー名を参照して値を取得することができます。

console.log(json.object.no); // -> 3
console.log(json.object.name); // -> Java

JSONデータの追加

JSONオブジェクトにデータを追加するには、参照と同じくデータの型によって追加方法が異なります。

文字列や整数の追加

文字列や整数値の追加は、jsonオブジェクトに直接キーと値を指定します。

json.string2 = "追加文字列";
json.int2 = 2021;
json.bool2 = false;
json.null2 = null;

配列の追加

配列に追加するには、pushを使って追加するJSONを指定します。

json.array.push({"no": 4, "name": "Ruby"});

オブジェクトの追加

オブジェクトを追加するには、オブジェクトをネストさせてキーと値を指定します。

json.object.object2 = {"no": 5, "name": "Go"};

上記で追加したJSONオブジェクト全体を表示させると以下のようになります。

{
  string: '文字列',
  int: 2020,
  bool: true,
  null: null,
  array: [
    { no: 1, name: 'JavaScript' },
    { no: 2, name: 'Python' },
    { no: 4, name: 'Ruby' }
  ],
  object: { no: 3, name: 'Java', object2: { no: 5, name: 'Go' } },
  string2: '追加文字列',
  int2: 2021,
  bool2: false,
  null2: null
}

JSONデータの削除

JSONオブジェクトからデータを削除するには、delete を使います。
配列からの削除は、deleteを使うとundefinedで要素自体が残ってしまうため、spliceを使って要素数も含めて削除するようにします。

delete json.string2;
delete json.int2;
delete json.bool2;
delete json.null2;
json.array.splice(2, 1);
delete json.object.object2;

上記で削除した結果のJSONオブジェクト全体を表示させると以下のようになります。
（追加した分が削除されて、元の状態に戻っています）

{
  string: '文字列',
  int: 2020,
  bool: true,
  null: null,
  array: [ { no: 1, name: 'JavaScript' }, { no: 2, name: 'Python' } ],
  object: { no: 3, name: 'Java' }
}

JSONオブジェクトから文字列への変換

JSONオブジェクトから文字列へ変換するには、JSON.stringify を使います。

s = JSON.stringify(json);
console.log(s); // -> {"string":"文字列","int":2020,・・・（省略）

文字列に変換できれば、それをファイルに書き込んだり、APIに渡すデータとして指定するなど様々な用途として使用できます。

JSONデータを自由に扱えるようになろう

最近では、JSON形式のデータをプログラム内だけではなく、ログやインフラ等の設定情報、保存用データなど様々な部分で使われることが増えてきました。

プログラマブルなデータフォーマットとして保存することで、プログラムで自由に解析をしやすくする意図があります。

ちょっとしたJSON解析プログラムを作ることで、今までExcelで集計していた業務を効率化することが出来たり、プログラムによってチェックすることで作業ミスを防止することも出来ます。

こうした日頃の作業をプログラマブルに出来ないか考えてみるのも良いと思います。

今回はJavaScriptのJSON操作についてまとめました。

以上、参考になれば幸いです。