LoginSignup
75
72
RUNTEQ Advent Calendar 2023Advent Calendar 2023Day 24
@kyan96

JSONって何？

Last updated at Posted at 2023-12-23

この記事は「RUNTEQ Advent Calendar 2023」の24日目に参加しています🎄🎅✨

はじめに

現在プログラミングスクールRUNTEQで学習中のhimeです！

以前から気になっていた「JSON」について理解したいと思い、今回テーマに選びました！

JSONについて整理したのち、最後にアプリのプロジェクトを立ち上げた際に生成される
package.jsonというファイルが何なのか理解したいです。
自分が作ったアプリのpackage.jsonの中身を解説できたらな〜と思います。

JSON とは

JSON(ジェイソン) は JavaScript Object Notation の略称です。
日本語訳だと「JavaScriptオブジェクト記法」になります。
JSONは、データの構造化とデータの交換を目的とした軽量なデータ形式で、
ファイルの拡張子は.jsonです。

まとめると、JSONは「JavaScriptのオブジェクト記法に由来するデータ形式 」のことを言います。

名前に「JavaScript」 と付いてはいますが、書式が JavaScript(ECMAScript) に従ったものとなっているだけで、JavaScript 専用ということではありません。
今ではJavaScript以外のプログラミング言語でも多く利用されています。

さらに、JSONは人間が読み書きしやすく、機械が解析および生成しやすいデータ形式です。(最高やん！🎉)

また、JSON は Web API （Web Application Programming Interface）を使用する際に使うデータ形式の一つでもあります。

JSON の良きところ 👏

  • 人間とコンピューターの双方にとって可読性が高い
  • データ量が少ないため、軽量に処理を行うことができる
  • JavaScriptでの利用のみならず、プログラム言語に依存しないデータ交換が可能

JSON の注意したいところ 👀

  1. データ構造が複雑になりがち: データ構造の自由度が高い分、複雑になりやすい(入れ子や配列など)。データ形式によってはCSV、XMLといった他のフォーマットと併用することを検討した方が良い。
  2. コメントを記載できない: JSONファイルの中にはコメントを記載することができないため、何のデータか理解するのに時間がかかり、生産性が低下する可能性もある。JSONでデータのやりとりをする時には、必ずデータの内容を別途説明する必要がある。

JSON の特徴

  • JavaScriptのオブジェクトに書き方が似ている
  • キーと値の組み合わせでデータを表現する
  • キー名は、ダブルクォーテーション(")で囲む

JavaScriptにおけるオブジェクトの書き方

{
  キー1: 値1,
  キー2: 値2,
  キー3: 値3
}

{
  name: 'hime',
  age: 27,
  languages: [ "JavaScript", "Ruby" ]
}

JSONの書き方

{
  "キー1": 値1,
  "キー2": 値2,
  "キー3": 値3
}

{
  "name": "hime",
  "age": 27,
  "languages": [ "JavaScript", "Ruby" ]
}

一見同じに見えますが、JSONはキー名がダブルクォーテーション(")で囲まれていますね！

JSON はどこで使われる？

DOM.jpg

結論： Web上でのデータのやりとりでよく使われる( Ajax や WebAPI )

例えば 💎

RUNTEQではRubyを中心にアプリ開発を学びますが、その環境で例えると
バックエンドのRubyからフロントエンドのJavaScriptにデータを渡す際に
JSONはよく使用されます。

さらに詳しく言うと、バックエンドのでデータベースから取得した情報を
JSON形式に変換し、それをHTTPレスポンスとして送信しています。

フロントエンドのJavaScriptは、このJSONデータを取得して解析し、ウェブページ上で動的なコンテンツを生成することができます。

(こうして見ると、JSONって結構身近な存在だったんだな〜という気がしてきます😳)

それ以外では下記の場面で使われています。

設定ファイル: ソフトウェアやアプリケーションの設定情報を保存するのにJSONが使われる。これにより、設定を簡単に読み書きできる。

データベース: NoSQLデータベースやドキュメントベースのデータベースでは、JSONを使ってデータを格納したり、クエリしたりすることがある。

その他テキストフォーマットとの違い

JSONの登場以前は、「CSV」や「XML」と呼ばれるテキストフォーマットが一般的でした。
CSV は Comma Separated Values の略称です。日本語訳だと「カンマ区切り値」です。
XML は Extensible Markup Language の略称です。日本語訳だと「拡張可能マークアップ言語」です。

CSV、XML、JSON にはそれぞれ下記のような特徴があります。

CSV

  • カンマ(,)区切りのファイル形式
  • データの容量が軽い
  • 互換性が高い
  • 読み書きや編集が容易である
  • 装飾・機能の自由度は低い

XML

  • データとして文字列しか表すことができない
  • すべての情報にタグを付ける必要があるため、データサイズが大きくなりがち
  • テキストの任意の場所にタグ付けができる

JSON

  • データとして文字列以外に、数値や空を意味するデータなども扱うことができる
  • データを括弧で囲んで構造を表すので、データファイルは小さめ

JSON は JavaScriptの書式に従っているため、JavaScript で書かれたプログラムでは
JSONをそのまま JavaScript として読み込むことができます。
XMLのように DOM を利用する必要がありません。

また、タグ名などでデータサイズが大きくなりがちな XML よりもデータが小さいため、
そのぶんネットワークの転送速度が速くなります。

まとめると、JSONはXMLに比べてデータの転送が速く、DOMを使わずにJavaScriptの生データとして扱えるので、Webの世界では広く使われています。

DOM (1).jpg

実際にコードを比較してみると、JSONはコード量も少なく、且つ何のデータなのかわかりやすいです 👏

CSV

ID,Name,Height
1,Taro,180
2,Jiro,170
3,Saburo,160

XML

<XML>
 <Person>
  <ID>1</ID>
  <Name>Taro</Name>
  <Height>180</Height>
 </Person>
 <Person>
  <ID>2</ID>
  <Name>Jiro</Name>
  <Height>170</Height>
 </Person>
 <Person>
  <ID>3</ID>
  <Name>Saburo</Name>
  <Height>160</Height>
 </Person>
</XML>

JSON

{
 {
  "ID": 1,
  "Name": "Taro",
  "Height": 180
 },
 {
  "ID": 2,
  "Name": "Jiro",
  "Height": 170
 },
 {
  "ID": 3,
  "Name": "Saburo",
  "Height": 160
 }
}

ちなみに、3つのテキストフォーマットを表で比較すると以下になります。

見た目のわかりやすさ 加工のしやすさ 記述のしやすさ
CSV × ○ △
XML ○ △ ×
JSON ○ ○ ○

JSON が対応しているデータ型

JSONには以下の6つのデータ型が用意されています。

  • オブジェクト
  • 文字列
  • 数値
  • boolean(真偽値)
  • 配列
  • null
{
  "human": {
    "name": "hime",
    "birthday": "1996/07/07",
    "age": 27,
    "height": 152,
    "married": false,
    "children": [],
    "website": null
  }
}

【最後に①】　package.json って何？

アプリのプロジェクトを立ち上げた際に生成される、package.jsonというファイルとは一体何なのか？🤔

結論：プロジェクトの設定情報を管理するためのファイル

package.jsonは、Node.jsプロジェクトやJavaScriptプロジェクトにおいて、プロジェクトのメタデータや依存関係、スクリプトなどの設定情報を管理するためのファイルです。

このファイルには以下のような情報が含まれます。

  1. プロジェクトの基本情報: プロジェクトの名前、バージョン、説明など。
  2. 依存関係: プロジェクトが依存しているパッケージ（ライブラリやツール）の情報。
  3. スクリプト: プロジェクト内で実行可能なカスタムスクリプト(開発サーバーの起動、
    ビルドの実行などが含まれる)。つまりコマンドのこと。

package.jsonは、プロジェクトの管理や共有、デプロイなどの様々な目的で重要な役割を果たします。

【最後に②】 自分で作ったアプリの package.json を見てみる

package.json
{
  "name": "app",
  "private": "true",
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^7.3.0",
    "esbuild": "^0.19.5",
    "sass": "^1.69.5"
  },
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

▼ 細かく見ていく〜 👀

1.プロジェクトの基本情報: プロジェクトの名前は"app"。このプロジェクトは個人的なもので、外部から利用されない。

{
  "name": "app",
  "private": "true",
}

2.依存関係: このプロジェクトが依存している4つのライブラリやツールと、そのバージョン。

{
  "dependencies": {
    "@hotwired/stimulus": "^3.2.2",
    "@hotwired/turbo-rails": "^7.3.0",
    "esbuild": "^0.19.5",
    "sass": "^1.69.5"
  },
}

3.スクリプト:
build: esbuildを使用してJavaScriptファイルをバンドルし、ソースマップを生成し、app/assets/buildsディレクトリに配置する。また、バンドルされたファイルの公開パスは /assets
build:css: sassを使用してSassファイルをコンパイルし、./app/assets/stylesheets/application.sass.scssから./app/assets/builds/application.cssに配置する。ソースマップは生成せず、ノードモジュールのディレクトリも読み込み対象に指定されている。

{
  "scripts": {
    "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=/assets",
    "build:css": "sass ./app/assets/stylesheets/application.sass.scss:./app/assets/builds/application.css --no-source-map --load-path=node_modules"
  }
}

終わりに

前から気になっていたJSONについての解像度が上がって良かったです。
引き続きプログラミング学習頑張っていきたいと思います！
最後まで読んでいただきありがとうございました🙇‍♀️

参考

75
72
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
75
72