PR

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

JavaScript
この記事にはアフィリエイト広告および広告が含まれています。

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

JSONファイルとは

どういうファイルなの?

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

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

JSONの良いところ

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の基本的な使い方

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

オブジェクトからJSONへ(エンコード encode)

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

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

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

JSONからオブジェクトへ(デコード decode)

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入門シリーズ♪】

タイトルとURLをコピーしました