JSONをエディタに貼り付け、ツールバーボタンで操作できます。
- JSONテキストを貼り付けるか、.jsonファイルをエリアにドロップして読み込む
- 「整形」でインデント付き表示、「圧縮」でminify、「検証」でバリデーション
- 「ツリービュー」タブで折りたたみ式の構造表示に切替
- 「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に対応するものがない機能があります。本ツールは基本的な構文のみサポートしています。
- カラーコード変換(HEX/RGB/HSL/CMYK)|配色パレット生成
- HTTPヘッダー確認 & セキュリティ診断|A+〜Fスコアリング
- フォントサブセット化ツール|Webフォントを軽量化してサイト高速化
- レスポンシブ画像ジェネレーター|srcset・picture要素のHTMLコードを自動生成
- JSONをTypeScript Interfaceに変換|型定義を一瞬で自動生成
- 最適なECプラットフォーム診断ツール|Shopify・makeshop・EC-CUBE・モール型
- Markdown ⇔ HTML 相互変換ツール|リアルタイムプレビュー付き
- 最適なCMS診断ツール|WordPress・MovableType・ノーコード・ヘッドレスCMS等
- ホームページ制作/サイトリニューアル費用相場概算シミュレーション
- 現在のOS・ブラウザ・IP・画面解像度を一括取得|クライアント環境情報チェッカー
- Cron式ジェネレーター&実行スケジュール確認ツール|日本語翻訳・作成
- Webフォントプレビューア|Google Fonts日本語・英語フォント比較
- 構造化データ(JSON-LD)作成ジェネレーター【FAQ・パンくずリスト対応】
- レスポンシブプレビューアー|複数デバイス幅を同時プレビュー
- hreflangタグ ジェネレーター|多言語サイト向け自動生成ツール