てもとツール

2026-05-08

JSONのエラーが出たときに整形して読みやすくするコツ

「JSONが読めない」「エラーの場所がわからない」と困ったとき、JSON整形ツールに貼り付けるだけで問題箇所を日本語で教えてくれます。使い方と活用シーンを解説。

この記事の要点

  • テキストを貼り付けて「整形する」を押すとネストが読みやすい形に変わる
  • 構文エラーは「○行○列にエラー:」と日本語で場所を教えてくれる
  • 「圧縮する」で余分な空白・改行を削除しコンパクトにまとめられる
  • 入力データはブラウザ内だけで処理され、外部に送信されない

「コピーしてきたデータが読めない」「エラーの場所がわからない」というとき、JSON整形ツールを開いてください。テキストを貼り付けてボタンを押すだけで、ミスの場所を日本語で教えてくれます。

「このデータ、どこが間違ってるの?」あるある 3 つ

ツールやサービスのデータを扱うときに、こんな場面でつまずいたことがあるでしょうか。

「コピーしたら1行のかたまりになってしまった」。AIのアウトプットやWebサービスから取得したデータを貼り付けると、改行のない長い文字列になっていることがあります。どこが始まりでどこが終わりなのか、見ただけではわかりません。

「どこかが間違っていると言われるが、どこかわからない」。プラグインの設定ファイルや外部サービスのデータで起きます。「フォーマットが正しくない」と言われても、どの部分か特定できないケースです。

「ファイルが大きすぎて開けない」。圧縮されたデータ(改行なしの1行形式)は機械が処理するための形式です。確認・修正するためには、人が読める形に整える必要があります。

データを整形すると何が変わるか

整形とは、ひとかたまりのテキストをインデント(字下げ)付きの読みやすい形に変換することです。

整形前(読みにくい):

{"name":"田中太郎","age":35,"city":"東京","hobbies":["読書","料理"],"active":true}

整形後(読みやすい):

{
  "name": "田中太郎",
  "age": 35,
  "city": "東京",
  "hobbies": [
    "読書",
    "料理"
  ],
  "active": true
}

同じデータでも、整形後はどの項目に何の値が入っているか、ひと目で把握できます。

JSON整形ツールの使い方

JSON整形ツールを開くと、大きなテキスト入力欄が表示されます。

JSON整形ツールの初期画面。大きな入力欄と「整形する」「圧縮する」ボタンが並んでいる

ステップ 1: 確認したいテキストをコピーして、入力欄に貼り付けます。初めて使う方は「サンプルを試す」リンクで自動入力できます。

ステップ 2: 「整形する」ボタンを押します。下の「出力 JSON」欄に、インデント付きで変換されたテキストが表示されます。

田中太郎のデータを入力して整形した状態。name・age・city・hobbiesの各項目が読みやすく整理されている

ステップ 3: 「コピー」ボタンで結果をクリップボードにコピーできます。別の場所に貼り付けて使ってください。

エラーが出たときの確認方法

入力データに問題がある場合、ボタンを押すとエラーメッセージが表示されます。

たとえば「“name”:“田中太郎” の次にカンマがない」という場合を考えます。「○行目○列にエラー:」という形で問題の場所を日本語で示してくれます。

カンマ抜けのあるデータを入力して整形した状態。エラーメッセージが赤文字で表示されている

エラーメッセージの行・列番号を見て、入力テキストの該当部分を修正します。よくあるミスは次の3つです。

よくあるミス具体例
カンマ抜け"name":"太郎" "age":35(間のカンマが必要)
末尾のカンマ"name":"太郎",(最後の項目にカンマは不要)
引用符の種類「“」ではなく「“」や「”」(半角ダブルクォートが必要)

圧縮して1行にまとめる

「圧縮する」ボタンを使うと、改行やスペースを取り除いて1行のコンパクトな形に変換できます。

整形済みデータを圧縮した状態。すべての改行・スペースが除去され1行になっている

設定ファイルをシステムに登録するときや、別のツールへ貼り付ける際に「1行で指定してください」と求められる場面で役立ちます。

詳細設定でさらに使いやすく

「詳細設定」を開くと、追加の設定が使えます。

インデントのスペース数(2または4): 整形後の字下げ幅を変えられます。チームのルールに合わせて選んでください。

キーをソート(アルファベット順): データの項目名をアルファベット順に並べ直します。

詳細設定でキーソートをオンにした状態。zebra・apple・monkeyがアルファベット順に並び替えられている

こんな場面で使える

ブログやnoteの設定ファイルを確認する

WordPressプラグインやnoteの外部連携では、設定を JSON 形式で入力する場面があります。整形ツールで構文チェックをかけてからコピーすると、「形式が違います」エラーを事前に防げます。

フォームから受け取ったデータを確認する

Googleフォームや外部サービスからエクスポートしたデータを確認するとき、整形すると構造がはっきりします。何件・何項目のデータが入っているか、見やすくなります。

アプリの設定をバックアップする

スマートフォンアプリや Webサービスのエクスポートで、設定データを保存できます。整形しておくと、後で見返したときに内容がわかりやすくなります。

ChatGPTのアウトプットを確認する

「このデータをJSON形式で出力して」と依頼したとき、AIの出力がひとかたまりになることがあります。整形ツールに貼り付けると構造が見えやすくなり、想定通りのデータか確認できます。

使用例

たとえば、フリーランスのライターがクライアントから依頼を受けた場面です。「設定ファイルをこのJSON形式に直してほしい」と渡されたデータが、1行のかたまりで読めません。

JSON整形ツールに貼り付けて「整形する」を押すと、30項目以上ある設定内容が一瞬で読みやすく変換されます。確認後に「圧縮する」で元の1行形式に戻してクライアントに返せます。

安心して使えるポイント

入力したデータはブラウザの中だけで処理されます。社内の設定ファイルや個人情報が含まれるデータを貼り付けても、外部サーバーには一切送信されません。

関連ツール

まとめ

JSONデータで困ったときの対処法を3つまとめます。

  1. 読めないときは「整形する」。貼り付けてボタンを押すだけでインデント付きの読みやすい形になる
  2. エラーが出たときは日本語メッセージを読む。「○行○列」でミスの場所が特定できる
  3. 1行に戻したいときは「圧縮する」。整形後のデータをコンパクトな形に変換できる

JSON整形ツールはブックマークしておくと、データ確認のたびにすぐ使えます。

スマートフォン幅(375px)でJSON整形ツールを表示した状態。入力欄と整形・圧縮ボタンが縦に並んでいる

補足: 開発者の方へ

整形は JSON.parse() でオブジェクトに変換します。そのあと JSON.stringify(value, null, indent) で再シリアライズします。圧縮は JSON.stringify(value) を引数なしで呼ぶだけです。

エラーメッセージは SyntaxError.message からブラウザごとに異なるフォーマットを正規表現で解析します。Chrome・Firefox・Safariそれぞれで SyntaxError.message の形式が異なります。複数パターンのフォールバック処理を実装することで、日本語の「○行○列にエラー:」形式に統一して表示しています。