JavaScriptのJSONを理解してデータを活用できるようにしよう

プログラミング
JavaScriptでよく使われる、JSONについて解説する記事です。JSONとは何なのか、JavaScriptのオブジェクトとどのように異なるのか、などのJSONの基本について詳しく解説します。JavaScriptでJSONを使うためのエンコードとデコードの仕方も紹介します。
JavaScriptのJSONを理解してデータを活用できるようにしよう

JavaScriptで最近よく使われるようになっているJSON。データの受け渡しをするときにJSONを使えばとても便利なので、インタラクティブなサイトでは必須の技術といえるでしょう。
この記事では、JSONを使い始めるために必要な基本的な知識を実際のコードを紹介しながら解説していきます。

JSONはテキストフォーマット


JSONとは

JSONとは「JavaScript Object Notation」の略で、その名前の通りオブジェクトを表記するための書き方の決まりごとです。もともとはJavaScriptと連携する他の言語とのやりとりをするために考え出されたものです。しかしJavaScriptだけでなく、複数の言語間のやりとりでも使えるため、さまざまなシーンでとても重宝されています。

ここで言うオブジェクトを表記するとは、オブジェクトの構造のままテキストとして表記することです。通信のために使うデータは、より軽量であることが求められますが、データの構造のなかでより軽量なのはテキストデータです。ですから、オブジェクトの構造になっているデータをより効率よく通信させるためには、テキストデータに変換することが必要です。

つまり、オブジェクトの構造との互換性を持ちながらテキストデータにすることが求められるのです。そこで登場したのがJSONです。テキストデータでありながらオブジェクトの構造のデータを持つことができ、さらに、テキストデータの軽量さを活かして、通信のためのデータとしても最適な形になっています。

オブジェクトとの違い

JavaScriptの内部でJSONは、JavaScriptのオブジェクトであるかのように扱えます。JavaScriptのオブジェクトをJSONに変換したり、JSONとして定義した変数をJavaScriptのオブジェクトのように変換したりすることもできるからです。しかし、JSONはオブジェクトと非常に似ているものの、実際はテキストデータです。いったいJSONはオブジェクトとどう異なるのでしょうか。

JavaScriptのオブジェクトは、オブジェクトという形式の型の値です。ですから、オブジェクトである変数のメンバーとしてオブジェクト内の値を参照したり、代入したりすることができます。

しかし、JSONデータは、オブジェクトのメンバーを参照するときのように扱うことができません。また、JSONデータは、JavaScriptのオブジェクトと違って、オブジェクトを定義するときのプロパティをダブルクォーテーションでくくる必要があるという特徴も、違いのひとつです。

// object
var d = { name: "Ronald", number: 7, nation: "Portugal" };
// JSON
var d = { "name": "Ronald", "number": 7, "nation": "Portugal" };

ただ、このままではまだJSONにはなっていません。
テキストデータ化する前のJSONは、オブジェクトの構造や連想配列の構造とほぼ同じで、pushメソッドでメンバーを追加したり、deleteメソッドでメンバーを削除したりすることも可能です。このようなオブジェクトの構造になっているJSONをテキストのデータにするには、エンコードする必要があります。

オブジェクトのような構造からテキストのJSONデータになってはじめて、通信に適したデータになるのです。テキスト化されたJSONデータは、もうオブジェクトでも連想配列でもありません。そのためドットでつないでメンバーを参照したり、pushメソッドやdeleteメソッドを使ったりすることもできません。

JSONの使い方

JSONへのエンコードをするには、stringifyというメソッドを使います。stringifyは文字化という意味合いですから、オブジェクトのような構造として定義したJSONデータを、実際にテキストデータに変換するという意図があるのです。strignifyメソッドの1つ目の引数に、エンコードする前のまだオブジェクトのようなJSONを渡します。

var json = JSON.stringify(d);
console.log(json);

stringifyの返り値は、文字列です。テキストとしてのJSONデータです。オブジェクトの構造を保持しながら、見事にテキストデータ化されているのがよくわかります。オブジェクトで言えばプロパティの部分には、ダブルクォーテーションのくくりがあるのがわかります。

JSONからのデコード

では、受け取った文字列のJSONデータを、JavaScriptのオブジェクトの形式に変換してみましょう。変換するためには、parseメソッドを使います。parseは解析するというような意味合いがあり、テキストデータとして受け取るJSONデータを、JavaScriptのオブジェクトとして解釈するための解析と変換をしてくれるメソッドです。parseメソッドのひとつめの引数に、テキストデータであるJSONデータを渡します。

var d = JSON.parse(json);
console.log(d);

変換されたparseの返り値は、文字列ではなく、JavaScriptのオブジェクトになっています。JSONデータのときには存在した、プロパティ部分のダブルクォーテーションがなくなっているのが特徴です。通信を通してデータを受け取ったなら文字列としてそのJSONデータを扱うよりも、JavaScriptのオブジェクトとして扱った方がより便利に使えるため、受け取ったら変換するというのは自然な流れなのです。

まとめ

JSONは文字列であり、JavaScriptのオブジェクトと違いがあります。通信に送り出す前にJSONデータをオブジェクトから変換したり、通信を受け取った後に、JSONデータからオブジェクトに変換したりして、適宜必要な操作ができるようになりましょう。

この記事のキーワードに関する勉強会・イベントを探す

TECH PLAYでは、ITエンジニア向けの勉強会・イベント情報を提供しています。
興味のある方はぜひご参加ください。


おすすめのコラム