【JavaScript】JSONを扱う方法とは。JSONについてまとめてみた。

本記事の目次

JSONとは
- JSONのフォーマット（構造）
- JSONで表現できるデータ種類
JavaScriptオブジェクトをJSONへ変換する
JSONをJavaScriptオブジェクトへ変換する
まとめ

JSONとは

JSONとは、「JavaScript Object Notation」の略で、構造化されたデータを表現するためのデータ形式のことを指します。

名前の通りJavaScriptのオブジェクトと同じような構文をしていて、WEBアプリケーションなどでデータをやり取りを行う際によく用いられます。

JSONファイルの拡張子は「.json」です。

JSONはJavaScriptだけではなく、PHPやPythonなどの他のプログラミング言語でも利用することができます。

JSONのフォーマット（構造）

JOSNは、JavaScriptのオブジェクトまたは配列の形で記述します。

{
  "name" : "taro",
  "age" : "25",
  "height" : "178"
}

[ "red", "blue", "green", "pink" ]

JavaScriptのオブジェクトや配列のように記述されているため、JavaScriptで扱いやすいというわけです。

JSONとJavaScriptのオブジェクトや配列と異なる点としては以下が挙げられます。

JSONはプロパティもダブルクォート「” “」で囲む必要がある
JSONをJavaScriptで扱う際、プロパティや文字列がシングルクォートで囲まれているとエラーになる。

JavaScriptのオブジェクトと完全に同等ではないため、JSONを使用する際には気をつけなければいけません。

JSONで表現できるデータ種類

JSONで表現できるデータの種類には以下があります。

文字列 …… ダブルクォーテーションで囲んで記述する
数値 …… 数値を記述する
null …… nullと記述する
bool …… ture 又は false を記述する
オブジェクト …… 入れ子で記述できる
配列 …… 入れ子で記述できる

基本的にはJavaScriptのオブジェクトや配列と同じですが、以下の違いについては注意しましょう。

JSON	JavaScriptのオブジェクト（配列）
文字列はダブルクォーテーション「” “」で囲む	文字列をシングルクォーテーション「’ ‘」で囲める
変数が使用できない	変数が使用できる
末尾がカンマ「,」では終われない	末尾がカンマ「,」でもよい
プロパティは文字列である必要がある	シングルクォーテーション「’ ‘」やダブルクォーテーション「” “」で囲まなくても良い

また、JSONをJavaScriptで扱うためにはJSONをJavaScriptオブジェクトへ変換する必要があります。

変換するための便利なメソッドが用意されていますので、みていきましょう。

JavaScriptオブジェクトをJSONへ変換する

JavaScriptオブジェクトをJSONへ変換するにはJSON.stringify()メソッドを使用します。

メソッドの引数にJSONへ変換したいJavaScriptオブジェクトを指定します。

// JavaScriptオブジェクト
const object = {
  "name" : "taro",
  "age" : "25",
  "height" : "178"
}

// JSONへ変換する
const json = JSON.stringify(object);

console.log(json); 
// '{"name" : "taro", "age" : "25", "height" : "178"}'

JSONをJavaScriptオブジェクトへ変換する

JSONをJavaScriptオブジェクトへ変換するにはJSON.parse()メソッドを使用します。

メソッドの引数にJavaScriptオブジェクトへ変換したいJSONを指定します。

// JSON
const object = '{
  "name" : "taro",
  "age" : "25",
  "height" : "178"
}'

// JavaScriptオブジェクトへ変換する
const jsObject = JSON.parse(object);

console.log(jsObject);
// {"name" : "taro", "age" : "25", "height" : "178"}

JSON.parse()メソッドとJSON.stringify()メソッドは、対となるメソッドであると言えます。