最新！JavaScript入門講座ーJSONの基本をわかりやすく解説

Webアプリケーション等のWeb上では様々なデータがやりとりされています。そのデータのやりとりに使われているデータの形式があります。それがJSONです。JSONはWeb開発をするのなら必ず押さえておかなければならない知識です。

今回は、初学者の方向けにJSONについて解説していきます。

本記事のペルソナ

JSONについて学びたい方
データの扱いについて学びたい方
JavaScript初学者の方

第29回クラスの継承

第31回 JSONオブジェクト

JSONの解説
まとめ
参考文献

JSONの解説

JSONとは何か

JSONとはJavaScript Object Notationの略名で、データ記述言語です。
なぜJavaScriptの名前が入っているのかというと、JavaScriptのオブジェクトリテラルに則って作られた軽量データフォーマットであるからです。

なので、JSONはJavaScriptのオブジェクトに非常によく似た書き方になります。

JavaScriptと名前にあるのでJavaScriptだけしか使えないと思われるかもしれませんが、他の言語でも、JSONは対応しています。

JSON対応の言語

Java
PHP
C#
Python3
C++

JSONは主な使われ方として、Ajax・非同期通信、RestAPIなどで多く使われています。

JSONのデータの型

JSONでは様々なデータの型を扱うことが可能です。JSONで扱うことのできる型は下記です。

文字列
数字
null
真偽値
オブジェクト
配列

JSONではこれらの型を組み合わせてデータを生成することが可能です。

JSONの使い方

では、JSONデータの使い方について解説していきます。JSONデータは次のような書き方をします。

書き方

const json = {
“プロパティ名” : “値”,
{
“プロパティ名”:”値”,
“プロパティ名”:”値”,
},
[
{
“プロパティ名”:”値”,
}
]
}

上記は一例になりますが、このような書き方になります。JavaScriptのオブジェクトに似ていますね。しかし、JSONには制限があります。それは、プロパティ名はかならずダブルクォーテーションで囲む必要があります。

また、JavaScriptとして扱う場合は拡張子はjsのままでもいいですが、他の言語、Python3やJavaで扱う場合はjsonという拡張子にすることで対応できます。

では、実際にサンプルを見ていきましょう。

let json = {
    "company":"Mastercard Worldwide",
    "market":"NYSE",
    "ticker":"MA",
    "location":"US New York",
    "kind":"finance",
    "content":"fund settlement",
};

console.log(json);
console.log(json.company);
console.log(json.ticker);
console.log(json.kind);

$ node json.js

{
  company: 'Mastercard Worldwide',
  market: 'NYSE',
  ticker: 'MA',
  location: 'US New York',
  kind: 'finance',
  content: 'fund settlement'
}
Mastercard Worldwide
MA
finance

JSONは基本オブジェクト同様に定義し、呼び出します。また、それぞれのプロパティにアクセスする場合はピリオドを使います。

また、JSONを配列のようにすることも可能です。


let jsons = [
    {
        "name":"nvidia",
        "market":"NASDAQ",
        "ticker":"NVDA",
        "location":"US California",
        "kind":"electrical equipment",
        "content":"semiconductor",
        "funding":"1993/4",
        "stock":{
            "stock price":827.94,
            "PER":117,
            "PBR":30,
            "EPS":7.02,
            "BPS":27.4,
        }
    },
    {
        "name":"Johnson & Johnson",
        "market":"NYSE",
        "ticker":"JNJ",
        "location":"New Jersey",
        "kind":"service",
        "content":"holding company",
        "funding":"1887/11",
        "stock":{
            "stock price":168.83,
            "PER":30.2,
            "PBR":7.02,
            "EPS":5.59,
            "BPS":24.2,
        }
    }
];

console.log(jsons[0]);
console.log(jsons[0].name);
console.log(jsons[0].market);
console.log(jsons[1].stock);
console.log(jsons[1].ticker);

$ node json.js

{
  name: 'nvidia',
  market: 'NASDAQ',
  ticker: 'NVDA',
  location: 'US California',
  kind: 'electrical equipment',
  content: 'semiconductor',
  funding: '1993/4',
  stock: { 'stock price': 827.94, PER: 117, PBR: 30, EPS: 7.02, BPS: 27.4 }
}
nvidia
NASDAQ
{ 'stock price': 168.83, PER: 30.2, PBR: 7.02, EPS: 5.59, BPS: 24.2 }
JNJ

JSONを配列のように扱う場合は同じく、添字を使うことでアクセスできるようになります。もちろん、存在しないものを指定した場合はエラーになります。