【JavaScriptの応用】JSONデータを扱う方法

さまざまなWebアプリケーションで入出力データ形式として登場するJSON。
JSONは、数多くのプログラミング言語によるAPI通信時に利用されているため、耳にしたことがあるのではないでしょうか。

例えば、クライアントからサーバーへ情報を送信する際または逆の場合に、このJSONデータが使われます。JSONデータの構造を理解し扱い方を身につけてしまえば、JavaScriptをはじめとするさまざまな言語や場所で活かすことができます。

そこで今回は、JSONの概要や扱い方について解説していきます。

JSON

JSONとは、「JavaScript Object Notation」の略で、テキストベースのデータ形式のことです。
「JavaScript」と名が付いているように、JavaScriptのオブジェクト構文に従ったフォーマットであることから、JavaScript と親和性が高いことが特徴です。
実際には、PythonやPHPなどの他の言語でもサポートされており、汎用性が高い点も挙げられます。

JSONを利用するメリットはいくつかありますが、その中でもJavaScriptのオブジェクトの構文に非常に似ていることから、人間が理解しやすく簡潔に記載できるデータ形式であることが最大のメリットだと言えます。
また、XMLHttpRequest(XHR)よりも記述量が少ないJSONの方が読み込みが速いという利点もあります。

JSONのデータ構造

JSONのデータ形式は、JavaScriptのオブジェクト構文に似ている形式を持った文字列で表現されます。
また、オブジェクトと同じような文字列や数値、配列などのデータ型を扱うことが可能です。

以下は、JSONのデータ構造の例です。
各データは、{"要素": "値"}という形で記述します。

[
  {
    "id": 1,
    "name": "田中太郎",
    "job": "数学教師"
  },
  {
    "id": 2,
    "name": "山田花子",
    "job": "看護師"
  }
]

JavaScriptのオブジェクト構造と似ていることが感じられるのではないでしょうか。

JSONデータの扱い方

JSONを作成しただけでは、JavaScriptでデータを使用することはできません。
そこで、JSONとJavaScriptオブジェクトを相互変換するためのメソッドを用います。
これにより、JavaScriptオブジェクトをJSONに変換したり、JSONをJavaScriptオブジェクトに変換できるようになります。

実際に変換してみましょう。

JavaScriptオブジェクトからJSONに変換

JavaScriptオブジェクトをJSONに変換するには、JSON.stringify()というメソッドを使います。

// JavaScriptオブジェクト
const users = {
  users: [
    {
      "id": 1,
      "name": "田中太郎",
      "job": "数学教師"
    },
    {
      "id": 2,
      "name": "山田花子",
      "job": "看護師"
    }
  ]
}

// JSONへ変換
let jsonData = JSON.stringify(users);
console.log(jsonData);
// {"users":[{"id":1,"name":"田中太郎","job":"数学教師"},{"id":2,"name":"山田花子","job":"看護師"}]}

JSONからJavaScriptオブジェクトに変換

反対に、JSON形式のデータをJavaScriptオブジェクトへ変換するためには、JSON.parse()というメソッドを用います。
上記で取得したJSONデータをJavaScriptオブジェクトに変換すると以下のようになります。

// JavaScriptオブジェクトへ変換
let objData = JSON.parse(jsonData);
console.log(objData);
/*
{
  users: [
    {
      id: 1,
      job: "数学教師",
      name: "田中太郎"
    },
    {
      id: 2,
      job: "看護師",
      name: "山田花子"
    }
  ]
}
*/

これらのメソッドを用いるだけで、簡単にデータを相互変換できることが分かります。

上記の流れを踏まえると、サーバーからJSON形式のデータを受け取ることでデータをオブジェクトに変換することができ、さらにオブジェクトの各プロパティにアクセスすることができるようになります。

// プロパティにアクセス
let getUser = objData.users[0];
console.log(getUser.name); // "田中太郎"

これでサーバーから受け取ったデータをJavaScriptで制御することが可能になりました。

このようにJSONを用いることで、簡潔にかつ自由にデータのやり取りができることができるのです。

まとめ

今回は、JavaScriptにおけるJSONの扱い方について解説しました。

JavaScriptのオブジェクト構文と似ていることから、ユーザーにとって扱いやすいデータ形式だとイメージできたのではないでしょうか。

JSON.stringify()やJSON.parse()の代表的なメソッドを覚えておくと、JSONとJavaScriptオブジェクトを簡単に相互変換することができます。
JSONは、さまざまなシステムと連結するためのAPIを構築する際に、非常に役に立ちます。API通信を行う際には、ぜひJSONを活用してみてください。