VSCodeを快適に使うためのJSON入門

はじめに

VSCodeにおいては、設定ファイルとしてJSON形式が用いられます。JSON記法は簡潔で理解しやすいものの、禁止の記法が存在します。また、VSCodeにおけるJSON記法は通常のものと異なります。

本記事では、JSONの禁止の記法やVSCodeにおけるJSON記法をわかりやすく説明することで、より多くの人に正しい理解を届けることを目指します。

[1] JSONとは

JSONとはJavaScript Object Notationの略であり、JavaScriptの一部の記法に従った軽量のデータフォーマットです。

その特徴としては、人間にとって読み書きがしやすく、機械にとってもパースや生成が簡単であるということです。

[2] JSONにおけるデータ型

JSONで用いることのできるデータ型は6種類あります。オブジェクト以外は多くの言語で共通する書き方だと思われます。

(1) 文字列

""で囲まれるのが文字列です。コントロール文字を使うこともできます。

文字列

"あいう"
"foo \\bar \n"

(2) 数値

整数、小数、指数、などを扱うことができます。

数値

-10
30.1
1.0e-10

(3) 真偽値

trueとfalseのいずれかです。

真偽値

true
false

(4) null

値がないことを示す値です。

null

null

(5) 配列

0個以上の値を保持することができます。配列は[]で囲まれます。

配列

["foo", "bar", "baz"]
[[10, 10], [20, 20]]
[]
["baz", 100, true, null]

(6) オブジェクト

名前と値の組の集合のことです¹。名前は全て文字列である必要があります。また、オブジェクトは{}で囲まれ、名前と組の間は:で区切られます。

オブジェクト

{
    "name": "Daiki Suyama",
    "age": 22,
    "blog": "https://qiita.com/DaikiSuyama"
}

[3] JSONの構成

JSONは先程紹介したオブジェクト1つから構成されます。また、オブジェクトの中にオブジェクトが入るなどの入れ子の構造も許容されます。

JSONの構成

{
    "name": {
        "first": "Daiki",
        "last": "Suyama"
    },
    "age": 22,
    "blog": "https://qiita.com/DaikiSuyama"
}

[4] JSONの注意点

注意点としては2つあります。末尾のカンマをつけてはならないこととコメントを書くことができないことです。いずれも通常のJavaScriptでは使える機能であるため、注意が必要です。

NG例

{
    //自分の名前
    "name": {
        "first": "Daiki",
        "last": "Suyama"
    },
    "age": 22,
    "blog": "https://qiita.com/DaikiSuyama",
}

[5] VSCodeでのJSONの利用

先に述べたように、VSCodeの設定ファイルに用いられるJSON形式は通常のものとは異なり、JSON形式を拡張したJSON with comments (JSONC) 形式です。拡張子はjsoncです。

この形式では、先に述べたJSON形式では禁止されているコメントと末尾のカンマが許容されるため、より人間にとってわかりやすい形式となっています。また、拡張子がjsonであるVSCodeの設定ファイルはJSONC形式として解釈されますが、自分で作成したJSONファイルは通常のJSON形式として解釈されることに注意が必要です。

JSON形式とJSONC形式の混同から間違った記述をする記事が多々見られますが、VSCodeのJSON形式の設定ファイルではコメントと末尾のカンマを用いることができることを再度ご確認ください。

JSONCの構成

{
    //自分の名前
    "name": {
        "first": "Daiki",
        "last": "Suyama"
    },
    "age": 22,
    "blog": "https://qiita.com/DaikiSuyama",
}

1. 連想配列と捉えてもこの文脈では差し支えないです。 ↩