Softonic

JSONフォーマッター

ステップ 1 / 4 JSONフォーマッター
次へ：オプション

APIレスポンス、設定ファイル、Webhook、ログの抜粋などからJSONを貼り付けて、整形、圧縮、検証を選びます。整形ではネストしたオブジェクトや配列を2スペースまたは4スペースで展開し、圧縮では不要な空白を削除し、検証ではコピー前にそのテキストが有効なJSONかどうかを確認します。

JSONを整形する方法

  1. 1

    JSONを貼り付ける

    オブジェクト、配列、文字列、数値、真偽値、`null` のいずれかの完全なJSON値を入力します。

  2. 2

    処理を選ぶ

    読みやすい出力には整形、コンパクトな出力には圧縮、構文確認には検証を使います。

  3. 3

    インデントを選ぶ

    整形出力では、Webプロジェクトなら2スペース、リポジトリの規約に合わせるなら4スペースを選びます。

  4. 4

    結果をコピーする

    パーサーのメッセージまたは整形された出力を確認し、結果をエディター、APIクライアント、ドキュメントへコピーします。

このJSONフォーマッターでできること

  • JSONの整形: {"a":1,"b":[1,2,3]} のようなコンパクトな入力を、インデント付きで読みやすいJSONにします。
  • JSONの圧縮: 読みやすさのためだけに入っている空白を削除します。短いサンプル、埋め込み、送信用ペイロードに便利です。
  • 構文チェック: 貼り付けたテキストをJSONとしてパースできるか確認します。これは構文チェックであり、JSON Schemaによる検証ではありません。
  • 任意のJSONルート値に対応: オブジェクトと配列が一般的ですが、JSONテキストは文字列、数値、true、false、null でも構いません。
  • シンプルな流れ: 貼り付ける、処理を選ぶ、出力を確認する、結果をコピーする、の順で使えます。

意図的に変更しないこと

  • 不正なJSONを自動修復しません。パーサーのメッセージを見て修正箇所を確認します。
  • callback({...}) のようなJSONPラッパーは受け付けません。
  • 事前に削除していないJSONCのコメントや末尾カンマは受け付けません。
  • オブジェクトのキーは並べ替えません。既存の順序は、パーサーとシリアライザーが許す範囲で維持されます。
  • 業務ルール、必須フィールド、APIスキーマは検証しません。その確認にはJSON Schemaバリデーターを使ってください。

整形オプションの選び方

状況 おすすめの処理 役立つ理由
APIレスポンスを読む 2スペースで整形 ネストしたオブジェクトや配列を追いやすくなります。
リポジトリの規約に合わせる 2または4スペースで整形 インデントが揃うとコードレビューが見やすくなります。
リクエストにペイロードを埋め込む 圧縮 JSONの値を変えずに空白だけを減らします。
ログからコピーしたデータを確認する 検証 再利用前に、貼り付けた断片が完全なJSONか確認できます。
APIドキュメントを用意する 整形 サンプルを確認しやすく、コピーもしやすくなります。

検出できるJSON構文の問題

パーサーのメッセージ よくある原因 対処方法
Unexpected token ' at position X キーや文字列をシングルクォートで囲んでいる JSON文字列にはダブルクォートを使います。
Unexpected end of JSON input 閉じ波括弧、閉じ角括弧、または閉じクォートが足りない 貼り付けたテキストの末尾を確認します。
Unexpected token , at position X 最後の要素の後に末尾カンマがある 末尾カンマを削除します。
Unexpected token a at position X クォートなしのキー、NaN、undefined がある キーをクォートで囲み、有効なJSON値だけを使います。
Unexpected token / at position X JSONCまたはJavaScriptからコメントをコピーしている 検証前に // と /* */ のコメントを削除します。

実用的なヒント

  • レスポンスを確認するときはまず整形し、本当にコンパクトなペイロードが必要な場合だけ圧縮します。
  • ドキュメント、チケット、APIクライアントにJSONを貼り付ける前に検証してください。ログの一部からコピーした場合は特に重要です。
  • プロジェクトのインデント規約に合わせます。既存ファイルを2スペースから4スペースへ変えると、差分が読みづらくなることがあります。
  • 秘密情報、本番環境の認証情報、顧客データを汎用Webツールに貼り付けるのは避けてください。機密性の高いペイロードには、組織が承認した内部ツールまたはオフラインツールを使います。

よくある質問

いいえ。このツールはJSONの構文だけを確認します。必須フィールド、許可された値、オブジェクト構造を確認したい場合は、正しくパースできた後にJSON Schemaバリデーターを使ってください。

厳密なJSONではコメントも末尾カンマも許可されていません。検証または整形の前に、JSONC形式のコメントと最後のカンマを削除してください。

プロジェクトですでに使われているスタイルに合わせてください。JavaScriptやWeb設定ファイルでは2スペースが一般的で、バックエンド系のリポジトリでは4スペースのほうが読みやすい場合もあります。

秘密情報、アクセストークン、認証情報、顧客レコードを汎用Webフォーマッターへ貼り付けるのは避けてください。機密性の高いペイロードには、承認済みの内部ツールまたはオフラインツールを使ってください。

関連ツール

Webpack設定ジェネレーター

素の JavaScript、React、Vue 向けに webpack 5 の webpack.config.js を生成します。TypeScript、Babel、CSS や Sass、画像、HtmlWebpackPlugin、開発サーバー、npm install のコマンドまでそろいます。

CSSローディングアニメーション生成ツール

純粋なCSSで円形スピナーを作成できます。直径、枠の太さ、アクセントカラー、回転速度を設定し、ライブプレビューを確認して、そのまま使えるCSSをコピー。SVGもJavaScriptも不要です。

OpenAPI 検証ツール

OpenAPI または Swagger のドキュメントを JSON か YAML で貼り付けて、コア構造をチェックします: バージョンフィールド、info オブジェクト、paths を、わかりやすいエラーと警告つきで。

カラーティントジェネレーター

ベースカラーの明るい色合いを生成します。デザイン システム トークン、背景、ホバー状態を 3 ～ 20 段階でスケールします。

CMYK から RGB への変換

標準的な計算式で CMYK の割合をおおよその RGB 値と Hex 値に変換し、画面用にすばやく確認できます。

PHPフォーマッター

単純なPHPコードに改行と2または4スペースのインデントを追加します。結果は必ず確認してください。PHPパーサーでもPSR-12準拠ツールでもありません。

このツールは他の言語でも利用できます