JSONフォーマッター

JSONテキストの整形、構造確認、圧縮ができます。

// about

ツールについて

JSONテキストは1行に詰まっていると読みにくいものです。このツールは改行とインデントを整えて、誰でも見やすく整理します。

使い方

  1. 整理したいJSONテキスト上のボックスに貼り付けます。
  2. 「実行」を押すか、必要に応じて「圧縮」にチェックを入れます。
  3. 整形されたテキストをコピーしてそのまま利用します。

このツールが使われる理由

  • ワンクリックで見づらいJSONを綺麗に整列します。
  • カンマや引用符の押し忘れなどの入力ミスをすぐに見つけられます。
  • データをコンパクトにする圧縮(Minify)機能も使えます。

よくある質問 (FAQ)

JSONとは何ですか?

JSONはコンピュータ同士が情報をやり取りするときに使う、中括弧や引用符でまとめた記法です。

入力したデータはサーバーに保存されますか?

いいえ。処理はすべてお使いのブラウザ内で行われるため安心です。

エラーが出た場合はどうすればいいですか?

引用符閉じ忘れやカンマの抜けがないか、テキストを確認してみてください。

ガイド · データ · 4分で読めます

JSONの構文エラーを直す:よくある7つのミスとJSONの整え方

APIのレスポンス、設定ファイル、ログなど、JSONは開発者が最もよく読むデータ形式です。それでもカンマや引用符ひとつで「Unexpected token」エラーが起こります。原因をすばやく見つける方法を紹介します。

JSON(JavaScript Object Notation)はRFC 8259とECMA-404で標準化されたテキスト形式です。JavaScriptから生まれましたが、今ではほぼすべての言語でサポートされています。値の型は、文字列、数値、真偽値(true/false)、null、配列、オブジェクトの6種類だけです。

{
  "id": 1024,
  "name": "AIBIZAP",
  "active": true,
  "tags": ["tools", "guides"],
  "owner": null
}
JSONの基本、パースエラーの原因になる7つのミス、大きな数値や日付の落とし穴、JSONをクラスやデータベースのテーブルに変換する方法を解説します。
ガイドを読む →
AIで作る

このツールをAIで自作してみましょう

自分用のバージョンが必要なら、作業指示プロンプトをAIチャットに貼り付けるか、スキルファイルをAIコーディングエージェントに保存してください。私たちが開発時に整理した機能、例外、テストケースが含まれています。

プロンプトとスキルは英語で提供しています。AIツールはどの言語でもよく理解できます。

AI作業指示プロンプト

Claude、ChatGPT、GeminiなどのAIチャットにそのまま貼り付けてください。

You are an experienced full-stack web developer. Build a web tool called "JSONフォーマッター" that meets the requirements below.

## Goal

Build a tool that validates JSON and pretty-prints or minifies it.

## Core features

- Validation with error line and column
- Indent with 2 spaces, 4 spaces or tabs
- Minify mode
- Optional alphabetical key sorting
- Copy result and download as .json

## Inputs

- JSON text
- Indentation, sorting and mode options

## Outputs

- Formatted or minified JSON
- Error message with position

## Edge cases and handling rules

- Explain common errors such as trailing commas, single quotes and comments in plain language
- Preserve integers larger than 2^53 exactly
- Strip a leading BOM
- Stay responsive with multi-megabyte input

## Implementation requirements

- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.
- Make the UI responsive and easy to use on mobile; label every input and keep everything keyboard accessible.
- Add a Copy button for results and show clear, friendly error messages for invalid input.
- Keep the core logic in functions separate from the UI so it can be unit-tested.

## Definition of done (test cases)

- '{"a":1,}' is reported as a trailing comma error
- Formatting then minifying keeps the same meaning
- 12345678901234567890 is preserved

First outline your implementation plan in at most five lines, then write the complete code, and finally explain how to check the test cases above.

スキル (SKILL.md)

Claude CodeなどのAIコーディングエージェントで .claude/skills/build-json-formatter/SKILL.md に保存すると、このツールを作る・直すたびに再利用できます。

---
name: build-json-formatter
description: Use when building or changing a JSONフォーマッター tool. Build a tool that validates JSON and pretty-prints or minifies it.
---

# Build: JSONフォーマッター

## Goal

Build a tool that validates JSON and pretty-prints or minifies it.

## Workflow

1. Review the required features, inputs and outputs below and ask about anything missing first.
2. Implement the core logic as pure functions separate from the UI.
3. Check the logic against the test cases in the verification list.
4. Build a responsive UI with an input form, a result area and a Copy button.
5. Reproduce each edge case listed under Rules and refine the error messages.

## Core features

- Validation with error line and column
- Indent with 2 spaces, 4 spaces or tabs
- Minify mode
- Optional alphabetical key sorting
- Copy result and download as .json

## Inputs

- JSON text
- Indentation, sorting and mode options

## Outputs

- Formatted or minified JSON
- Error message with position

## Rules

- Explain common errors such as trailing commas, single quotes and comments in plain language
- Preserve integers larger than 2^53 exactly
- Strip a leading BOM
- Stay responsive with multi-megabyte input
- Build it as a single page (HTML, CSS, JavaScript) that runs entirely in the browser, and never send the user's input to a server.

## Verification

- [ ] '{"a":1,}' is reported as a trailing comma error
- [ ] Formatting then minifying keeps the same meaning
- [ ] 12345678901234567890 is preserved

AIに任せるときのコツ

  • 最初の行に使用技術(React、Vue、素のHTMLなど)を書くと、プロジェクトに合ったコードになります。
  • コードを受け取る前に、テストケースを実行して結果を見せるよう依頼しましょう。
  • 本物のパスワード、顧客データ、APIキーは入力せず、サンプル値を使ってください。