APIレスポンスのJSONを手軽に整形・バリデーションするブラウザツール

趣味

はじめに

おつかされまです。tyamonです。

この記事では、JSONの整形・バリデーションをブラウザだけで手軽に行う方法を紹介します。

以下のような方を対象としています。

  • APIレスポンスやcurlの出力をすぐに読みやすくしたい
  • JSONの構文エラーをすばやく見つけたい
  • データをサーバーに送らずにローカルで処理したい

結論（成果物）

本記事で紹介するツールを使うことで、JSON文字列の整形・構文チェックをインストール不要・データ送信なしでブラウザ上で実行できます。

ツールはこちら → JSON整形・バリデーション | tools.tyamon.com

JSON整形が必要になる場面

開発・運用の現場でJSONを扱う場面は多くあります。

  • curl でAPIを叩いたら1行のJSONが返ってきた
  • CloudWatch LogsのログがJSON形式で読みにくい
  • 設定ファイルを編集したら構文エラーになった

こういったとき、ツールを使えば数秒で解決できます。

ツールの使い方

JSONを貼り付けて整形する

左側のテキストエリアに、整形したいJSON文字列を貼り付けます。
「整形する」ボタンを押すと、右側に見やすくインデントされたJSONが表示されます。

{"name":"tyamon","role":"engineer","skills":["AWS","React"]}

↓ 整形後

{
  "name": "tyamon",
  "role": "engineer",
  "skills": [
    "AWS",
    "React"
  ]
}

インデント幅を選ぶ

整形時のインデント幅を「2スペース」「4スペース」「タブ」から選べます。
チームのコーディング規約や用途に合わせて切り替えてください。

バリデーション（構文チェック）

不正なJSONを貼り付けると、エラーメッセージが表示されます。

エラーメッセージはブラウザの JSON.parse() が返す内容をそのまま表示しているため、エラー箇所の手がかりになります。

結果をコピーする

「コピー」ボタンを押すと、整形済みJSONをクリップボードにコピーできます。

実務での活用シーン

curlでAPIをテストするとき

curl https://api.example.com/users/1
# {"id":1,"name":"tyamon","email":"tyamon@example.com","created_at":1700000000}

このような1行のレスポンスをツールに貼り付けると、すぐに構造を把握できます。

Lambdaのテストイベントを作るとき

AWS Lambdaのテストイベントを手動で書いていると、うっかりカンマを抜かしてエラーになることがあります。
貼り付けてバリデーションするだけで事前チェックができます。

設定ファイルのデバッグ

package.json や AWS のポリシードキュメントなど、JSON形式の設定ファイルの構文チェックにも使えます。

まとめ

今回はブラウザでJSONを整形・バリデーションするツールを紹介しました。ポイントは以下の通りです。

  • インデント幅（2スペース・4スペース・タブ）を選んで整形できる
  • 不正なJSONはエラーメッセージで即時フィードバック
  • 入力内容はサーバーに送信されないため業務データも安心

次のステップ

参考資料

コメント

タイトルとURLをコピーしました