JSON整形について
左の入力欄では JSON を自由に編集できますが、入力のたびに整形は走りません。「整形」「圧縮」「JSON→XML」「JSON→YAML」を押したときだけ右側に結果が出ます。JSON.parse に失敗すると右ペインは空になり、誤って見える出力は出ません。
「整形」では JsonTreeViewer と 2 スペース相当の表示、「圧縮」では 1 行のシンタックスハイライト、XML/YAML 変換はプレーンテキストです。「コピー」は現在の表示モードの displayOutput（ツリー裏の文字列・圧縮行・変換テキスト）をそのまま持っていきます。
できること
4 つのボタンの役割
- 「整形」→ ツリー表示（outputView = tree）。
- 「圧縮」→ 1 行ハイライト JSON（outputView = minified）。
- 「JSON→XML / JSON→YAML」→ テキスト出力。
- 「クリア」で入力・出力・ツリー展開状態をリセット。
ツリーと「すべて展開」
整形成功後、出力エリアで「すべて展開」を使うと JsonTreeViewer のノードを一括で開けます。左側を直したあとは、もう一度「整形」しないとツリーは更新されません。表示されるのは parsedValue であり、未解析の左側原文そのものではありません。
コピー内容の切り替え
ツリー表示では 2 スペース整形に相当する文字列、圧縮表示ではハイライト付き 1 行、変換表示では XML/YAML の pre テキストがコピー対象になります。モードを切り替えてからコピーしてください。
よくある使い方
API レスポンスの 1 行 JSON
Network やログから compact な JSON を貼り、「整形」で data や errors ノードを展開して確認します。テキストが欲しいときは「コピー」——数値は JSON.parse 結果と一致し、空白と改行だけが変わります。
設定 JSON を YAML に渡す
まず「整形」で parse できることを確認し、「JSON→YAML」で Helm values や CI テンプレート向けの階層を目視チェックしてから YAML ペインからコピーします。
よくある質問
- 入力すると自動で整形されますか？
- いいえ。左側を編集しただけでは右側は更新されません。「整形」「圧縮」または変換ボタンを押す必要があり、編集中の中途半端な JSON を parse しないための仕様です。
- 1 行に潰れた JSON を読みやすくするには？
- そのまま貼って「整形」を押します。内部で JSON.parse し、JSON.stringify(..., null, 2) でツリーを組み立てます。1.0 が 1 と表示されるなどは JSON の通常の挙動です。
- どんな構文でエラーになりますか？
- 末尾カンマ、コメント、単一引用符、NaN/Infinity、クォートなしキーなど JSON.parse が拒否するものです。空入力は emptyInput、それ以外は invalidJson として表示されます。
- JSON5 や末尾カンマは使えますか？
- 本ページは標準 JSON.parse のみです。末尾カンマや // コメントを含む場合は、同カテゴリの「JSON 検証・修復」で直してから、ここで整形・変換してください。
- 「整形」と「圧縮」の違いは？
- parse 手順は同じです。「整形」は 2 スペース相当の文字列でツリー表示、「圧縮」は空白なし JSON.stringify の 1 行をハイライト表示します。
- JSON→XML/YAML のマッピングは？
- 先に parse が成功している必要があります。オブジェクトのキーが XML タグ名や YAML フィールドになり、配列は繰り返しタグやリスト項目になります。構造を確認してからテキスト出力をコピーしてください。
- 右側が空のままになるのはなぜ？
- parse 失敗か、まだ整形ボタンを押していない状態です。エラーメッセージを確認し、必要なら JSON 修復ツールで文法を直してから再度お試しください。