JSONツリーエディターとは？

JSONは、名前付きの値を保持するオブジェクトと、順序付きのリストを保持する配列としてデータを保存します。これらは入れ子にできるため、プレーンテキストエディターでは大きなドキュメントの変更が困難です。カンマや中かっこが1つ欠けただけで、ファイル全体が無効になるからです。ツリーエディターでは、同じデータを開閉できるノードの集合として表示します。値の変更、キーの名前変更、ノードの直接追加や削除を行うと、ツールがカンマ、引用符、角かっこの処理を引き受けます。

ツールの説明

このツールでは、JSONをツリーとして編集できます。JSONを貼り付けると、オブジェクト、配列、値のツリーとして表示されます。ノードの横にある鉛筆アイコンでキーまたは値を変更し、オブジェクトや配列の横にあるプラスアイコンで子ノードを追加し、ごみ箱アイコンでノードを削除します。変更するたびにJSONテキストへすぐに反映されるため、完了したら結果をコピーできます。テキストエディターに直接入力することもでき、ツリーにも反映されます。すべての処理はブラウザー内で行われ、データが外部へ送信されることはありません。

例

次のJSONから始めます。

{
  "name": "example-app",
  "port": 8080,
  "tags": ["json", "tree"]
}
JSON

portを3000に変更し、tagsに文字列editorを追加して、新しいキーprivateにtrueを設定します。テキストは次のようになります。

{
  "name": "example-app",
  "port": 3000,
  "tags": ["json", "tree", "editor"],
  "private": true
}
JSON

機能

  • キー、文字列、数値、ブール値、null値をその場で編集
  • オブジェクトに新しいキー、配列に新しい項目を追加し、ルート以外の任意のノードを削除
  • 値の型を変更（例：文字列から数値へ変更）
  • キーの順序を維持し、同じオブジェクト内ですでに使用されているキーがある場合に警告
  • ツリー全体を展開または折りたたみ、ノード数を確認

仕組み

このツールはテキストをJSONとして解析し、結果をツリーとして表示します。変更を行うと、その変更を反映したデータの新しいコピーを作成し、インデント2個分のスペースを使ったテキストとして書き戻します。キーの名前を変更しても、兄弟キーの中での位置は維持されます。"1"や"2"のように整数全体に見えるキーは、すべてのJavaScript JSONパーサーと同様に、常に昇順で最初に一覧表示されます。

値には、文字列、数値、ブール値、null、オブジェクト、配列の6種類の型があります。新しいオブジェクトと配列は空の状態で作成され、プラスボタンで内容を追加します。すでに子ノードがあるオブジェクトや配列はその型を維持するため、誤って内容を失うことはありません。ただし、キーの名前は変更できます。

ヒント

  • Enterキーを押すと変更を保存し、Escapeキーを押すとキャンセルできます。文字列内でShiftキーを押しながらEnterキーを押すと、改行を追加できます
  • 左側のテキストが有効なJSONでない場合、修正するまでツリーは空のままになり、エラーが表示されます
  • このツリーには元に戻す機能がないため、変更に不安がある場合は元のJSONのコピーを保存しておいてください
  • JSONの数値はJavaScriptの数値として読み取られるため、9007199254740991より大きい数値は精度を失います
  • JSONを変更せずに確認するだけの場合は、JSONツリービューアーを使用してください