ToolShare Lab

2026年版 ToolShare Lab / Guide

JSON整形・バリデーション入門
よくあるエラーと修正方法

「JSONがパースできない」「どこが間違っているかわからない」——APIレスポンスの確認や設定ファイルの編集で、何度も同じ壁にぶつかっていないだろうか。この記事では基本構文の理解から、末尾カンマ・シングルクォート・コメントなどの頻出エラーの原因と修正方法、整形・バリデーションの実践手順まで、現場で即使える知識を一通りまとめた。

読了時間: 約10分 更新日: 2026年3月10日

JSONとは何か

JSON（JavaScript Object Notation）は、データを人間にも機械にも読み書きしやすい形式で表現するためのテキストフォーマットだ。1999年頃にDouglas Crockfordが提案し、2013年にIETF RFC 7159として標準化。現在はRFC 8259が最新の仕様となっている。

名前に「JavaScript」が入っているが、JSONはJavaScriptに限らない。Python、PHP、Ruby、Go、Javaなど、あらゆる言語でパースライブラリが存在する言語非依存のフォーマットだ。WebAPIのレスポンス、設定ファイル（package.json、tsconfig.jsonなど）、データベースのドキュメント形式（MongoDBなど）——至る所で顔を出す。

JSONが広く使われる理由

Point

JSONは「JavaScript Object Notation」だが、JavaScriptのオブジェクトリテラルと完全に同じではない。たとえばJavaScriptでは末尾カンマやコメントが許可されるが、JSONでは一切許可されていない。この違いがエラーの温床になる。

JSONの基本構文

JSONは6種類のデータ型と、2種類のコンテナ（オブジェクト・配列）で構成される。これを押さえておけば、エラーの大半はその場で原因を特定できる。

データ型一覧

型 記法 例
文字列（String） ダブルクォートで囲む "Hello, World!"
数値（Number） 整数・小数・指数表記 42 / 3.14 / 1e5
真偽値（Boolean） 小文字のみ true / false
null 小文字のみ null
オブジェクト（Object） 波括弧 + キー:値のペア {"name": "田中"}
配列（Array） 角括弧 + カンマ区切りの値 [1, 2, 3]

正しいJSONの例

{ "name": "田中美咲", "age": 27, "freelancer": true, "skills": ["Figma", "HTML", "CSS", "JavaScript"], "address": { "prefecture": "東京都", "city": "渋谷区" }, "income": 4000000, "note": null }

オブジェクトのルール

  1. キーは必ずダブルクォートで囲む

    JavaScriptと異なり、JSONのオブジェクトのキーは必ずダブルクォートが必要。{"name": "value"} はOK、{name: "value"} はエラーになる。

  2. キーと値はコロン（:）で区切る

    キーと値の間は必ずコロン。等号（=）は使えない。

  3. 複数のキー:値ペアはカンマ（,）で区切る

    最後のペアの後にカンマを付けてはいけない（末尾カンマ禁止）。

文字列のエスケープ

文字列内でダブルクォートや特殊文字を使う場合は、バックスラッシュでエスケープする必要がある。WindowsのファイルパスをJSONに直接貼り付けると高確率でここでつまずく。

{ "message": "彼女は\"エンジニア\"です", "path": "C:\\Users\\tanaka\\Documents", "newline": "1行目\n2行目", "tab": "項目\t内容", "emoji": "Unicode: \u2764" }
エスケープシーケンス 意味
\"ダブルクォート
\\バックスラッシュ
\/スラッシュ（省略可）
\n改行
\rキャリッジリターン
\tタブ
\uXXXXUnicode文字

よくあるJSONエラーと原因

JSONの仕様はシンプルだ。シンプルだからこそ、ちょっとした書き間違いが即エラーになる。現場で繰り返し遭遇するパターンをNG例・OK例で見ていく。

エラー1: 末尾カンマ（Trailing Comma）

現場で最もよく見るエラーがこれだ。JavaScriptオブジェクトやPythonの辞書型では末尾カンマがOKなので、つい同じ感覚でJSONに書いてしまう。ここがハマりどころの筆頭。

// NG: 最後の要素の後にカンマがある { "name": "田中", "age": 27, ← このカンマがエラー } // OK: 最後の要素にカンマを付けない { "name": "田中", "age": 27 } // NG: 配列の末尾カンマも同様 ["apple", "banana", "cherry",] // OK ["apple", "banana", "cherry"]

注意

VS CodeはデフォルトでJSON末尾カンマを自動除去しない。ESLintの jsonc/no-dupe-keys やJSON拡張機能を入れれば保存時に自動修正できるので、チームで使うなら設定しておくといい。ちなみに tsconfig.json や VS Codeの settings.json はJSONC（JSON with Comments）という拡張フォーマットで、末尾カンマもコメントも書ける。標準JSONとは別物なので混同に注意。

エラー2: シングルクォートの使用

JSONの文字列はダブルクォート（"）だけが正解。シングルクォート（'）は使えない。JavaScriptに慣れているほど引っかかる罠だ。

// NG: シングルクォートを使用 { 'name': '田中美咲', 'city': '東京' } // OK: ダブルクォートのみ { "name": "田中美咲", "city": "東京" } // NG: キーだけダブルクォート、値がシングルクォート { "status": 'active' }

エラー3: コメントの記述

JSONは // も /* */ もサポートしていない。「APIのURL変えた」「この値は秒数」といったメモをJSON設定ファイルに書きたくなる気持ちはわかるが、標準JSONでは即構文エラーだ。

// NG: コメントを含むJSON { // APIのベースURL "apiUrl": "https://api.example.com", "timeout": 5000 /* タイムアウト: ミリ秒 */ } // OK: コメントなしのJSON { "apiUrl": "https://api.example.com", "timeout": 5000 }

Point

コメントが必要な場面では、 "_comment": "APIのベースURL" のようにアンダースコアプレフィックスのキーを使う慣習がある。ただしこれは普通のデータとして扱われる点に注意。コメントが本当に必要なら JSONC か YAML に切り替えるのが正解だ。

エラー4: undefined・NaN・Infinity

JavaScriptには undefined、NaN、Infinity という値があるが、JSONではいずれも使えない。特に厄介なのが JSON.stringify() の挙動で、undefined はキーごと消え、NaN や Infinity は黙って null に変換される。気づかずAPIに送り続けているケースが意外と多い。

// NG: JSONに含められない値 { "value1": undefined, "value2": NaN, "value3": Infinity, "value4": -Infinity } // OK: null または数値文字列に変換する { "value1": null, "value2": null, "value3": null, "value4": "-Infinity" } // JavaScriptでの注意点 const obj = { a: undefined, b: NaN, c: 1/0 }; JSON.stringify(obj); // → '{"b":null,"c":null}' ← aキーが消える！

エラー5: 数値の誤記

JSONの数値には先頭ゼロ（01 など）を付けられない。16進数（0xFF）、8進数（0o77）も同様にNG。「数値のつもりがダブルクォートで囲まれている」という文字列化ミスも地味によく出る。

// NG: 先頭ゼロ付き数値 { "code": 007, "hex": 0xFF } // OK: 通常の数値または文字列として { "code": 7, "hex": 255 } // NG: 数値のつもりが文字列になっているケース { "price": "3000" ← 文字列のため計算できない } // OK { "price": 3000 }

エラー6: 不正なエスケープシーケンス

バックスラッシュを含む文字列では、未定義のエスケープシーケンスを使うとエラーになる。Windowsのファイルパスをそのまま貼り付けると C:\Users\tanaka の \U が不正シーケンスと判断されてアウト。これはWindowsユーザーの定番ハマりポイントだ。

// NG: バックスラッシュが1つしかない（\Uが不正） { "path": "C:\Users\tanaka" } // OK: バックスラッシュをエスケープ { "path": "C:\\Users\\tanaka" } // OK: フォワードスラッシュに変換（推奨） { "path": "C:/Users/tanaka" }

エラー7: 文字コードの問題

JSON仕様はUTF-8エンコーディングを推奨（RFC 8259では必須）している。ファイルをShift-JISやEUC-JPで保存するとパーサーによっては文字化けやエラーが発生する。エディタのエンコーディング設定はUTF-8（BOMなし）に統一しておくこと。

JSON整形の方法

APIレスポンスが1行に圧縮されたJSONで返ってきたとき、素の状態では何が何だかわからない。整形（プリティプリント）すればインデントと改行が入り、ネスト構造が一目でわかる。デバッグ速度が全然違う。

ブラウザのデベロッパーツールで整形

実は追加ツール不要で使えるのがブラウザのDevToolsだ。ChromeもFirefoxもNetworkタブのPreviewが自動整形してくれるので、APIのレスポンスチェックならこれが一番速い。

  1. DevToolsを開く

    F12キー（またはCmd+Option+I）でDevToolsを開き、「Network」タブを選択。

  2. APIリクエストを選択

    画面を操作してAPIを呼び出し、Networkタブに表示されたリクエストの中からJSONを返すものをクリック。

  3. 「Preview」タブで確認

    右パネルの「Preview」タブを開くとツリー形式で整形済みのJSONが表示される。「Response」タブで生のレスポンスも確認可能。

コマンドライン（jq）で整形

jq はJSONを扱うコマンドラインの定番ツールだ。整形だけでなく、フィルタリング・変換・集計まで対応している。curlと組み合わせればAPIのレスポンスを確認しながら開発する速度が劇的に上がる。

# インストール（macOS） brew install jq # インストール（Ubuntu/Debian） sudo apt-get install jq # JSONファイルを整形して表示 jq '.' data.json # APIレスポンスをそのまま整形 curl -s https://api.example.com/users | jq '.' # 特定のキーだけ抽出 curl -s https://api.example.com/users | jq '.[].name' # ファイルに保存 jq '.' minified.json > pretty.json

Node.jsのREPLで整形

# Node.jsでJSONを整形（コマンドライン） node -e "const fs=require('fs'); const d=JSON.parse(fs.readFileSync('data.json')); console.log(JSON.stringify(d,null,2));" # または標準入力から echo '{"name":"田中","age":27}' | node -e "let d=''; process.stdin.on('data',c=>d+=c); process.stdin.on('end',()=>console.log(JSON.stringify(JSON.parse(d),null,2)));"

エディタ（VS Code）で整形

VS Codeは .json ファイルに対してフォーマット機能をビルトインで持っている。

Pythonで整形

# Python標準ライブラリだけで整形（インストール不要） python3 -m json.tool data.json # パイプで使う echo '{"a":1,"b":2}' | python3 -m json.tool # インデントを指定 python3 -m json.tool --indent 4 data.json

JSONバリデーションの方法

「このJSONが正しい構文か」「期待するデータ構造になっているか」を検証するのがバリデーション。構文チェック（シンタックスバリデーション）とスキーマバリデーションの2段階に分かれる。前者は誰でも使うが、後者まで実装しているプロジェクトは意外と少ない。

JavaScriptでの構文チェック

// try-catchでJSONパースエラーを捕捉 function validateJSON(str) { try { const parsed = JSON.parse(str); return { valid: true, data: parsed }; } catch (error) { return { valid: false, error: error.message }; } } const result = validateJSON('{"name": "田中", "age": 27}'); // → { valid: true, data: { name: '田中', age: 27 } } const invalid = validateJSON('{"name": "田中", "age": 27,}'); // → { valid: false, error: 'Unexpected token } in JSON at position ...' }

エラーメッセージの読み方

エラーメッセージ（例） 原因 確認箇所
Unexpected token , in JSON at position X 末尾カンマ / 余分なカンマ position X の前後
Unexpected token ' in JSON at position X シングルクォートの使用 文字列の囲み文字を確認
Unexpected end of JSON input 括弧の閉じ忘れ / 文字列の終端なし 末尾の括弧・クォートを確認
Unexpected token u in JSON at position 0 undefined が入っている 値に undefined がないか確認
Unexpected non-whitespace character after JSON JSON終了後に余分な文字がある 末尾の余分な文字を削除

ツールで効率化

エラーメッセージの「position X」は0始まりの文字インデックス。長いJSONだと何行目のどの位置か見当がつかないため、オンラインのJSON整形ツールに貼り付ければ行番号付きでエラー箇所を視覚的に確認できる。

JSON Schema入門

JSON Schemaは「このJSONはどういうデータ構造であるべきか」をJSON自身で定義する仕組みだ。型チェック、必須フィールドの確認、値の範囲制限といった細かいバリデーションルールを全部JSONで書ける。APIの仕様書として導入しておけば、フロントとバックで「思ってたのと違う」という齟齬が格段に減る。

JSON Schemaの基本構造

{ "$schema": "https://json-schema.org/draft/2020-12/schema", "$id": "https://example.com/user.schema.json", "title": "ユーザー", "description": "ユーザー情報のスキーマ", "type": "object", "required": ["name", "age", "email"], "properties": { "name": { "type": "string", "minLength": 1, "maxLength": 50, "description": "ユーザーの名前" }, "age": { "type": "integer", "minimum": 18, "maximum": 120, "description": "年齢" }, "email": { "type": "string", "format": "email", "description": "メールアドレス" }, "skills": { "type": "array", "items": { "type": "string" }, "uniqueItems": true, "description": "スキルリスト" }, "freelancer": { "type": "boolean", "description": "フリーランスかどうか" } } }

主要なキーワード一覧

キーワード 型 説明
type 全般 データ型（string / number / integer / boolean / array / object / null）
required object 必須プロパティ名の配列
properties object 各プロパティのスキーマ定義
minLength / maxLength string 文字列の最小・最大長
minimum / maximum number 数値の最小・最大値
pattern string 正規表現によるフォーマット検証
enum 全般 許可する値のリスト
items array 配列の各要素のスキーマ
format string フォーマット（email / date / uri など）

JavaScriptでJSON Schemaを使う（ajv）

// ajvのインストール npm install ajv ajv-formats // バリデーションの実装 import Ajv from "ajv"; import addFormats from "ajv-formats"; const ajv = new Ajv(); addFormats(ajv); const schema = { type: "object", required: ["name", "age"], properties: { name: { type: "string", minLength: 1 }, age: { type: "integer", minimum: 18 } } }; const validate = ajv.compile(schema); // 有効なデータ const validData = { name: "田中", age: 27 }; console.log(validate(validData)); // → true // 無効なデータ const invalidData = { name: "", age: 15 }; console.log(validate(invalidData)); // → false console.log(validate.errors); // → [{ message: 'must NOT have fewer than 1 characters', ... }]

APIレスポンスのデバッグ手順

Web開発の現場でREST APIのJSONレスポンスに悩む機会は多い。「パースできない」「値が想定と違う」「そもそも何も返ってこない」——原因の切り分けを体系的にやるかどうかで、解決時間が大きく変わる。

ステップ1: レスポンスの生データを確認する

// fetchのレスポンスをテキストとして取得して確認 async function debugApiResponse(url) { const response = await fetch(url); // まずステータスコードを確認 console.log('Status:', response.status, response.statusText); console.log('Content-Type:', response.headers.get('Content-Type')); // 生のテキストとして取得 const text = await response.text(); console.log('Raw response:', text); // JSONとしてパース try { const data = JSON.parse(text); console.log('Parsed:', data); return data; } catch (e) { console.error('JSON parse error:', e.message); console.error('Problematic text around error position'); } }

ステップ2: よくある原因を確認する

  1. Content-Typeヘッダーを確認

    Content-Type: application/json が返ってこない場合、サーバー側の設定ミスの可能性がある。HTMLのエラーページが返ってきてJSONパースに失敗するケースも多い。

  2. BOM（バイトオーダーマーク）の確認

    一部のサーバーはBOM付きUTF-8でJSONを返す。レスポンス先頭に \uFEFF が含まれるとパースエラーになるので、text.replace(/^\uFEFF/, '') で除去する。

  3. 文字化けの確認

    日本語を含むJSONでは文字コードの問題が起こりやすい。レスポンスヘッダーの charset を確認し、必要なら TextDecoder で明示的にデコードする。

  4. JSONPやコールバック形式の確認

    レガシーなAPIでは callback({"data": ...}) というJSONP形式で返すことがある。純粋なJSONではないのでパースエラーになる。

curlでAPIのデバッグ

# レスポンスヘッダーも含めて確認 curl -v https://api.example.com/users # jqと組み合わせて整形 curl -s https://api.example.com/users | jq '.' # 認証付きリクエスト curl -s -H "Authorization: Bearer YOUR_TOKEN" \ -H "Accept: application/json" \ https://api.example.com/users | jq '.' # POSTリクエストでJSONを送信 curl -s -X POST \ -H "Content-Type: application/json" \ -d '{"name":"田中","age":27}' \ https://api.example.com/users | jq '.'

ツールで効率化

Postman（無料）やInsomnia（無料）などのAPIクライアントツールを使えば、GUIでリクエストを組み立て、レスポンスを自動整形して確認できる。繰り返しテストが必要な開発では手放せないツールだ。

JSON整形ツールの使い方

ToolShare LabのJSON整形ツールは、ブラウザ上で即座に整形・検証できる。登録不要で、データはすべてブラウザ内で完結するためサーバーには一切送信されない。APIキーや個人情報を含むJSONを貼り付けるときも安心して使える。

主な機能

使い方の手順

  1. JSONを貼り付ける

    テキストエリアにJSONを直接貼り付ける。APIレスポンスのコピーでも、ファイル内容のペーストでもOK。

  2. 自動検証される

    入力と同時にバリデーションが走り、エラーがあれば赤色でエラー内容と行番号を表示。構文が正しければ緑色の「有効なJSON」表示に切り替わる。

  3. 整形ボタンを押す

    「整形」ボタンを押すとインデント（2スペースまたは4スペース）付きで整形される。インデント幅はオプションで変更可能。

  4. コピーして使う

    「コピー」ボタンで整形済みJSONをクリップボードにコピー。そのまま使いたいコードエディタや設定ファイルに貼り付けられる。

Point

圧縮JSONと整形JSONを使い分けると、本番環境（転送量を絞りたい）と開発環境（デバッグしやすくしたい）の両方に対応できる。ツールを使えばこの切り替えが数秒で終わる。わざわざIDEでインデントを手直しする時代ではない。

JSON整形ツールを今すぐ使う

ブラウザ完結・登録不要のJSON整形ツールで、APIレスポンスの確認や設定ファイルのデバッグを即座に行える。バリデーション・圧縮・ツリー表示もすべて無料。

JSON整形ツールを開く 構造化データバリデーター 正規表現テスター

よくある質問

JSONとJavaScriptオブジェクトの違いは何ですか？
最大の違いはキーと文字列値の囲み文字だ。JSONではすべてダブルクォートが必須だが、JavaScriptオブジェクトではシングルクォートも使えるしキーのクォートも省略できる。またJSONはコメント・末尾カンマ・undefined・NaN・Infinityをサポートしていない。JSONはあくまで「データ交換フォーマット」であり、JavaScriptのオブジェクトリテラルとは別物と理解しておくといい。
JSON.parse()でエラーが出た時、どう対処すればいいですか？
まずtry-catchでエラーメッセージを取得し、「position X」の前後の文字を確認する。次にオンラインのJSON整形ツールに貼り付けると、エラー箇所が視覚的にハイライトされてわかりやすい。最多の原因は末尾カンマ・シングルクォート・コメント混入・括弧の閉じ忘れの4つ。APIから取得したJSONでエラーが出た場合は、まず console.log() で生のレスポンステキストを確認するのが定石だ。
JSONにコメントを書く方法はありますか？
標準JSONにはコメント機能がない。選択肢は3つ。①通常のキーとしてメモを入れる（例: "_comment": "説明"）、②JSONC（JSON with Comments）を使う（VS CodeやTypeScriptの設定ファイルで採用されている形式）、③YAMLに切り替える（コメントをサポートしていて人間には読みやすい）。プロダクションAPIでコメントが必要なら、OpenAPI仕様の description フィールドに書くのが筋だ。
JSONとXMLはどちらを使うべきですか？
新規のWeb APIには原則としてJSONを選んでおけばいい。XMLより記述量が少なく、JavaScriptとの親和性が高く、パース処理も高速だ。ただしSOAPベースのレガシーシステムとの連携、HTML/XML名前空間が必要なドキュメント形式、SVGやRSSのようなマークアップ言語の設計など、XMLのほうが筋の良い場面は存在する。新規プロジェクトであれば、まず理由なくXMLを選ぶ必要はない。
JSON Schema と TypeScriptの型定義はどう使い分けますか？
TypeScriptの型定義はコンパイル時（開発時）のチェックに使い、JSON Schemaはランタイム（実行時）のバリデーションに使う——この役割分担が正解だ。TypeScriptの型だけでは、実際に返ってきたAPIレスポンスに予期しない値が混じっていても実行時には気づけない。ajvなどでJSON Schemaバリデーションを組み合わせると、その抜け穴を防げる。ts-to-zodやtypescript-json-schemaを使えば、TypeScriptの型からJSON Schemaを自動生成することも可能だ。
大きなJSONファイルを効率よく扱うには？
数十MB以上のJSONを JSON.parse() で一括処理すると、ブラウザやNode.jsがメモリ不足でクラッシュするケースは実際にある。Node.jsなら JSONStream や stream-json などのストリーミングパーサーを使うとメモリを節約しながら処理できる。データ量が多い場合はJSONL（JSON Lines）形式——1行に1JSONオブジェクトを書く——にしておくと、行単位のストリーム処理がしやすくなる。ブラウザ側での表示には仮想スクロールの導入も検討してみよう。

関連記事・ツール

JSON整形・フォーマットツール

JSONを即座に整形・圧縮・バリデーション。ブラウザ完結で登録不要。

正規表現入門ガイド

JSONのパターンマッチングや文字列処理に役立つ正規表現の基礎から実践まで。

構造化データバリデーター

JSON-LDの構造化データをブラウザで即座に検証。SEOリッチリザルト対応を確認。