PART 02 — ツール導入
整形・検証ツールとエディタ拡張機能

最初はオンラインの整形ツールばかり使っていましたが、社内APIのレスポンスサンプルを何度も貼り付けるうちに「これは外部サービスに投げていい情報だったか」と不安になったのがきっかけで、ローカルで完結するエディタ拡張機能とCLIツールに乗り換えました。この記事はその移行の記録です。

ツール選定の考え方

図1: 「その場確認」「継続編集」「自動化」の3つの目的でツールを使い分ける

JSONを扱う外部ツールは大きく3種類に分けられます。それぞれ得意な場面が異なるため、目的に応じて使い分けるのが最も効率的です。

オンライン整形・検証ツール

JSONLint・JSON Formatterなどのオンラインツールは、テキストエリアにJSONを貼り付けるだけで構文エラーの検出とインデント整形を同時に行ってくれます。導入の手間がゼロで、他人と結果を共有しやすいのが利点です。

VS Code の JSON 言語機能と拡張機能

VS Codeは追加の拡張機能を入れなくても、JSONに対して構文チェック・折りたたみ・簡易フォーマット（Shift+Alt+F）を標準で提供しています。さらに$schemaプロパティを指定すると、JSON Schemaに基づいた入力補完とエラー検出が有効になります。

{
  "$schema": "./schema/config.schema.json",
  "name": "sample-app",
  "port": 8080
}

$schemaに指定したファイルのルールに沿って、キー名の補完・型チェック・必須項目の警告が入力中にリアルタイムで表示されます。package.jsonなどの著名な設定ファイルは、VS Codeが標準で公開スキーマを自動関連付けしてくれるため、追加設定なしで補完が効きます。

Prettier による保存時自動整形

インデント幅・改行位置などの整形スタイルをチームで統一するには、Prettier拡張機能を導入し、保存時に自動フォーマットさせるのが定番です。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.tabSize": 2
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

この設定を.vscode/settings.jsonとしてリポジトリに含めておけば、チーム全員が同じフォーマットルールで保存できるようになり、「インデントが2か4か」といった無意味な差分レビューを防げます。

jq — コマンドラインでのJSON処理

jqは、コマンドラインからJSONを整形・抽出・加工できる軽量ツールです。ログの中からJSON部分だけを取り出して確認したり、シェルスクリプトの中でAPIレスポンスから特定の値だけを抜き出したりする用途に向いています。

# macOS（Homebrew）
brew install jq

# Ubuntu / Debian
sudo apt-get install jq

# Windows（winget）
winget install jqlang.jq

# 整形（インデント付け）
cat response.json | jq '.'

# 特定のキーだけ抽出
cat response.json | jq '.data.items[].name'

# 条件でフィルタ
cat response.json | jq '.data.items[] | select(.active == true)'

# 構文チェックのみ（出力なし）
cat response.json | jq empty && echo "valid JSON"

まとめ — ツール早見表