さまざまなWebアプリケーションで入出力データ形式として登場するJSON。
JSONは、数多くのプログラミング言語によるAPI通信時に利用されているため、耳にしたことがあるのではないでしょうか。
例えば、クライアントからサーバーへ情報を送信する際、または逆の場合に、このJSONデータが使われます。JSONデータの構造を理解し、扱い方を身につけてしまえば、JavaScriptをはじめとするさまざまな言語や場所で活かすことができるのも実情です。
そこで今回は、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オブジェクトは以下のようにしてJSONに変換することができます。
//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を活用してみてください。
JavaScript関連記事
