HTML+JavaScriptでこれから始める、REST APIを利用したアプリ開発
第2回目／「JSON」とは何か

2020年2月3日　TEXT：ニック

前回の記事では、REST API の基本的な概念と、APIから取得できるJSON(ジェイソン)について触れました。今回は、JSONについて詳しく記述します。

JSONとは

JSONとは「JavaScript Object Notation」の略称です。名称に「JavaScript」が含まれていますが、JavaScript に限らず、どんなプログラミング言語でも処理することができます。

本稿を執筆時点(2020年)、多数のREST APIはJSON形式でレスポンスデータを返しています。
JSONには以下のような特徴があります。

・データ構造が把握しやすい
・テキストデータで記述されており、可読性が高い

JSONは、複雑なデータ構造を整理して記述することができます。また、人間の目で見たときにデータの概要を把握しやすいという特徴があります。

JSONのサンプル

早速ですが、JSONのサンプルを見てみましょう。

{ 
   "name":"taro",
   "age":”30”,
   "class":"A"
}

このJSONは、ある人物の情報を表したデータです。左辺がデータのプロパティ名で、右辺が値を表します。サンプルのJSONからは、以下のような情報を読み取ることができます。

・名前(name) は taro さんである
・年齢(age) は30歳である
・クラス(class) はAである

JSONでは、プロパティ名、および文字列の値をダブルクォートで囲むことになっています。値が数値やBooleanの場合、ダブルクォートで囲む必要はありません。下記のJSONは、「age」の値がダブルクォートで囲まれていませんが、正しいJSONデータです。

{ 
   "name":"taro",
   "age":30,
   "class":"A"
}

JSONとオブジェクト

JavaScript には「オブジェクト」というデータ形式が存在します。JSONとJavaScript のオブジェクトは見た目が似ているので混同されがちですが、明確に違いがあります。

下記は、サンプルのJSONをオブジェクト形式で記述したものです。

{
  name : “taro”,
  age : 30, 
  class  : “A”
}

JavaScript のオブジェクトでは、名前をダブルクォートで囲んでも囲まなくても良い、というルールがあります。JSONとよく似ていますが、「プロパティ名をダブルクォートで囲む」というJSONのルールに従っていません。このデータは、JavaScriptのオブジェクトを表しています。

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

JavaScriptのコードでは、取得したJSONをオブジェクトに変換して使うケースが多くみられます。JSONをオブジェクトに変換するときには JSON.parse という関数を使います。

先ほどのサンプルのJSON

{ 
   "name":"taro",
   "age":30,
   "class":"A"
}

が「json」という変数に格納されている場合、以下のようなコードで「obj」というオブジェクトに変換後、値を取得できます。

const obj = JSON.parse(json);

console.log(obj.name);
// taro と表示されます

console.log(obj.age);
// 30と表示されます

階層化されたJSON

JSONでは、複雑なデータを階層構造で表現することができます。以下のデータを見てみましょう。

{ 
   "name":"taro",
   "age":30,
   "class":"A",
   "family":{ 
      "father":"ichiro",
      "mother":"hanako",
      "brother":{ 
         "name":"jiro",
         "age":20,
         "class":"B"
      }
   }
}

先述したサンプルのJSONにデータが加わって、さらに複雑になっています。

　●「家族」という項目が追加され、以下のデータが含まれている
　　〇father(父)
　　　■父の名前は「ichiro」である
　　〇mother(母)
　　　■母の名前は「hanako」である
　　〇brother(兄弟)
　　　■brother というデータには、さらに「name(名前)」「age(年齢)」「class(クラス)」というデータ項目が含まれている

このように、JSONは複雑なデータを階層構造で表示することができます。

JSONの配列

複数のJSONデータをまとめ、配列として生成する場合があります。以下は、複数のメンバーのJSONデータを配列としてまとめたケースです。

[{ 
   "name":"taro",
   "age":30,
   "class":"A"
},
{ 
   "name":"jiro",
   "age":25,
   "class":"B"
},
{ 
   "name":"saburo",
   "age":35,
   "class":"C"
}]

この例では、3つのJSONデータが配列に格納されています。配列内のJSONからデータを取得・表示するコードをご紹介します。

const json = [{ 
   "name":"taro",
   "age":30,
   "class":"A"
},
{ 
   "name":"jiro",
   "age":25,
   "class":"B"
},
{ 
   "name":"saburo",
   "age":35,
   "class":"C"
}];

console.log(json[1].name);  //  jiroと表示される

REST APIを利用した開発をしていると、階層の深いJSONデータが、配列としていくつも格納されているケースによく出会います。そんな時は落ち着いて、データ構造を注意深く確認しながら開発を進めると良いでしょう。

参考情報

JSONは、APIを利用した開発を行うときに、避けて通れないデータフォーマットです。これまでなじみがなかった方も、ぜひこの機会に理解を深めてみてください。

JSONをより深く理解するための情報をご紹介します。合わせてご一読ください。

・JSONの紹介

・JSONオブジェクトの基本

・JSON.parse

今回のまとめ

・JSONはREST API で標準的に使われているデータフォーマットである
・JSONは「プロパティ名をダブルクォートで囲む」というルールがある
・JSONは多重構造で複雑なデータを管理することができる
・配列内に複数のJSONデータを格納することができる

freee も REST API を公開しています。

freeeと開発者が共同で運営しているユーザーコミュニティ「freee Open Guild」では会員を募集しています。不定期に開催しており、freee、API、そのほかの技術領域について勉強会を開催しています。

https://freee-platform.connpass.com/

登録は無料ですので、ぜひご登録ください！