HTML+JavaScriptでこれから始める、REST APIを利用したアプリ開発 第2回目/「JSON」とは何か | デザインってオモシロイ -MdN Design Interactive-

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

2020.5.25 MON

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/

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

ニック(Takeshi Nick Osanai)

早稲田大学卒業後、株式会社アスキーでゲーム事業に従事。シックス・アパート株式会社でプロダクトマネージャー、ディベロッパーリレーションを担当後、2019年freeeへ入社。 AWS認定ソリューションアーキテクト(SAA)

twitter facebook このエントリーをはてなブックマークに追加 RSS

こんな記事も読まれています

この連載のすべての記事

アクセスランキング

5.18-5.24

MdN BOOKS|デザインの本

Pick upコンテンツ

現在