TECH TODAY

現役エンジニアが教える！実践JavaScript入門 〜JSON編〜

公開日：2022-07-03
JavaScript
JSON

https://www.youtube.com/watch?v=V33HUlTU5Ds

今回扱う内容：JSON

JavaScriptの重要な概念である「JSON」を解説します。

JSON(JavaScropt Object Notation)とは

軽量なテキストベースのデータ交換用フォーマットで、プログラミング言語を問わず利用ができます。そのフォーマットはJavaScriptのオブジェクトがベースになっていて、データの構造を文字列としてまとめたものです。

詳しくは、MDN Web Docsを参照。

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSONhttps://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/JSON

オブジェクトとJSONの相互変換

文字列であるJSONとオブジェクトは相互変換が可能です。

  1. オブジェクトをJSONにする場合は、JSON.stringifyを使う
    使い方は、 JSON.stringfy(オブジェクト)
  2. JSONをオブジェクトにする場合は、JSON.parseを使う
    使い方は、 JSON.person(JSON文字列)
  • オブジェクトの例
const person = {
  firstName: "Ken",
  lastName: "Takahashi",
  age: 29,
  gender: "male",
  interests: [
    {
      name: "programming",
      emoji: "💻"
    },
    {
      name: "motorcycle",
      emoji: "🏍"
    }
  ]
};
  • JSONの例（インデントあり）
{
  "firstName": "Ken",
  "lastName": "Takahashi",
  "age": 29,
  "gender": "male",
  "interests": [
    {
      "name": "programming",
      "emoji": "💻"
    },
    {
      "name": "motorcycle",
      "emoji": "🏍"
    }
  ]
}
  • JSONの例（インデントなし）
{"firstName":"Ken","lastName":"Takahashi","age":29,"gender":"male","interests":[{"name":"programming","emoji":"💻"},{"name":"motorcycle","emoji":"🏍"}]}

JSONは何に使うのか

JSONは文字列なのでJavaScript以外の言語とのデータのやりとりに利用できます。JavaScriptでオブジェクトデータをJSONに変換し、ネットワークを通してバックエンドにデータを転送したいときなどによく使われます。一昔前まではデータ転送のフォーマットとしてXMLが使われていましたが、情報量やデータ構造の見やすさからJSONが使われるようになりました。

  • JSONの例（213字）
{
  "firstName": "Ken",
  "lastName": "Takahashi",
  "age": 29,
  "gender": "male",
  "interests": [
    {
      "name": "programming",
      "emoji": "💻"
    },
    {
      "name": "motorcycle",
      "emoji": "🏍"
    }
  ]
}
  • XMLの例（301字）
<?xml version="1.0" encoding="UTF-8" ?>
<root>
  <firstName>Ken</firstName>
  <lastName>Takahashi</lastName>
  <age>29</age>
  <gender>male</gender>
  <interests>
    <name>programming</name>
    <emoji>💻</emoji>
  </interests>
  <interests>
    <name>motorcycle</name>
    <emoji>🏍</emoji>
  </interests>
</root>

JSONとXMLの相互変換は、次のサービスでも試すことができます。

https://www.convertjson.com/json-to-xml.htmhttps://www.convertjson.com/json-to-xml.htm

JSONの整形

JSONは基本的にはインデントが無い横並びの文字列になるので、人が見るには見づらくなってしまいます。
そこでインデントを入れて視覚的に分かりやすくしてくれる整形ツールがあります。

  • JSON整形ツールの例(JSON Pretty Linter)

https://lab.syncer.jp/Tool/JSON-Viewer/https://lab.syncer.jp/Tool/JSON-Viewer/

まとめ

今回はJavaScriptにおけるJSONについて解説しました。次回は関数について解説します。

関連記事