📥 入力
🌳 ツリー表示
整形されたJSONがここに表示されます
⚡ クイックアクション
📖 JSONの基本構文
オブジェクト { }
キーと値のペアを
キーは必ずダブルクォートで囲み、コロンで値と区切ります。
例:
{ } で囲みます。キーは必ずダブルクォートで囲み、コロンで値と区切ります。
例:
{"name": "太郎", "age": 25}
配列 [ ]
複数の値を
異なる型の値を混在させることも可能です。
例:
[ ] で囲み、カンマで区切ります。異なる型の値を混在させることも可能です。
例:
["apple", "banana", 123]
文字列・数値
文字列は必ずダブルクォートで囲みます。
数値はクォートなしでそのまま記述します。
例:
数値はクォートなしでそのまま記述します。
例:
"hello", 42, 3.14
真偽値・null
真偽値は
空の値は
例:
true または false（小文字）。空の値は
null（小文字）で表します。例:
{"active": true, "data": null}
⚠️ よくあるエラーと対処法
カンマの付け忘れ・余分なカンマ
各要素の間にはカンマが必要ですが、最後の要素の後にカンマを付けるとエラーになります。
{"a": 1 "b": 2} → カンマ忘れ
{"a": 1, "b": 2,} → 余分なカンマ
{"a": 1, "b": 2} → 正しい書き方
{"a": 1, "b": 2,} → 余分なカンマ
{"a": 1, "b": 2} → 正しい書き方
プロパティ名のクォート忘れ
JSONではプロパティ名（キー）も必ずダブルクォートで囲む必要があります。JavaScriptのオブジェクトとは異なる点です。
{name: "太郎"} → クォートなし
{"name": "太郎"} → 正しい書き方
{"name": "太郎"} → 正しい書き方
シングルクォートの使用
JSONではシングルクォート(')は使用できません。文字列は必ずダブルクォート(")で囲みます。
{'name': '太郎'} → シングルクォート
{"name": "太郎"} → ダブルクォート
{"name": "太郎"} → ダブルクォート
💡 活用シーン
API開発・デバッグ
APIのレスポンスを整形して確認。
構造を把握しやすくなり、
バグの発見が容易になります。
構造を把握しやすくなり、
バグの発見が容易になります。
設定ファイルの編集
package.jsonやtsconfig.jsonなど
の設定ファイルを整形・検証。
構文エラーを事前に防げます。
の設定ファイルを整形・検証。
構文エラーを事前に防げます。
データ分析
JSON形式のデータを視覚的に
確認。ツリー表示で階層構造を
一目で把握できます。
確認。ツリー表示で階層構造を
一目で把握できます。
🎓 豆知識
📅 JSONの誕生
JSONは2001年にDouglas Crockfordによって提唱されました。JavaScriptのオブジェクト記法をベースにした軽量なデータ交換フォーマットとして設計され、XMLに代わるシンプルな選択肢として急速に普及しました。現在ではWeb開発の標準的なデータ形式となっています。
⚖️ XMLとの違い
JSONはXMLと比べてよりシンプルで軽量です。タグの開始・終了が不要なため、データサイズが小さくなり、人間にも機械にも読みやすいのが特徴です。かつてはXMLが主流でしたが、現在のWeb APIではJSONが圧倒的に主流となっています。
📝 JSONの正式名称
JSONは「JavaScript Object Notation」の略です。名前にJavaScriptが含まれていますが、JavaScript以外の言語（Python、Ruby、PHP、Java、C#など）でも広く使用されています。言語に依存しない標準フォーマットとして、ECMA-404およびRFC 8259で規格化されています。
🔧 JSON5とは
JSON5はJSONの拡張版で、より人間に優しい記法を許容します。コメント（// や /* */）、末尾カンマ、シングルクォート、16進数リテラルなどが使用可能です。設定ファイル（.json5）でよく使われ、開発者の利便性を高めています。
📂 履歴
履歴はありません
💡 活用ガイド
🔧 APIレスポンスの確認
- APIから返ってきたJSONを整形して構造を把握
- ネストされたデータをツリー表示で視覚化
- パスをクリックしてコードに使う参照を取得
⚙️ 設定ファイルの編集
- package.jsonやtsconfig.jsonの構文チェック
- 設定値の追加・変更前の検証
- キーのアルファベット順ソートで整理
📊 データ分析・変換
- 大量のJSONデータの構造を素早く把握
- 圧縮してファイルサイズを削減
- ダウンロードして他のツールで利用
🐛 デバッグ・トラブルシューティング
- エラー箇所をリアルタイムで特定
- 末尾カンマやクォート忘れを検出
- 正しいJSONに修正してコピー
❓ よくある質問
「Unexpected token」エラーの原因は？
最も多い原因は「末尾カンマ」「シングルクォートの使用」「コメントの記述」です。JSONは厳密なフォーマットなので、JavaScriptでは許容される書き方がエラーになることがあります。
圧縮（Minify）するメリットは？
改行やスペースを削除してファイルサイズを削減できます。APIレスポンスやデータ転送時に通信量を抑えられます。人間が読む必要がない場面で使用します。
大きなJSONファイルも整形できる？
ブラウザのメモリに依存しますが、数MB程度のJSONであれば問題なく処理できます。非常に大きなファイルは処理に時間がかかるか、エラーになる場合があります。
JSONパスとは何ですか？
JSON内の特定の値への道筋を表す記法です。「data.users[0].name」のように、ドットと角括弧で階層をたどります。ツリービューでクリックするとパスをコピーできます。