JSONエディター
このツールは、インタラクティブなツリービューとライブの等幅テキストエディタを備えた、同期する2面編集環境を提供します。ノードのインライン操作、キーの追加・名前変更・削除、配列の並べ替え、元に戻す/やり直しの履歴移動、RFC 8259構文の継続的な検証つきのJSONPathプロパティ検索に対応しています。
JSONエディターはどう動きますか？
ネストしたJSONペイロードを生のテキストで編集すると、構文を壊しがちです。うっかりカンマを1つ消すだけ、波括弧を閉じ忘れるだけで、ファイル全体が壊れます。ToolsByUsのJSONエディターは、ASTに裏付けられたビジュアルツリービューと生テキストエディタを組み合わせることで、この問題を排除します。
- 双方向同期：コードペインで入力すると、その場でパースされてツリー階層がライブ更新されます。逆に、ツリーでノードをインラインにクリックしてプロパティ名を変えたり要素を追加したりすると、即座にきれいにインデントされたJSONテキストへ直列化し直します。
- 型を保つ安全な編集：スカラーノードを編集するとき、エディタは文字列、数値、真偽値、nullを正確なJavaScriptの表現としてパースします。数値が文字列に変えられてしまうことはありません。
- JSONPathプロパティ検索：プロパティ名やドット記法のパスで、深くネストされたドキュメントを即座に絞り込み、関係するキーに集中できます。
- 無限の元に戻す/やり直し：すべてのキー入力とツリー操作は、不変の履歴スタックに積まれます。変更は自信をもって巻き戻せます。
生のJSONドキュメント
{"server": "node-1", "active": false}出力例
// Mutated via Tree: Toggle 'active' to true and add 'port': 8080
{
"server": "node-1",
"active": true,
"port": 8080
}JSONエディターが対応するオプションとエッジケースは？
| パラメータ | 型 | デフォルト | 動作とエッジケース |
|---|---|---|---|
| インラインキー編集 | 操作 | クリックして編集 | ツリービュー内のプロパティキーをクリックすると、ドキュメント全体で名前を変更できます。 |
| インライン値編集 | 操作 | クリックして編集 | スカラー値を直接編集します。ブール値はクリックで切り替わります；数値は数値のままです。 |
| 子の追加 | 操作 | + ボタン | オブジェクトに新しいプロパティを追加するか、配列に新しい要素を追加します。 |
| ノードの削除 | 操作 | ゴミ箱ボタン | 末尾のカンマを残さずに、キーと値のペアまたは配列インデックスを安全に削除します。 |
| 元に戻す / やり直し | 履歴 | 線形スタック | テキスト操作とツリー操作の両方において、完全な状態履歴を保持します。 |
よくある質問
ツリービューとテキストビューを自由に切り替えられますか？
はい、できます。両方を横に並べて同時に表示できるほか、表示タブで全画面のTree Viewと全画面のText Viewを切り替えられます。
テキストビューで無効なJSONを入力するとどうなりますか？
エディタは、行・列・キャレット位置つきの構文エラーバナーを即座に表示します。直前の有効なツリーの状態は保持されるため、作業が中断されることはありません。
編集したJSONは外部のサーバーに保存されますか？
いいえ。パース、ツリーの描画、直列化は、すべてブラウザのメモリ内で完全に実行されます。データがリモートに保存されたり、送信されたりすることは一切ありません。
正しく見えるのにJSONのパースに失敗するのはなぜですか？
原因はほぼこの3つに集約されます。最後の項目の後の末尾カンマ。JSONが要求するダブルクォートの代わりのシングルクォート。そしてワープロやチャットクライアントから貼り付けた“スマートクォート”（カーリークォート）です。エラーバナーは最初の問題文字の行と列を示します。まずそこを見てください。間違いは、たいてい予想した位置より1行上にあります。
ここで編集できるJSONドキュメントのサイズ上限は？
最大8 MBまでです。編集はページのメインスレッドで実行されます。ツリーが入力に追従できるようにするためですが、このサイズを超えると、ブラウザのタブは仕事を終える前に描画を止めてしまいます。このツールは固まる代わりに、はっきりしたメッセージとともにドキュメントを拒否します。より大きいものは、Web Workerで動くJSON差分比較ツールがはるかに大きく受け付けます。
編集するとキーが並べ替わったり、ドキュメントが再整形されたりしますか？
いいえ。キーは入力時の順序を保ち、テキストビューは空白も含めて、入力されたものをそのまま返します。再整形は、別の場所で意図的に頼んだときにだけ起こります。インデント、キーの並べ替え、コメント除去を明示的に行うのは、「JSON整形」の役割です。