【初学者によるまとめ】この一冊で全部わかるWeb技術の基本　「Chapter 4」＞「07 JSON」

目的：「イラスト図解式 この一冊で全部わかるWeb技術の基本」の要点を自分なりにまとめアウトプットして理解力の向上に努める。

注意点
🤔 ←この絵文字の文章は個人的な見解になります。的外れなこともあるかと思います。
例）🤔<(感想、考察、疑問点など)

---

（参考書籍）

1. イラスト図解式 この一冊で全部わかるWeb技術の基本

（参考サイト）

https://aws.amazon.com/jp/compare/the-difference-between-json-xml/

---

JavaScriptから生まれた汎用データ形式

• JSON (JavaScript Object Notation) は『構造化したデータを表す』ためのデータ記述言語の一種
  • XML もデータを表すことが出来るので性質は同じ
• JavaScript でも使用するが他の言語においても対応されているので汎用性が高いと言える

データ構造を表すのに使われる

• JSON を利用することでデータをツリー構造で表現する
  • JSON は {} で入れ子構造にすることで階層を表現する
  • XML は HTML と同じ要領でタグで囲み階層を表現する

	JSON	XML
扱えるデータ	データとして文字列以外に数値や null を扱える	文字列だけ
長所	括弧で囲んで構造を表現しているだけなのでデータサイズが小さく収まる	タグで表現するので分かりやすい
短所	タグで表現されていないため読み取りにくい	タグとタグ名が必要なのでデータサイズが大きくなる

JSONの場合

{
    "名前": "岡田 太郎",
    "年齢": 18,
    "趣味": {
        ゲーム: [
            "謎解き",
            "アクション"
        ]
    }
}

XMLの場合

<人物>
    <名前>岡田 太郎</名前>
    <年齢>18</年齢>
    <趣味>
        <ゲーム>
            <項目>謎解き</項目>
            <項目>アクション</項目>
        </ゲーム>
    </趣味>
</人物>

Web上でのデータのやりとりによく使われる

• JSON は JavaScript のオブジェクト(プロパティ)の構文に従っているため JavaScript でそのまま読み取り可能（画像1-②）
  • XML は HTML 同様にタグで表現しているため DOM ツリーを辿る必要があるため、DOM API の利用が必要になる（画像1-①）

（画像1：データ転送における XML と JSON の違い）