JSONとは？VSCode設定時に知っておきたい基礎知識まとめ

今回はデータフォーマットのJSONについてまとめました。

僕はエディタ（VSCode）の設定をいじろうとした時に初めてjsonファイルという存在を知りました。

見たことない拡張子（.json）、見たことない記述ルールにウッときたわけですが、テキストエディタを使ってプログラミングやコーディングの勉強をする場合、少なからず壁にぶつかる方もいる人もいるんじゃないかと思ったのでこの記事では最低限必要そうな内容だけまとめています。

今後jsonファイル見るたびにウッとならないためにも、基礎知識だけ知っておきましょう！

そもそもJSONとは？

JSON (JavaScript Object Notation)は、軽量のデータ交換フォーマットです。人間にとって読み書きが容易で、マシンにとっても簡単にパースや生成を行なえる形式です。 JavaScriptプログラミング言語 （ECMA-262標準第3版 1999年12月）の一部をベースに作られています。

JSON の紹介

JSONはテキストベースのデータフォーマットです。

データフォーマットとはデータを変換する言語で、「〇〇」と記述したら別のフォーマットでは「△□△□」に変換されて出力される、といったものです。（めっちゃザックリ）

大量のデータや複雑な情報を簡易的に記述して、それを様々な拡張子ファイルに変換させることがデータフォーマットの役目です。

僕みたいに一般企業のサラリーマンをしている人でも知っている有名なデータフォーマットだとcsvなんかがそれにあたります。エクセル.xlsに変換するやつですね。

csvだと表形式にしか変換ができないですが、JSONだと複雑なデータ形式にも変換させることができます。

記述もcsvだとカンマ区切りで記述するだけですが、JSONはHTMLのように階層構造（ツリー形式）で記述ができます。

また、Jsなどのプログラミング言語を知っている方はイメージつきやすいかと思いますが、内容を配列構造で記述することもできます。

複雑な内容のデータ変換でも、人が理解しやすい文書構造で記述できるという特徴から、JSONは設定用のデータフォマットとして多く広まっています。

jsonの文法ルール

ここからは基礎的な文法（型）について説明します。

基本の型（key : value）

  "age" : 20
// key  : value

jsonはkeyとvalueで成り立ちます。keyは内容、valueは内容に対する値です。keyには半角英字を使用します。

一対の内容は :（コロン）で区切ります。この組み合わせはオブジェクトとなります。

基本の文法

{ "editor.fontSize": 14 }

keyとvalueで作成したオブジェクトは{ }（波カッコ）で囲みます。

複数内容記述する場合

{ "editor.fontSize": 14  ,  "editor.fontFamily": "Ricty Diminished" }

複数内容を記述する場合は ,（カンマ）で区切ります。カッコ内最後のオブジェクトにはカンマ不要です。

{
  "editor.fontSize": 14,
  "editor.fontFamily": "Ricty Diminished",
  "editor.tabSize": 2
}

一般的に複数行記述される場合は上のように改行します。

配列

"aaaaaaaaaaaaa": [ "xxx" , "yyy" , "zzz" ]

配列はvalueを[ ](角カッコ)で囲みます。

一応、配列の説明も載せておきます。

配列はたいてい「リストのようなオブジェクトである」と説明され、単一のオブジェクト内に複数の値をリストとして持っています。配列オブジェクトは変数に格納され、その他の型と同様に扱われます。

配列 – ウェブ開発を学ぶ | MDN

"liveSassCompile.settings.autoprefix": [
    "last 1 versions",
    "ie >= 11",
    "Android >= 5",
    "ios_saf >= 11"
  ]

配列も複数行ある場合、上記のように改行して記述することが多いです。

オブジェクトと配列の組み合わせ

"object": [
    { "name": "Satou", "age": 20 },
    { "name: "Suzuki", "age": 32 }
  ]

上記は複数オブジェクトを、配列としてkeyに格納している記述です。

エディタの設定ファイルを見るとこういった記述も多くありますが、上記のように細かく順を追ってみたら理解できますね。

valueの中身

上の項でさらっと記載しましたが、valueはいくつか型があるのでここも紹介します。

文字列

"aaa"

文字列は日本語（漢字含む）でもいいようです。

jsを基本としているので、文字列は” “（ダブルクォーテーション）で囲みます。

※json では‘ ‘（シングルクォーテーション）は使えません。

数字

123...

数字はクォーテーションで囲みません。

ヌル値

"name" : null 

値が無いことを示す場合は null で指定します。すべて小文字です。

真偽値

"JudgmentA": true,
"JudgmentB": false

真偽判定をさせる時に真がtrue、偽がfalseで指定します。true や false はすべて小文字です。

また、真偽値はBooleanとも言います。

まとめ

{
  "editor.fontSize": 14,
  "editor.fontFamily": "Ricty Diminished",
  "editor.minimap.enabled": false,
  "emmet.triggerExpansionOnTab": true,
  "liveSassCompile.settings.formats": [
    {
      "format": "expanded",
      "extensionName": ".css",
      "savePath": "/scss"
    }
  ],
 "liveSassCompile.settings.autoprefix": [
    "last 1 versions",
    "ie >= 11",
    "Android >= 5",
    "ios_saf >= 11"
  ]
}

上記は私のVSCodeのsetting.jsonファイルから一部を抜粋しています。　※⌘＋Pで「setting」と検索すると出せます。

基本ルールを知らなかったら意味不明だったかと思いますが、今回紹介した基本文法をザッと理解すれば上記内容もわかるようになると思います。

エディタ設定などでjsonファイルをいじることがある時は参考にしてください！

VSCodeのオススメ拡張機能をまとめた記事もありますので良かったらこちらもご覧ください！

この記事の監修者

粟飯原匠 |プロデューサー

マーケティングを得意とするホームページ制作会社PENGINの代表。教育系スタートアップで新規事業開発を経験し、独立後は上場企業やレガシー産業のホームページ制作・SEO対策・CVR改善の支援を行うPENGINを創業。「ワクワクする。ワクワクさせる。」を理念に掲げてコツコツと頑張っています。