【JSON入門】JSONとは？JS相互変換について(stringify/parse)

こんにちは。JSONファイルについて、ご存じでしょうか。
本記事はJSONファイルについてと、基本的な扱い方についてご紹介します。

JSONファイルとは

JSONは「JavaScript Object Notation」で直訳すると、「JavaScriptのオブジェクト表記法」となります。

つまり、情報のやりとりができるテキストベースのデータ形式を表しています。
同じようなデータ形式で、XMLファイルが代表的な例としてよく挙げられています。

JSONの特徴は主にこちらの3点を満たしており、この特徴を持つことで、サーバ間の通信やさまざまなプログラミング言語との共有を可能にしています。

先ほどのJSONの良いところでも上げましたが、相互変換が可能なため、JSONはオブジェクトのように扱うことができます。

しかし、JSONはテキストデータであり、オブジェクトではありません。

こちらの例を見てください。

// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

// JSON
var json = { "name": "Hanako", "old": 18, "tel": "000-0000-2" };

テキストデータに変換する前のJSONは、連想配列に似た構造となっていますが、明確な違いがあります。
それはこちらです。

また、注意点として、カンマ、コロンが1つでも抜けているとJSONとして無効になる場合もあります。

この辺りを理解しておくだけでも、開発するときに違うと思います。

さっそく、試してみましょう。
今回はJSONとJavaScriptのオブジェクトとの、相互変換を行ってみます。

stringfy関数
・JavaScriptのオブジェクトからJSONへの変換
・JSONデータとして通信する前に変換することが多い

// object
var obj = { name: "Taro", old: 17, tel: "000-0000-1" };

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

parse関数
・JSONからJavaScriptへの変換
ファイルから読み込み後、プログラムで使用しやすいようにデコードする必要がある。

注意する点として、jsonはテキストベースなので全体をシングルクォートで括っています。

// JSON
var json = '{ "name": "Hanako", "old": 18, "tel": "000-0000-2" }';

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

いかがでしたでしょうか。
今回はJSONの基本的な知識と、基本的な扱い方について、ご紹介しました。
次回はJSON登録や更新などについて、ご紹介していきます。

良かったら次回も見てみてくださいね！

↓↓↓【JSON入門シリーズ♪】