DevToolPal
日本語

JSON ツリーエディター

JSON を折りたためるツリーで表示し、キー・値・型をその場で編集。JSON も編集に合わせて更新されます。

ローカルで処理、アップロードなし

オプション

インデント

JSON

0 文字 · 0 B

ツリー

結果はここに表示されます

機能

JSON ツリーエディターは、JSON ドキュメントを折りたためるツリーに変換し、そのまま閲覧・編集できるようにします。長いテキストファイルの中で抜けているカンマを探す代わりに、小さな入力欄で値を変更するだけで、ツールが正しい JSON を書き直してくれます。

設定ファイル、API のレスポンス、テストのフィクスチャ、翻訳ファイルなど、まず構造を把握してから何か所かを正確に変更する必要があるものに便利です。

使い方

  1. 左側の入力欄に JSON を貼り付けるか、サンプルを読み込みます。
  2. ツリーを閲覧します。オブジェクトや配列の横の矢印をクリックすると展開・折りたたみができ、展開する階層 で既定でどの深さまで開くかを選べます。
  3. その場で編集します:
    • キーをクリックすると名前を変更できます。キーはオブジェクト内の位置を保ちます。
    • 文字列や数値をクリックすると変更できます。真偽値には true / false のメニューがあります。
    • 各行の右側にある型のメニューで、値を別の JSON の型に変換します。
    • + を押すとオブジェクトや配列に子を追加し、× を押すとノードを削除します。
  4. Enter を押すか別の場所をクリックすると変更が適用され、Escape でキャンセルされます。
  5. 更新された JSON を入力欄からコピーします。整形のされ方は インデント オプションで制御します。

パス

行を選択すると、$.author.name や $.keywords[2] のような JSONPath 形式のパスが、コピー用のボタンとともに表示されます。単純な識別子でないキーは、$["first name"] のようにクォートされます。jq、JavaScript のオプショナルチェーン、データベースの JSON 関数などで、同じフィールドを読むコードやクエリを書くときにパスが役立ちます。

安全な編集

編集によって不正な JSON が作られることはありません。既存のキーと同じ名前にキーを変更する、数値に文字を入力するなど、変更を適用できない場合は、ツリーの上にメッセージが表示され、ドキュメントは変更されません。

左側の JSON に構文エラーがある場合は、ツリーの代わりにエラーが行と列とともに表示されるので、テキストを修正して作業を続けられます。

よくある質問

› 編集内容は JSON テキストに保存されますか?

はい。ツリーでの変更はすべて、選んだインデントで整形されて左側の JSON にそのまま書き戻されるため、いつでもコピーやダウンロードができます。

› 項目を追加・削除するには?

オブジェクトや配列の行にあるプラスボタンで子を追加し、任意の行にある × ボタンで削除します。新しいオブジェクトのメンバーには key や key2 のような仮のキーが付くので、名前を変更してください。

› 型を変更するとどうなりますか?

できる限り内容を保持します。数値を文字列にするとそのテキストになり、配列はインデックスをキーにしたオブジェクトに、オブジェクトはその値の配列になります。

› JSON はアップロードされますか?

いいえ。解析と編集はブラウザ内で行われます。