【JSON】1行のJSONを綺麗に見やすくする方法

JSONをプログラムから生成した時、1行で横並びになっていて見にくいということってありますよね。

この記事では横並びになったJSONを綺麗に整形する方法を紹介していきます。

1行のJSON

UnityでJSONファイルを書き出した時、下記のような1行でJSONが出力されました。

{"products":[{"Id":1,"Name":"パピコ","Price":176},{"Id":2,"Name":"アイスの実","Price":176},{"Id":3,"Name":"ガリガリ君ソーダ","Price":88},{"Id":4,"Name":"雪見だいふく","Price":187},{"Id":5,"Name":"ピノ","Price":187},{"Id":6,"Name":"ジャイアントコーン","Price":176},{"Id":7,"Name":"モナ王","Price":187},{"Id":8,"Name":"クーリッシュ","Price":187},{"Id":9,"Name":"スーパーカップ","Price":187},{"Id":10,"Name":"チョコモナカジャンボ","Price":187}]}

このようなぐちゃぐちゃなJSONは見にくく、何を表しているのかわからないですよね。

下記のように綺麗に見やすくJSONを閲覧したいですね。

{
    "name": "masashi",
    "age": 20,
    "engineer": true
}

ではこれからJSONを見やすくする方法を紹介していこうと思います。

JSONを見やすくする方法

コード整形のショートカットを使うとJSONファイルが綺麗になります。

Visual StudioとVS Codeでの両方のやり方を紹介します。

Visual Studioでのやり方

こちらの1行のJSONファイルに対して

Ctrl + Kを押し、次にCtrl + Fを押します。

すると、下記のように綺麗に整形されます。

Visual Studioでのコード整形のやり方は

コードのインデントの綺麗な揃え方として下記の記事で詳しく紹介しています。

MupianTechBlog

【Visual Studio】コードのインデントを揃える方法 | MupianTechBlog Visual Studioでコードを書いていて、途中で修正したときにコードのインデントが ぐちゃぐちゃになることってありませんか? 今回はVisual Studioでコードのインデントを揃…

VS Codeでのやり方

1行のJSONファイルに対して

Shift + Alt + Fを押します。(Macはshift + ⌥ + F)

すると下記のように綺麗に整形されます。

なお、VS Codeの場合はJSON Toolsという拡張機能をインストールして使うこともできます。

おわりに

いかがだったでしょうか。

1行のJSONファイルを綺麗にする方法は

コード整形のショートカットキーを使うと簡単に整形できる

ということを紹介しました。

Visual StudioではCtrl + Kを押しCtrl + Fを押す、

VS CodeではShift + Alt + F(Macはshift + ⌥ + F)を押す

と簡単にJSONを綺麗にできると思います。

ではでは!