JavaScriptで JSONを使う方法、parse() によるdecode/ stringify()によるencodeの使い方を解説|Javascript入門講座(15)

JavaScript
この記事は約7分で読めます。

はじめに

 JavaScript入門講座の第十五弾として、JavaScriptでJSONを使う方法ついて紹介します。

 この記事を読むと次の疑問について知ることができます。

  • JSONとは?
  • CSV、 XML、 JSON、JavaScriptで同じ表データを表現した場合どうなるの?
  • JSONで扱えるデータ型はなにがあるの?
  • JavaScriptのデータをJSON化するJSON.stringify()メソッド(encode)はどうするの?
  • JSONデータをJavsScriptで扱えるデータ形式にするJSON.parse()メソッド(decode)はどうするの?

 JavaScript入門講座(14)では、JavaScriptのjQueryについて解説してきました。

 ここでは、JavaScriptでJSONを使う方法について深堀していきます。

JSONとは?

 JSONとは、JavaScript Object Notationから取られた略語であり、2001年にアメリカのプログラマーで起業家であるDouglas Crockford氏が発見(この時すでにJSON形式のデータ記述があって、それを発見したため)し、命名したJavaScriptのオブジェクトに近い表記のテキストベースのデータ記述言語と言うことができます。

 データ記述言語ですので、JavaSprict言語だけでなく、他の言語でも利用ができように、プログラム間でのデータの受け渡しに利用されているのが現状です。

 その他に、データを記述する記法として、CSV、XMLがありますが、現在では、プログラム間でのデータのやり取りはJSON形式が多いようです。

CSV、 XML、 JSON、JavaScriptで同じ表データを表現した場合

 次のような表データがあるとしましょう。

ID Name Color
100 チューリップ
200 芝桜 ピンク

CSV(Comma-Separated Values)で、表データを表現するると次のようになります。

ID , Name , Color
100 , チューリップ , 赤
200 , 芝桜 , ピンク

XML(Extensible Markup Language)で、表データを表現するると次のようになります。

<?xml version='1.0' encoding='utf-8'>
  <flowers>
    <flower>
      <ID>100</ID>
      <Name>チューリップ</Name>
      <Color>赤</Color> 
    </flower>
    <flower>
      <ID>200</ID>
      <Name>芝桜</Name>
      <Color>ピンク</Color>
     </flower>
  </flowers>

JSONで表データを表現するると次のようになります。

{
    ["ID", "100", "Name", "チューリップ", "Color", "赤"],
    ["ID", "200", "Name", "芝桜", "Color", "ピンク"]
}

JavaScriptで表データを表現するると次のようになります。

const flowers = [
  ["ID", "100", "Name", "チューリップ", "Color", "赤"],
  ["ID", "200", "Name", "芝桜", "Color", "ピンク"],
]

 どうですか?

 JavaScriptとJSONの表記が大変似ており、記述量も少なくて済むことが分かります。

 ゆえに、プログラム間のデータの受け渡しに利用されることもうなずけると思います。

 それでは、JSONでは、どのようなデータが扱えるのでしょうか?

JSONで扱えるデータ型

 前述では、配列をJSONで扱いましたが、その他に以下のデータ型を扱えます。

JSONで扱える
データ型
書き方
文字列型 文字列はダブルクォーテーション(“)で挟む。 {"name " :  "チューリップ"}
数値型 数値はダブルクォーテーションで挟まない。 {"age" :  50}
null型 nullはすべて小文字で書く {"id" :  null}
真偽型 booleanの値(true or false)の指定も可能。数値と同じくダブルクォーテーションは必要なし。 {"a" : true , "b" : false}
配列 配列を使いたい場合は [] を使い、配列内の要素はカンマで区切ることで複数入力が可能

{
["ID": "100", "Name": "チューリップ", "Color": "赤"], ["ID": "200", "Name": "芝桜", "Color": "ピンク"]
}

オブジェクト オブジェクトの中にオブジェクトを入れることも可能


”id” :  "100"
"name" :  "鈴木"
”attribute” :  {
    "sex" :  "male",
     "birthplace "  :  "tokyo"}

JavaScriptのデータをJSON化するメソッド(encode)

  JavaScripのデータをJSON化(JSON形式のデータ)するには、JSON.stringify()メソッド(encode)を使います。

 書き方は次のようになります。

JSON.stringify( value )
ここで、
 value : JSON形式に変換(encode)する値
 ここでは、constで変数オブジェクトflowers宣言して、JSON.stringify()メソッドでJSON化して見たいと思います。
// flowersのオブジェクト宣言
const flowers = [
{"ID":"100", "Name": "チューリップ", "Color": "赤"},
{"ID": "200", "Name":"芝桜", "Color": "ピンク"},
]
//flowersオブジェクトの0インデクスのNameをコンソールに出力、結果:チューリップ
console.log(flowers[0].Name);
// flowersオブジェクトをJSON形式にencode
const flowers1 = JSON.stringify(flowers);
// JSON化したデータflowers1の0インデクスのNameをコンソールに出力しても、JSON形式なので、結果は「undefined」とでる。
console.log(flowers1[0].Name);

JSONデータをJavsScriptで扱えるデータ形式にするJSON.parse()メソッド(decode)

 次は、先ほどの逆でJSON形式のデータをJavaScriptで扱えるデータ形式にする際に使うメソッドが、JSON.parse()になります。

 その書き方は次のようになります。

JSON.parse(text )
ここで、
 text : JavaScript形式に変換(decode)するJSONの文字列

 上述のJSON.stringify()メソッドでJSON化したデータオブジェクトflowers1を、再度、JavaScriptで利用できる形式(decode)にしてみましょう。

// JSON形式のflowers1データをJavaScriptで利用できるデータ形式に変換(decode)したものをflowers2に代入
const flowers2 = JSON.parse(flowers1);
// flowers1をJavaScript形式に変換したFlowers2の0インデックスのNameをコンソールに出力、結果:チューリップ
console.log(flowers2[0].Name);

わりに

 何だったでしょうか?

 JSONとは?、CSV、 XML、 JSON、JavaScriptで同じ表データを表現した場合どうなるの?、JSONで扱えるデータ型はなにがあるの?、JavaScriptのデータをJSON化するJSON.stringify()メソッド(encode)はどうするの?、JSONデータをJavsScriptで扱えるデータ形式にするJSON.parse()メソッド(decode)どうするの?などのついて解説してきました。

 この記事があなたにとって少しでもお役に立てればこれほど嬉しいことはありません。

以上です。

コメント

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