無料WEBツールdigtoooooools

by 大阪のホームページ制作会社digrart

JSON整形・バリデーター|ツリービュー&YAML変換

JSONをエディタに貼り付け、ツールバーボタンで操作できます。

  1. JSONテキストを貼り付けるか、.jsonファイルをエリアにドロップして読み込む
  2. 整形」でインデント付き表示、「圧縮」でminify、「検証」でバリデーション
  3. ツリービュー」タブで折りたたみ式の構造表示に切替
  4. JSON→YAML」「YAML→JSON」で相互変換
1

整形または検証済みのJSONがここにツリー表示されます。

JSONの基本構造
JSONは オブジェクト {}配列 [] を組み合わせたシンプルなデータ形式です。サポートされる型は「文字列・数値・真偽値(true/false)・null・配列・オブジェクト」の6種類。ネストに制限はなく、複雑な階層構造も表現できます。
Web APIの標準フォーマット
REST API・GraphQL・WebSocket等で交換されるデータの大半はJSONです。XMLに比べて記述量が少なく、JavaScriptとの親和性が非常に高いため、現代のWebアプリケーション開発では事実上の標準になっています。
設定ファイルとしてのJSON
package.json(Node.js)、tsconfig.json(TypeScript)、settings.json(VS Code)等、多くの開発ツールがJSON形式の設定ファイルを採用しています。コメントが書けないデメリットはありますが、機械処理が容易な点が評価されています。
整形(フォーマット)が役立つ場面
APIのレスポンスやログダンプは多くの場合、minifiedな1行形式で届きます。整形することでデータ構造が一目でわかり、デバッグや仕様確認の時間を大幅に短縮できます。インデント2スペースはGitの差分表示で一般的、4スペースはIDEのデフォルト、タブはファイルサイズを最小化しつつ読みやすさを確保する際に使います。
圧縮(Minify)が役立つ場面
APIレスポンスやWebアプリの設定ファイルを圧縮することで、転送データ量を削減しページ読み込み速度を改善できます。また、JSONをHTMLの data- 属性に埋め込む場合は圧縮が必須です。
バリデーションが役立つ場面
コピペミスや手動編集でJSONが壊れることは頻繁にあります。特に「末尾カンマ」「シングルクォート」「コメント行」はJSONとして無効です(JSONC形式では許可)。エラー行のハイライトで素早く原因を特定できます。
YAML(YAML Ain't Markup Language)とは
YAMLはJSONの上位互換フォーマットです。インデントで構造を表現し、コメント(#)が書けるため、人間が手書きする設定ファイルに向いています。DockerのComposeファイル、GitHub ActionsのCI/CD設定、Kubernetes設定などで広く使われています。
相互変換の注意点
基本的なデータ(オブジェクト・配列・文字列・数値・真偽値・null)はJSON⇔YAML間で完全に相互変換できます。ただしYAMLにはアンカー(&/*)やマルチラインリテラル(|/>)など、JSONに対応するものがない機能があります。本ツールは基本的な構文のみサポートしています。
WEB開発ツール
SEO対策
ネットワーク
セキュリティ
画像処理・テキスト解析
ビジネス
SNS・エンタメ
生活