カテゴリー
コンピューター

【JavaScript】JSON そのものと操作方法を整理♪

JSON の仕様について整理したポイント

  • 公式ページ → JSON
  • JavaScript Object Notation → JSON
  • データ転送フォーマット
  • 実態としては単なるテキスト
  • JSON は「名前」と「値」でデータを扱う。名前と値はセミコロンで区切る。
    • 名前は、名前の他にメンバー、キー、プロパティなどとも呼ばれる印象
    • 値は、値またはバリューと呼ばれる印象
  • 名前は、二重引用符「”」で囲む。
  • 値の種類
    • 文字列。二重引用符「”」で囲む。
    • 数字。
    • true、もしくは、false。いわゆる boolean
    • null
    • オブジェクト。JSON では名前と値のペアの集合を挿す。
    • 配列
  • データの構造は配列 [] とオブジェクト {} で定義
  • JSON では二重引用符、ダブルクオーテーション「”」のみが許される。「’」は使用不可。

JSON を JavaScript で扱うときのポイント

  • ネイティブ JSON を使う | MDN
  • JSON.parse() メソッド → JSON.parse() – JavaScript | MDN
    • JSON データから JavaScript オブジェクトへ変換する。つまり、JSON フォーマットで記述された文字列を、JavaScript オブジェクトへ変換する。
    • JSON データを作りたいときは、オブジェクトを作り、それから JSON.parse() メソッドで変換する。
  • JSON.stringify() メソッド → JSON.stringify() – JavaScript | MDN
    • JavaScript オブジェクトを JSON データにシリアライズする。つまり、JavaScript オブジェクトを JSON フォーマットの文字列に変換する。
    • 受け取った JSON データからメンバーの値を取得したいときは、JSON.stringify() メソッドで JavaScriptのオブジェクトに変換し、そのオブジェクトから値を取得する。
  • JSON データ では関数や正規表現リテラルは使用できない。よって、JSON.stringify() メソッドを通すと関数は除去され、それ以外の部分が JSON データへと変換される。
  • JSON – JavaScript | MDN

JSON を JavaScript で扱うときの例としてのコード

Google Chrome の JavaScript コンソールを使って、次のコードで使い方を確認いたしました。

// JavaScript オブジェクト
var dog = {
    name: "Fido",
    dob:  new Date(),
    legs: [1, 2, 3, 4],
    getName: function () {
        return this.name;
    }
};
// Object の内容を出力。getName メソッドが存在する。
console.log(dog);
var jsonstr = JSON.stringify(dog);
// ここでjsonstrの内容は:
// {"name":"Fido","dob":"2015-07-25T08:43:37.999Z","legs":[1,2,3,4]}
// getName メソッドが除去される。
console.log(jsonstr);

// getName メソッド除去後の JSON データを JavaScript オブジェクトに戻しても、
// getName メソッドは元に戻らない。
console.log(JSON.parse(jsonstr));

この結果、次の図のようになりました。

JavaScript を使って JSON を操作する方法の例

それぞれ見ていきますわ。

console.log(dog); の結果

JavaScript オブジェクトを生成し、それをそのまま表示したものとなりますの。当然、生成した内容がすべて漏れ無く表示されておりますわ。

Object {name: "Fido", dob: Sat Jul 25 2015 17:43:37 GMT+0900 (東京 (標準時)), legs: Array[4]}
    dob: Sat Jul 25 2015 17:43:37 GMT+0900 (東京 (標準時))
    getName: ()
    legs: Array[4]
    name: "Fido"
    __proto__: Object

console.log(jsonstr); の結果

JavaScript オブジェクトを JSON データに変換した結果を表示しております。

単なる文字列ですの。

また、getName メソッドが表示されておりません。JSON データ では関数や正規表現リテラルは使用できないため、除去されておりますの。

{"name":"Fido","dob":"2015-07-25T08:43:37.999Z","legs":[1,2,3,4]}

console.log(JSON.parse(jsonstr)); の結果

オブジェクトから JSON へと変換した dog をもう一度オブジェクトに戻しております。

プロパティと値はオブジェクトに戻っておりますけれども、メソッドが抜けており、ございません。これは、変換元の jsonstr にそもそも存在しなかったからですわ。

また、日時である dob の値も最初の dog とは違います。JavaScript で扱うときには要注意ですの。

Object {name: "Fido", dob: "2015-07-25T08:43:37.999Z", legs: Array[4]}
    dob: "2015-07-25T08:43:37.999Z"
    legs: Array[4]
    name: "Fido"
    __proto__: Object

おわりに

JSON とはなにか、JavaScript ではどのように扱ったらよいか、は次の本で非常に簡潔にまとまっておりました。

今までも JSON を扱ったことはございましたが、この本の記述のおかげさまでスッキリと整理できましたの♪ありがとう存じます。

以上です。

コメントを残す