MENU
WEBエンジニアになりたい人のためのブログ
  1. ホーム
  2. システム開発
  3. JSON & JSON5の違い、そしてjqコマンドで見やすく表示する

JSON & JSON5の違い、そしてjqコマンドで見やすく表示する

システム開発

今回はWebのシステム開発で使われるJSONとJSON5について知識を深めていきます。使用用途やJSONやJSON5が使われるようになった経緯も含めて学んでいきます。

本記事ではEC2インスタンスにSSH接続できていて、Linuxの基本的なコマンドがわかることを前提としています、学習がまだの方は「WindowsからSSH接続を行う方法」と「Linuxの基礎コマンド」の記事の学習を終えてから後らの記事に戻ってきてください。

目次

JSONとそこに至るまでの経緯

JSON（JavaScript Object Notation）とは元々ブラウザで使用されるスクリプト言語であるJavascriptのデータ表記法です。単純に言うとデータのフォーマットのことを表します。現在ではデータ通信においてJSONはデータを表す方法として広く普及して使用されています。まずはJSONに至るまでの経緯を理解しておきましょう。

最初はCSVフォーマットが使われていた（.csv）

CSV（Comma Separated Values）は文字通りデータをカンマ区切りで表現していました。１データ１行にしてそれぞれの項目をカンマで区切っている状態です。

【CSVの例】
id,name,birthday,favrorite_color1,favorite_color2
001,Mike,2003/11/13,blue,green
002,Nancy,2004/01/27,yellow,pink

CSVデータには以下のデメリットがありました。

  • 入れ子構造が再現できない
  • 全て文字列扱いでデータ型が分かりにくい
  • エスケープの問題（ダブルクオートや分割に使われるカンマの扱い）
  • １行のレコードを見て直感的に人が理解しにくい
  • データの送信側と受け取り側がお互いにフォーマットの定義を正確に認識していなければならない

これを解決しようとしたのがXMLでした。

次に期待されたのがXML（.xml）

XML（eXtensible Markup Language）はHTML同様マークアップ言語なのでタグを使って自由にデータの意味を表現できて、タグ内とその属性にデータを持たせることができました。これで人が見て分かりやすくなりました。そして自由にデータの構造を決められるので階層（ツリー）構造も表現できるようになりました。データの構造（スキーマ）の定義も別途可能になったのでデータの送信側と受け取り側が厳密な定義を共有できるようになりました。

【XMLの例】
<employees>
  <employee id="1">
    <name>Mike</name>
    <birthday>2003/11/13</birthday>
    <favorite_color>
      <color>blue</color>
      <color>green</color>
    </favorite_color>
  </employee>
  <employee id="2">
    <name>Nancy</name>
    <birthday>2004/01/27</birthday>
    <favorite_color>
      <color>yellow</color>
      <color>yellow</color>
    </favorite_color>
  </employee>
</employees>

人にとっての理解のしやすさからXMLは多くの設定ファイルのフォーマットとして採用されました。しかしながら、XMLでのデータ送受信は期待したようには普及しませんでした。なぜなら以下のようなデメリットが認識されるようになったからでした。

  • マークアップ言語という特性上、冗長な開始終了タグがありデータ量（ファイルサイズ）が増大してしまった
  • 冗長すぎるデータでは視認性が下がってしまった
  • CSVと比べ、XMLはそれ以外の周辺知識としてXSLT、XPath、XSDなどがあり学習コストが上がってしまった

そして、XMLに変わるものとして出てきたのがJSONです。

JSONの登場（.json）

XMLのデメリットを回避してくれるデータフォーマットとして注目を集めたのがJSONです。JSONは非常にシンプルなフォーマットで、学習コスコも低く、記述方が冗長でなく、人に読みやすく、かつ必要最低限のデータ量で済むものでした。

【JSONの例】
{
  "employees": [
    {
      "id": 1,
      "name": "Mike",
      "birthday": "2003/11/13",
      "favorite_color": [
        "blue",
        "green"
      ]
    },
    {
      "id": 2,
      "name": "Nancy",
      "birthday": "2004/11/13",
      "favorite_color": [
        "yellow",
        "pink"
      ]
    }
  ]
}

JSONはデータの理解のし易さから設定ファイルに使われたり、ブラウザとサーバ間やサーバ同士のデータ通信にも広く使われています。

強いてJSONの使いにくさを挙げると、JSONではコメントが書けないという点があります。特にWebアプリケーションの設定ファイルとしてJSONを使おうとした場合、コメントのメモが残せないのはちょっと使い勝手が悪いですよね。

そして、より利便性を上げようと試みたのがJSON5でした。

より使いやすくを目指すJSON5（.json5）

JSON5には以下の特徴が挙げられます。

  • コメントが書ける（これが一番助かる）
    • ラインコメント（//）やブロックコメント（/* */）が可能
  • シングルクオートも許可
  • キー名のクオートは不要
  • 末尾のカンマも許可
    • 追加削除が容易になり保守性も向上します（これはありがたい）

ただし、JSON5はまだJSONほど普及はしていないので、JSON5からJSONにコンバートして使用しなければならないことも多いかもしれません。


では次に、JSONの詳細について理解していきましょう。

JSONの書き方

JSONのフォーマットでは以下がデータが何もない外枠だけの状態です。

{}

データの要素についてはキー・バリューペアを記述していきます。
キーにはダブルクオートを使用します。
各項目間はカンマで区切ります。ただし、同じ階層の最後の要素の末尾にカンマを入れてはいけません。

{
  "id": 1,
  "name": "Mike",
  "birthday": "2003/11/13",
  "favorite_color": [
    "blue",
    "green"
  ], <=このカンマは不要なのでJSONの構文エラーになります。
}

データ型

JSONで使用可能なデータ型は以下になります。

日付型がないことに注意してください。日付は文字列として表現します。

  • 文字列=キー同様ダブルクオートで囲む
  • 数値
  • 配列（リストの事）
  • boolean型（true/false）
  • null
  • オブジェクト（JSON）
{
  "id": 1,・・・数値
  "name": "Mike",・・・文字列
  "birthday": "2003/11/13",・・・文字列
  "favorite_color": [・・・配列
    "blue",
    "green"
  ],
  "home_phone": false,・・・boolean
  "home_phone_number": null,・・・null
  "family": {・・・オブジェクト
    "cat": {
      "name": "Boo"
    }
  }
}

jqコマンド

通常、JSONデータの送受信を行う場合ファイルサイズをできるだけ小さくしたいので、可読性の為の不要な改行やインデントタブは削除して行います。以下の様に圧縮されたJSONだと読みにくいですよね。

{"employees": [{"id": 1,"name": "Mike","birthday": "2003/11/13","favorite_color": ["blue","green"]},{"id": 2,"name": "Nancy","birthday": "2004/11/13","favorite_color": ["yellow","pink"]}]}

そこで役に立つのが jq コマンドです。

jqコマンド本家のサイトは以下。

https://jqlang.github.io/jq/download

EC2インスタンス上でのjqコマンドのインストール

【jqコマンドがインストール済みか確認】
dnf list installed | grep jq

【jqコマンドのパッケージがあるか確認】
dnf list | grep jq
dnf info jq

【jqコマンドのインストール】
sudo dnf install jq -y

【jqコマンドがインストールされたことを確認】
dnf list installed | grep jq

jqコマンドの使い方

上記１行のJSONデータをdata.jsonファイルとして作成しておきましょう。jqコマンドにJSONファイルの内容を渡すとフォーマットした状態で表示してくれます。

【すべて表示】
jq '.' data.json
又は
cat data.json | jq '.'
->シングルクオートは必須です。

【実行結果】
{
  "employees": [
    {
      "id": 1,
      "name": "Mike",
      "birthday": "2003/11/13",
      "favorite_color": [
        "blue",
        "green"
      ]
    },
    {
      "id": 2,
      "name": "Nancy",
      "birthday": "2004/11/13",
      "favorite_color": [
        "yellow",
        "pink"
      ]
    }
  ]
}

更に、jqコマンドはJSONの階層を辿って該当するデータのみを抽出して表示できます。

cat data.json | jq '.employees'
->employeesの値を表示

cat data.json | jq '.employees[].name'
->[]は配列分を表します。employeesの値の配列内データのうち.nameだけを抽出

cat data.json | jq '.employees[0]'
->配列１つ目のJSONデータだけ表示します。

cat data.json | jq '.employees[0].name'
->配列１つ目のJSONデータのnameだけ表示します。

cat data.json | jq '.employees[] | select(.id == 1)'
->id=1のデータのみを取得

cat data.json | jq '.employees[] | select(.favorite_color[] == "green")'
->favorite_colorにgreenが含まれるデータのみを取得

jqコマンドの使い方本家のURLは以下。

https://jqlang.org/manual/#basic-filters

まとめ

今回の記事ではJSONについて掘り下げて学習してきました。JSONをが普及するまでにはCSVやXMLが使用されていました。それぞれデメリットを克服してきた経緯がありましたね。JSON5ではコメントも使用できるようになりました。圧縮されたJSONデータをフォーマットした形で検索・表示できるjqコマンドについても学びました。jqコマンドも奥が深いので、更なる学習が必要です。

システム開発
jq JSON Json5 Linux
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！

この記事を書いた人

userのアバター user

関連記事

コメント

コメントする

目次