APIレスポンスをターミナルに吐き出したら1行にミニファイされたJSONが返ってきた、という経験は誰にでもあると思う。設定ファイルの構文エラーがどこにあるのか分からず、括弧を目で数えた経験も。
こういうときに外部のオンラインJSON整形ツールに貼り付ける人は多いが、よく考えると、そこに貼っているJSONにはAPIキーやアクセストークン、社内データが含まれている可能性がある。サーバーに送信される前提のツールでは、機密情報の扱いが気になる場面がある。
そこで、ブラウザ内だけで完結するJSON整形・検証ツールを作った。外部送信ゼロ、ライブラリ依存ゼロで、JavaScriptの標準APIだけで動く。
JSON.parse() + JSON.stringify() で整形する基本の仕組み
JSON整形の核となるロジックは驚くほどシンプルで、JavaScriptの標準APIだけで完結する。
const parsed: unknown = JSON.parse(input)
const formatted = JSON.stringify(parsed, null, 2)
たった2行。JSON.parse() で文字列をJavaScriptオブジェクトに変換し、JSON.stringify() の第3引数にインデント幅を渡して再度文字列化する。第3引数の 2 は2スペースインデントを意味する。
この2行だけで、ミニファイされた {"name":"taro","age":30,"address":{"city":"tokyo"}} が以下のように展開される。
{
"name": "taro",
"age": 30,
"address": {
"city": "tokyo"
}
}
ポイントは JSON.parse() の戻り値を unknown 型で受けていること。any ではなく unknown にすることで、後続の処理で型安全性を維持できる。ぱんだツールズでは TypeScript の any 禁止をコーディング規約にしているため、この書き方が徹底されている。
ちなみに JSON.stringify() の第2引数は replacer 関数（または配列）で、特定のキーを除外したり値を変換したりできる。今回は null を渡して全フィールドをそのまま出力している。
パースエラーのハンドリング。SyntaxError から位置情報を取り出す
整形ツールとして重要なのは、壊れたJSONを貼り付けたときの挙動だ。JSON.parse() が不正なJSONを受け取ると SyntaxError を投げる。このエラーオブジェクトには、どこで構文解析に失敗したかの情報が含まれている。
try {
const parsed: unknown = JSON.parse(input)
setOutput(JSON.stringify(parsed, null, 2))
} catch (err: unknown) {
if (err instanceof SyntaxError) {
setError(err.message)
} else {
setError('JSON の解析に失敗しました')
}
}
err instanceof SyntaxError で型を絞り込んでからメッセージを取得している。catch の引数を unknown 型で受けることで、TypeScript の strict モードでも安全にエラーを処理できる。
ブラウザのJavaScriptエンジンが返す SyntaxError.message には、エラーが発生した位置情報が含まれる。たとえば Chrome（V8）の場合はこんなメッセージが返ってくる。
Expected property name or '}' in JSON at position 42
Firefox（SpiderMonkey）では少し違う形式で返る。
JSON.parse: expected ',' or '}' after property value in object at line 3 column 15
ブラウザによってメッセージ形式が異なるが、いずれもどこで壊れたかの手がかりが入っている。この情報をそのまま画面に表示することで、ユーザーは問題箇所を特定できる。
実際のUIでは、エラー発生時に赤背景のパネルで「構文エラー」という見出しとともにエラーメッセージを表示する。正常な入力のときだけ整形結果のテキストエリアが出現し、エラー時には出力エリアを非表示にするという切り替え方式を採用した。正常系とエラー系が画面上で混在しないため、状態が直感的に分かる。
よくあるJSON構文エラーのパターン
JSON.parse() が検出してくれるエラーには、実務で頻繁に遭遇するものが多い。
末尾カンマ（trailing comma）
{
"name": "taro",
"age": 30,
}
JavaScriptのオブジェクトリテラルでは許容されるが、JSONの仕様（RFC 8259）では末尾カンマは不正。これは特に手書きでJSONを編集したときにやりがちなミスで、JSON.parse() はきちんと弾いてくれる。
シングルクォート
{'name': 'taro'}
JSONではダブルクォートのみが有効。Pythonのdict表記やJavaScriptのオブジェクトリテラルをそのまま貼り付けると、これで引っかかることがある。
クォートなしのキー
{name: "taro"}
これもJavaScriptでは動くがJSONでは不正。設定ファイルの書き方と混同しやすいパターンだ。
こうしたエラーを JSON.parse() に検出させて即座にフィードバックすることで、ユーザーは構文ミスの箇所を素早く修正できる。
ワンクリックコピーの実装
整形結果のコピー機能は Clipboard API で実装している。
async function handleCopy() {
if (!output) return
try {
await navigator.clipboard.writeText(output)
setCopied(true)
setTimeout(() => setCopied(false), 2000)
} catch {
// Clipboard API が使えない環境では何もしない
}
}
navigator.clipboard.writeText() は非同期APIで、コピー成功後に copied フラグを true にして2秒後に戻す。UIではコピーボタンのアイコンとテキストが「コピー」から「コピー済み」に切り替わるフィードバックを返す。
try-catch で囲んでいるのは、Clipboard API がHTTPS環境またはlocalhost以外では動作しないケースがあるため。エラーが出ても画面が壊れないようにサイレントに処理している。
設計上の工夫。外部ライブラリを使わない判断
JSON整形・検証ツールの設計で最も重要な判断は「外部ライブラリを一切使わない」という選択だった。
JSONを扱うnpmパッケージは大量にある。シンタックスハイライト付きのビューワ、Tree View表示、JSONスキーマバリデーションなど、リッチな機能を提供するライブラリは豊富だ。しかし、今回はあえて JSON.parse() と JSON.stringify() だけで構成した。
理由は3つある。
バンドルサイズの最小化。 標準APIだけなら追加のJavaScriptは実質ゼロ。ページの読み込みが軽いのは、すぐ使いたいユーティリティツールにとって最も重要な体験だ。
ブラウザ互換性の心配が不要。 JSON.parse() と JSON.stringify() はすべてのモダンブラウザでサポートされている。ポリフィルもトランスパイルも要らない。
メンテナンスコストの削減。 外部ライブラリに依存しないということは、ライブラリのバージョンアップやbreaking changeに振り回されないということ。個人開発では、メンテナンスの手間をどれだけ減らせるかが継続の鍵になる。
ぱんだツールズのアーキテクチャ全体としても、「すべての処理をブラウザ内で完結させる」「ファイルをサーバーに送信しない」という方針がある。JSON整形ツールはその方針がもっとも純粋に体現されたツールと言える。サーバーサイドのコードはメタデータ生成（page.tsx での Metadata エクスポート）だけで、整形ロジックはすべてクライアントコンポーネント JsonFormatterClient.tsx に閉じている。
パフォーマンスとJSONサイズの限界
JSON.parse() と JSON.stringify() はブラウザのネイティブ実装なので、JavaScriptで手書きしたパーサーよりはるかに高速に動く。V8エンジンの場合、数MBのJSONでもミリ秒単位で処理が完了する。
ただし、ブラウザのメモリ上限がそのまま処理可能サイズの上限になる。巨大なJSON（数百MB以上）を貼り付けると、タブがクラッシュする可能性がある。この点はFAQにも「ブラウザのメモリが許す限り上限はありません」と明記して、ユーザーに判断を委ねている。
実用上は、APIレスポンスや設定ファイルの整形であれば数十KB〜数MB程度なので、パフォーマンスが問題になることはまずない。
状態管理。React の useState だけで十分な設計
UIの状態管理も最小限に抑えている。使っているstateは4つだけ。
const [input, setInput] = useState('') // 入力JSON
const [output, setOutput] = useState('') // 整形結果
const [error, setError] = useState<string | null>(null) // エラーメッセージ
const [copied, setCopied] = useState(false) // コピー済みフラグ
状態管理ライブラリ（Zustand、Jotai など）は使っていない。入力→処理→出力という単方向のフローで、状態の依存関係がシンプルだからだ。入力テキストが変更されるたびに error と output をクリアすることで、前回の処理結果が残り続けるという混乱を防いでいる。
onChange={(e) => {
setInput(e.target.value)
setError(null)
setOutput('')
}}
この「入力が変わったら出力をリセットする」パターンは、変換系ツール全般で使える設計だ。
まとめ
JSON整形は JSON.parse() + JSON.stringify() の2行で実現できるシンプルな処理だが、実用的なツールにするには、エラーハンドリング、コピー機能、状態管理のリセット戦略など、地味だが重要な設計判断が積み重なっている。
外部ライブラリに頼らず標準APIだけで構成することで、バンドルサイズ最小・メンテナンスコスト最小のツールになった。ブラウザ完結でデータが外部に送信されないため、APIキーや社内データを含むJSONでも安心して整形・検証できる。
実際に使いたい場合はこちらから。
ぱんだツールズ では他にも PDF・画像・CSV・テキスト処理などの開発者向けツールを公開中。すべて無料・登録不要・ブラウザ完結で使える。
https://sakutto-panda.com
この記事は Zenn にも同じ内容を投稿しています。