ツールさん

How to

JSON フォーマッターの使い方

JSON を貼り付けるだけで整形・圧縮・検証ができる開発補助ツールです。エラー位置の把握やコピーしやすい表示を重視します。JSON を入力して整形または検証し、結果をコピーする流れで使います。

JSON フォーマッター のサムネイル画像JSON フォーマッター のサムネイル画像

Use Cases

こんな時に使います

  • API レスポンスを確認したい
  • 壊れた JSON のエラー箇所を見たい
  • 整形済み JSON を資料へ貼りたい
  • 設定ファイルの JSON を整形して可読性を上げたい
  • JSON の構造を確認しやすい形に整えたい
  • エラー箇所を特定して修正前に原因を確認したい

Capabilities

このツールでできること

  • 整形と圧縮を切り替え
  • 構文エラーの表示
  • コピーしやすい出力
  • 1 クリックで整形と圧縮を切り替え
  • 不正な JSON のエラー箇所を行単位で表示
  • 整形結果をそのままクリップボードへコピー

Guide

画面ごとの使い方

設定、入力、プレビュー、結果、保存など、画面内のエリアごとに操作方法を説明します。

01 HOWTO

JSON 入力と検証エリア

左側の入力欄へ整形または圧縮したい JSON を貼り付けるエリアです。入力を消す、入力をコピーする、構文を検証する操作もここで行います。

JSON フォーマッター の JSON 入力と検証エリア を示す画面JSON フォーマッター の JSON 入力と検証エリア を示す画面

この要素でできること

  • JSON を直接入力できる
  • 入力内容をクリアできる
  • 入力中の JSON をコピーできる
  • 処理前に構文を検証できる

操作する場所

01
JSON 入力

整形または圧縮したい JSON を入力できます。

JSON フォーマッター の JSON 入力 の操作位置を示す画面JSON フォーマッター の JSON 入力 の操作位置を示す画面
02
入力クリア

現在の入力を消して、別の JSON でやり直せます。

JSON フォーマッター の 入力クリア の操作位置を示す画面JSON フォーマッター の 入力クリア の操作位置を示す画面
03
入力コピー

編集中の JSON を外部メモやレビューへ貼り付けられます。

JSON フォーマッター の 入力コピー の操作位置を示す画面JSON フォーマッター の 入力コピー の操作位置を示す画面
04
構文検証

整形前に JSON の構文エラーを確認できます。

JSON フォーマッター の 構文検証 の操作位置を示す画面JSON フォーマッター の 構文検証 の操作位置を示す画面

02 HOWTO

整形・圧縮実行エリア

上部の操作で JSON を読みやすく整形するか、余分な空白を削って圧縮するエリアです。結果欄を見ながら入力を調整できます。

JSON フォーマッター の 整形・圧縮実行エリア を示す画面JSON フォーマッター の 整形・圧縮実行エリア を示す画面

この要素でできること

  • 読みやすい整形結果を作れる
  • 圧縮した JSON を作れる
  • 結果欄で変換後を確認できる
  • 入力へ戻って修正できる

操作する場所

01
整形

インデント付きの読みやすい JSON に変換できます。

JSON フォーマッター の 整形 の操作位置を示す画面JSON フォーマッター の 整形 の操作位置を示す画面
02
圧縮

空白や改行を減らした JSON に変換できます。

JSON フォーマッター の 圧縮 の操作位置を示す画面JSON フォーマッター の 圧縮 の操作位置を示す画面
03
結果欄

整形または圧縮した結果を確認できます。

JSON フォーマッター の 結果欄 の操作位置を示す画面JSON フォーマッター の 結果欄 の操作位置を示す画面
04
入力の見直し

結果が意図と違う場合は入力欄へ戻って修正できます。

JSON フォーマッター の 入力の見直し の操作位置を示す画面JSON フォーマッター の 入力の見直し の操作位置を示す画面

03 HOWTO

結果確認とコピーエリア

右側の結果欄で変換後の JSON を確認し、必要な形に整えてからコピーするエリアです。共有や設定ファイルへの貼り付け前に使います。

JSON フォーマッター の 結果確認とコピーエリア を示す画面JSON フォーマッター の 結果確認とコピーエリア を示す画面

この要素でできること

  • 変換結果を確認できる
  • 結果をコピーできる
  • 整形結果を利用できる
  • 圧縮結果を利用できる

操作する場所

01
結果の確認

右側の結果欄で、処理後の JSON を確認できます。

JSON フォーマッター の 結果の確認 の操作位置を示す画面JSON フォーマッター の 結果の確認 の操作位置を示す画面
02
結果コピー

変換後の JSON をクリップボードへコピーできます。

JSON フォーマッター の 結果コピー の操作位置を示す画面JSON フォーマッター の 結果コピー の操作位置を示す画面
03
整形結果の利用

読みやすい形でレビューや仕様確認に使えます。

JSON フォーマッター の 整形結果の利用 の操作位置を示す画面JSON フォーマッター の 整形結果の利用 の操作位置を示す画面
04
圧縮結果の利用

余分な空白を減らした形で貼り付けや保存に使えます。

JSON フォーマッター の 圧縮結果の利用 の操作位置を示す画面JSON フォーマッター の 圧縮結果の利用 の操作位置を示す画面

04 HOWTO

構文検証と再編集エリア

JSON が処理できない時や結果が意図と違う時に、構文検証、入力修正、入力クリア、結果コピーを確認するエリアです。

JSON フォーマッター の 構文検証と再編集エリア を示す画面JSON フォーマッター の 構文検証と再編集エリア を示す画面

この要素でできること

  • 構文エラーを確認できる
  • 入力 JSON を修正できる
  • 入力をクリアしてやり直せる
  • 確認済みの結果をコピーできる

操作する場所

01
構文検証

JSON として処理できる状態か確認できます。

JSON フォーマッター の 構文検証 の操作位置を示す画面JSON フォーマッター の 構文検証 の操作位置を示す画面
02
入力の修正

検証結果や出力結果を見て、左側の入力を直せます。

JSON フォーマッター の 入力の修正 の操作位置を示す画面JSON フォーマッター の 入力の修正 の操作位置を示す画面
03
入力クリア

現在の入力を消して、新しい JSON でやり直せます。

JSON フォーマッター の 入力クリア の操作位置を示す画面JSON フォーマッター の 入力クリア の操作位置を示す画面
04
結果コピー

修正後の結果を確認してからコピーできます。

JSON フォーマッター の 結果コピー の操作位置を示す画面JSON フォーマッター の 結果コピー の操作位置を示す画面

Notes

使う時の注意

使う前に確認しておくと迷いにくいポイントを、理由つきでまとめています。

確認すること

貼り付ける前に JSON 全体を確認する

途中で切れた JSON では正しい整形結果になりません。レスポンスや設定値を丸ごと貼り付けると、エラー箇所も見つけやすくなります。

確認すること

整形と圧縮を用途で使い分ける

確認用なら整形、送信用や埋め込み用なら圧縮が向いています。目的に応じて出力を切り替えると作業が早くなります。

確認すること

JSON 以外の形式は整形できない

このツールは標準の JSON に特化しています。YAML・XML・JSON5 など他の形式は扱えません。変換したい形式が JSON かどうかを先に確認してください。

FAQ

JSON フォーマッター に関する質問

使う前に判断しやすい質問を先に整理します。

大きな JSON も扱えますか?

ブラウザで扱える範囲なら使えます。非常に大きい JSON では、整形や検証に時間がかかったり、画面の反応が重くなることがあります。

JSON 以外も整形できますか?

このページでは JSON の整形、圧縮、検証のみ行えます。YAML や XML は扱えません。

整形時のインデントは変更できますか?

現時点では標準のインデント設定で整形します。インデント幅の変更には対応していません。

コメント付き JSON(JSON5 や JSONC)も扱えますか?

このページは標準の JSON のみに対応しています。JSON5 や JSONC(コメント付き)は扱えません。

出力をそのままコピーして使えますか?

はい。整形・圧縮後の結果をワンクリックでコピーできます。

どのくらいの JSON サイズまで扱えますか?

ブラウザで扱える範囲での処理になります。非常に大きい JSON では動作が重くなることがあります。

次に見る使い方

関連する使い方

関連する使い方を続けて見られるように、次に確認しやすい導線をまとめています。