FormatArcかんたんデータ変換
Chrome拡張JSON整形

Chrome拡張でJSON整形 — おすすめの選び方とFormatArcの使い方

JSON整形に使えるChrome拡張機能の比較と、JSON・YAML・CSVをまとめて変換できるFormatArcの特徴を紹介します。

FormatArc JSON Formatter で API レスポンスを整形した画面

Chrome 拡張で JSON を整形したい場面

API のレスポンスを確認するとき、ブラウザで JSON の URL を直接開くと 1 行に圧縮された状態で表示されます。開発中にこの状態で中身を読み解くのはつらいので、Chrome 拡張で整形表示する方法が定番になっています。

ただ、拡張機能にはいくつか種類があり、目的によって選び方が変わります。この記事では、代表的な拡張を比較しつつ、JSON だけでなく YAML や CSV も扱える FormatArc の使い方を紹介します。

代表的な JSON 整形 Chrome 拡張

JSONView

Chrome 拡張の中でも歴史が長く、90万人以上のユーザーがいる定番ツールです。ブラウザで JSON の URL を開くと、自動的にツリー表示で整形してくれます。RFC 4627 準拠のバリデーションにも対応しています。

向いている人:

  • API エンドポイントをブラウザで直接叩いて確認する場面が多い
  • JSON をツリー形式で折りたたみながら読みたい

JSON Formatter

ダークモード対応、構文ハイライト、コード折りたたみなどの機能を持つ拡張です。JSONView より UI が新しく、クリック可能な URL 表示や Raw/Parsed の切り替えができます。

向いている人:

  • 見た目のきれいさを重視する
  • ダークテーマで開発している

これらの拡張の共通する制約

JSONView や JSON Formatter は、ブラウザで開いた JSON URL を自動整形する拡張です。つまり以下のような用途には対応していません。

  • クリップボードにコピーした JSON を貼り付けて整形する
  • YAML や CSV を JSON に変換する
  • 入力データを手元に残したまま、サーバーに送信せずに処理する

こうした用途には、変換ツール型のアプローチが向いています。

FormatArc — JSON・YAML・CSV をまとめて変換

FormatArc は Chrome 拡張とは別のアプローチで、ブラウザ内で JSON 整形・YAML 変換・CSV 変換をまとめて処理できるツールサイトです。

JSON Formatter でAPIレスポンスを整形する →

FormatArc の JSON Formatter で API レスポンスを整形した画面

特徴

入力データがサーバーに送信されない:

処理はすべてブラウザ内で完結します。業務用 API のレスポンスや社内データを貼り付けても、外部にデータが出ません。JSONView 等のブラウザ拡張も同様にローカル処理ですが、FormatArc はコピペで使える点が異なります。

JSON 以外にも対応:

構文エラーの表示:

JSON が壊れている場合、行番号付きでエラー箇所を案内します。JSONView は構文エラー時にそのまま生テキストを表示するだけですが、FormatArc はどこが壊れているかのヒントを出します。エラーの詳しい対処法は JSON Parse Error の解決方法 を参照してください。

使い方

  1. JSON Formatter ページ を開く
  2. 入力欄に JSON を貼り付ける
  3. 「実行」を押す
  4. 整形結果をコピーする

npm CLI も使える

ターミナルから使いたい場合は npm パッケージもあります。

npx formatarc json-format '{"a":1}'
cat response.json | npx formatarc json-format

GitHub: https://github.com/m-naoki-m/formatarc

どう使い分けるか

JSONView / JSON Formatter が向いている場面

  • ブラウザで JSON の URL を直接開いて確認する
  • API エンドポイントのレスポンスをその場でツリー表示したい
  • インストールして放置しておくだけで使える手軽さが欲しい

FormatArc が向いている場面

  • クリップボードの JSON を貼り付けて整形したい
  • YAML や CSV も扱いたい
  • 構文エラーの原因を知りたい
  • データをサーバーに送らずに処理したい

両方を併用するのが現実的です。JSONView でブラウザの JSON 表示を自動整形しつつ、コピペで使いたい場面や YAML/CSV 変換には FormatArc を使う、という組み合わせがおすすめです。

まとめ

  • JSON 表示の自動整形なら JSONView や JSON Formatter が定番
  • コピペ整形 + YAML/CSV 変換なら FormatArc がカバー範囲が広い
  • 構文エラーの特定には FormatArc の行番号表示が便利
  • 両方を目的に応じて使い分けるのがおすすめ

関連ツール

JSON 整形