【JavaScript入門】JSON文法のおさらい(おさえておきたい4種類と変換方法)

【JavaScript入門】JSON文法のおさらい(おさえておきたい4種類と変換方法)プログラミング入門
スポンサーリンク

こんにちは!しーま(@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データが全て取得できていることがわかります。

ブラウザで表示した場合 console.log( info )

JSONデータの【from】のみを取得する場合は、【 info.from 】とすることで取得できます。

ブラウザでの表示結果は以下のようになります。

ブラウザで表示した場合 console.log( info.from )

また、JSONで配列データを取得したい場合は【info.code[0]】で取得できます。

ブラウザでの表示結果は以下のようになります。

ブラウザで表示した場合 console.log( info.code[0] )

JSONとオブジェクトの変換

javascriptなどでJSONデータをそのまま使用することは可能です。

ですが、データを操作する際、手間がかかるかもしれません。

そんな時は、オブジェクトデータ⇄JSONデータに変換し、扱いやすいデータ形式にすることが可能です。それがこちらになります。

  • JSON.parse() JSONデータ → オブジェクトデータ に変換
  • JSON.stringify() オブジェクトデータ → JSONデータ に変換

JSON.parse()を使用しない場合と使用した場合の違いを比較してみます。

JSON.parse()を使用しない場合、文字列としての扱いになります。そのため、fromの値【okinawa】を取り出したい時、少し工夫が必要になりますね。

JSON.parseを使用しない場合

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

JSON.parseを使用した場合

本記事のまとめ

今回は、JSON文法のおさらい(おさえておきたい4種類と変換方法)について解説しました。

最後まで読んでいただきありがとうございます(*^-^*)

本記事の内容をまとめると以下の通りです。

  • JSONの表示形式は { ”名前”:値 }
  • JSONの値は以下の4種類
    • 文字列
    • 数値
    • 真偽値(true / false)
    • 配列
  • JSONとオブジェクトの変換
    • JSON.parseメソッド
    • JSON.stringifyメソッド

おすすめ記事

JavaScriptプログラミングをもう一度本格的に勉強したいっ!」という方へ

逆に、「JavaScriptプログラミング以外を本格的に勉強したいっ!」という方へ

関連記事

Javaスキルで悩んでいる方必見!本気で学習できる環境を探してみよう!
詳細はこちら
Javaスキルで悩んでいる方必見!本気で学習できる環境を探してみよう!
詳細はこちら
タイトルとURLをコピーしました