最新！JavaScript入門講座ーJSONオブジェクトを解説

JavaScriptでは軽量なデータフォーマットであるJSONに対応しています。JavaScriptでは、JSONを扱うオブジェクトが存在します。JSONはJavaScriptに対応していますが、データの型がJavaScript上とJSONでは異なっています。

そこで、JSONオブジェクトはJOSNをJavaScriptのオブジェクトとして変換してくれます。今回は、JavaScriptのJSONオブジェクトについて解説していきます。

本記事のペルソナ

JSONについて学びたい方
JSONのオブジェクトについて学びたい方
JSにおけるJSONの操作について学びたい方
JavaScript初学者の方

第30回 JSONの基本

第32回 Dateオブジェクト

JSONオブジェクトの解説
まとめ
参考文献

JSONオブジェクトの解説

JSONオブジェクトとは

JavaScriptでは、JSONをjsファイルで定義し、呼び出すことが可能です。しかし、JavaScriptのオブジェクトとJSONではデータの形式が異なります。そこで、ビルトインオブジェクトであるJSONオブジェクトを使い、JSON形式の文字列をJavaScriptのオブジェクトに変換するオブジェクトがあります。

このJSONオブジェクトを使うことによって、JavaScriptでのオブジェクトと同様に扱うことが可能なのです。

JSONからオブジェクトへの変換(JSON.parse)

最初にJSON形式からオブジェクト形式へ変換する例を見ていきましょう。

書き方

let 変数名 = JSON.parse(json)

書き方は上記のようになります。
JSONはもともとJavaScriptに組み込まれているオブジェクトです。

これを使用したサンプルを見てみましょう。

let etf = '[{ "ticker" : "SPY", "name" : "SPDR S&P 500 ETF","price" : 440.63,"item":["apple","amazon","micro soft","Face Book","Google"]},{ "ticker" : "QQQ", "name" : "インベスコ QQQ トラスト・シリーズ","price" : 360.95,"item":["apple","amazon","micro soft","Face Book","Google","Adobe"]},{ "ticker" : "VOO", "name" : "バンガード S&P500 ETF","price" : 399.37,"item":["apple","amazon","micro soft","Face Book","Google","Adobe"]}]';

console.log(etf);

let obj = JSON.parse(etf);
console.log(obj);

$ node json.js

[{ "ticker" : "SPY", "name" : "SPDR S&P 500 ETF","price" : 440.63,"item":["apple","amazon","micro soft","Face Book","Google"]},{ "ticker" : "QQQ", "name" : "インベスコ QQQ トラスト・シリーズ","price" : 360.95,"item":["apple","amazon","micro soft","Face Book","Google","Adobe"]},{ "ticker" : "VOO", "name" : "バンガード S&P500 ETF","price" : 399.37,"item":["apple","amazon","micro soft","Face Book","Google","Adobe"]}]
[
  {
    ticker: 'SPY',
    name: 'SPDR S&P 500 ETF',
    price: 440.63,
    item: [ 'apple', 'amazon', 'micro soft', 'Face Book', 'Google' ]
  },
  {
    ticker: 'QQQ',
    name: 'インベスコ QQQ トラスト・シリーズ',
    price: 360.95,
    item: [ 'apple', 'amazon', 'micro soft', 'Face Book', 'Google', 'Adobe' ]
  },
  {
    ticker: 'VOO',
    name: 'バンガード S&P500 ETF',
    price: 399.37,
    item: [ 'apple', 'amazon', 'micro soft', 'Face Book', 'Google', 'Adobe' ]
  }
]

サンプルを実行するとこのようになります。
1つめの出力はJSONをそのまま表示します。そして、2つめの出力はJSONをオブジェクトに変換した形で出力しています。

オブジェクトをJSONへ変換(JSON.stringify)

続いてはオブジェクトをJSONに変換するメソッドについて解説していきます。
実際のサンプルを見ていきましょう。

let etf = [
    {
        name : "SPDR ポートフォリオ S&P500 高配当ETF",
        ticker : "SPYD",
        price:39.28,
        item:["シーゲート・テクノロジー","パブリック・ストレージ","アイアンマウンテン","ウェルタワー","ONEOK"],
    },
    {
        name:"バンガード 米国高配当株式ETF",
        ticker:"VYM",
        price:103.75,
        item:["JPモルガン・チェース","ジョンソン・エンド・ジョンソン","エクソンモービル","コムキャスト"],
    },
    {
        name:"iシェアーズコア 高配当株ETF",
        ticker:"HDV",
        price:96.32,
        item:["エクソンモービル","ジョンソン・エンド・ジョンソン","フィリップ・モリス","シェブロン","プロクター・アンド・ギャンブル"],
    },
];

let obj = JSON.stringify(etf);
console.log(obj);

$ node json.js

[{"name":"SPDR ポートフォリオ S&P500 高配当ETF","ticker":"SPYD","price":39.28,"item":["シーゲート・テクノロジー","パブリック・ストレージ","アイアンマウンテン","ウェルタワー","ONEOK"]},{"name":"バンガード 米国高配当株式ETF","ticker":"VYM","price":103.75,"item":["JPモルガン・チェース","ジョンソン・エンド・ジョンソン","エクソンモービル","コムキャスト"]},{"name":"iシェアーズコア 高配当株ETF","ticker":"HDV","price":96.32,"item":["エクソンモービル","ジョンソン・エンド・ジョンソン","フィリップ・モリス","シェブロン","プロクター・アンド・ギャンブル"]}]

JavaScriptで定義したオブジェクトをJSONに変換します。JSONにすると、文字列として認識されます。なので、lengthを使えば総文字数を取得できたりします。