メインコンテンツへスキップ

developer-tools

オンラインJSONビューア:JSONをすばやく確認・編集・修正

robinhood-projects1 分で読める

JSONビューア・フォーマッター・エディター

リアルタイムのインタラクティブツリーでJSONを表示・編集・フォーマット。インライン値編集、キー名変更、ノードの追加/削除、JSONCコメントのサポート、ワンクリックエクスポート — すべてブラウザ内で動作。

ツールを使う →

JSONからCSVへのコンバーター

JSONオブジェクト配列をブラウザで即座にCSV形式に変換します。

ツールを使う →

CSVからJSONへのコンバーター

CSVデータをブラウザで即座にJSONオブジェクト配列に変換します。

ツールを使う →

Base64エンコード・デコード

テキストやバイナリデータをBase64にエンコードし、Base64文字列をプレーンテキストにデコードします。ブラウザ内で即座に処理。

ツールを使う →

JSONはどこにでもある。生のままで読むのはつらい。

エンドポイントを叩いたら、ターミナルにJSONの壁が出現。目的のフィールドは6階層の奥深く。あるいは誰かが変更したpackage.jsonを開いて、どこが違うか目視で探そうとする。生のJSONはマシン向けだ。人間の目には厳しすぎる。

そこを解決するのがFileCrankのJSONビューア。インストール不要、サインアップ不要、すべてブラウザで完結する。

できること

貼り付けてすぐ探索

入力パネルにJSONを貼り付けると、カラーコードの折りたたみ可能なツリービューが即座に表示される:

  • 文字列はグリーン
  • 数値はブルー
  • 真偽値はパープル
  • nullはグレー

data配列を折りたたんでmetaブロックに集中する。必要なオブジェクトだけ展開する。大きなAPIレスポンスを読むとき、これだけで数分が変わる。

JSONCサポート——コメントも処理

設定ファイルを扱っているなら、VS CodeやTypeScriptの設定ファイルがJSONCフォーマット(コメント付きJSON)を使うことは珍しくない。標準のJSON.parseは//や/* */に出会った途端にエラーになる。このJSONフォーマッターはパース前にコメントを自動で除去するので、コメントが含まれた設定ファイルをそのまま貼り付けられる。

ブラウザを離れずにインライン編集

誤った値を直すためにエディタを開く必要はない。ツリービュー内の任意の値をクリックするとインライン編集できる。型は自動検出される:trueと入力するとブーリアン、42と入力すると数値になる。キー名をダブルクリックすると名前を変更できる。

具体例: Webhookペイロードで"active": "true"が文字列になっている。クリックしてtrue(クォートなし)と入力してEnter。修正完了。

ノードの追加と削除

新しいキーを追加したいなら、オブジェクトや配列の横の+ボタンを押す。削除したいなら×を押す。ツリービューは即時更新される。

リアルタイムの生成JSONパネル

編集しながら、画面下の「生成されたJSON」パネルがリアルタイムで更新され続ける。修正済みのJSONがすぐコピーできる状態で表示される。別途「適用」ボタンを押す手間はない——ツリービューで見たものがそのまま出力になる。

コピー・リセット・変更の追跡

「コピー」を1クリックするとJSONがクリップボードに入る。「リセット」で最初に貼り付けた状態に戻る。作業中のJSONが入力と異なる場合、変更済みのアンバー色バッジが表示されるので、どの状態にいるか一目でわかる。

実際の使用例

REST APIのレスポンスをデバッグしているとしよう:

  1. ネットワークタブやAPIクライアントからレスポンスボディをコピー
  2. JSONビューアに貼り付け
  3. results配列を折りたたむ——200件あるが、見たいのはエンベロープだけ
  4. pagination.totalが"500"(文字列)になっていて、500(数値)であるべきと気づく
  5. 値をクリックして500と入力してEnter
  6. 修正済みJSONを出力パネルからコピー
  7. テストフィクスチャやバグレポートに貼り付け

所要時間:30秒以内。ローカルツール不要。

今すぐ試す

JSONフォーマッターオンラインを開いて、気になっていたAPIレスポンスを貼り付けてみてほしい。ミニファイされたJSONを睨むより、ツリービューでどれだけ速く構造を把握できるか実感できる。

JSONの先の作業にはJSONをCSVに変換、CSVをJSONに変換、Base64エンコード・デコードも活用できる。