こんにちは!しーま(@s59shima)です。
いつもブログをご覧いただきありがとうございます。
この記事では、こんな疑問を持った人に向けて記事を書きました。

JSONで扱えるデータの種類って何がある!?
これからJSONについて学習する方にはおすすめの記事です。
JSONとは
Javascript object Notationの略。
プログラム間でデータをやりとりする時に使用されるデータフォーマットになります。
名前と値をペアとして保持し、4種類の値が使用できます。
JSONの表示形式
”名前”:値の書式で、名前はダブルクォーテーションで括ります。拡張子は【.json】です。
名前と値の間にはコロンが入ります。
値に特殊文字(スラッシュ・改行・クォーテーション)を扱う場合は、少し書き方が変わります。
{ ”名前”:値 }
複数ある場合 ※カンマ区切りで、名前:値のペアを繰り返します。
{ ”名前”:値, ”名前”:値, ”名前”:値・・・ }
JSONの値は4種類
JSONの値は以下の4種類です。
- 文字列
- 数値
- 真偽値(true / false)
- 配列
実際の使用方法をサンプルコードで確認しましょう!
{
"from" : "okinawa",
"age" : 29,
"male" : true,
"code" : [ "java", "javascript", "php" ]
}
上から順に文字列、数値、真偽値、配列を定義しています。
Javascriptを使用してJSONデータの中身を確認してみましょう!
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>sample</title>
<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
<script type="text/javascript">
$(function() {
var info = {
"from" : "okinawa",
"age" : 29,
"male" : true,
"code" : [ "java", "javascript", "php" ]
}
console.log( info );
});
</script>
</head>
<body>
</body>
</html>
console.log( info )とした場合、ブラウザでの表示結果は以下のようになります。
JSONデータが全て取得できていることがわかります。

JSONデータの【from】のみを取得する場合は、【 info.from 】とすることで取得できます。
ブラウザでの表示結果は以下のようになります。

また、JSONで配列データを取得したい場合は【info.code[0]】で取得できます。
ブラウザでの表示結果は以下のようになります。

JSONとオブジェクトの変換
javascriptなどでJSONデータをそのまま使用することは可能です。
ですが、データを操作する際、手間がかかるかもしれません。
そんな時は、オブジェクトデータ⇄JSONデータに変換し、扱いやすいデータ形式にすることが可能です。それがこちらになります。
- JSON.parse() JSONデータ → オブジェクトデータ に変換
- JSON.stringify() オブジェクトデータ → JSONデータ に変換
JSON.parse()を使用しない場合と使用した場合の違いを比較してみます。
JSON.parse()を使用しない場合、文字列としての扱いになります。そのため、fromの値【okinawa】を取り出したい時、少し工夫が必要になりますね。

一方、 JSON.parse()を使用した場合はJSONデータがオブジェクト形式に変換されているため、fromの値【okinawa】を取り出したい時、簡単に取り出せますね。 とても便利です!

本記事のまとめ
今回は、JSON文法のおさらい(おさえておきたい4種類と変換方法)について解説しました。
最後まで読んでいただきありがとうございます(*^-^*)
本記事の内容をまとめると以下の通りです。
- JSONの表示形式は { ”名前”:値 }
- JSONの値は以下の4種類
- 文字列
- 数値
- 真偽値(true / false)
- 配列
- JSONとオブジェクトの変換
- JSON.parseメソッド
- JSON.stringifyメソッド
おすすめ記事
「JavaScriptプログラミングをもう一度本格的に勉強したいっ!」という方へ
逆に、「JavaScriptプログラミング以外を本格的に勉強したいっ!」という方へ