はじめに
JSONのデータ構造、目で追うの辛くないですか。
正直なところ、ネストが深くなったり配列が入れ子になったりすると、もはや暗号解読みたいな気分になるんですよね。特にAPIのレスポンスとか、設定ファイルとか、いつの間にか肥大化していて「どこに何があるか」を把握するだけで時間がかかる。
そんな中で最近使い始めたのがJSON CrackというJSON可視化ツールです。
GitHubで42,000スター以上を獲得していて、オープンソースで完全無料。JSON、YAML、CSV、XMLなどを対話的なグラフに変換して、データ構造を一目で把握できるようにしてくれます。
これ、意外と便利で、一度使うと手放せなくなります。
JSON Crackとは
JSON Crackは、構造化データをインタラクティブなグラフやツリービューに変換する可視化ツールです。ブラウザ上で動作し、インストール不要で今すぐ使い始められます。
2022年2月にローンチされ、現在は35人のコントリビューターによって活発に開発が続けられています。Apache License 2.0なので、商用利用も可能です。
公式サイト: https://jsoncrack.com GitHub: https://github.com/AykutSarac/jsoncrack.com
特徴・メリット
1. 複数のデータ形式に対応
JSONだけじゃないのがポイントです。
- JSON
- YAML
- CSV
- XML
- TOML
APIのレスポンスはJSONだけど、設定ファイルはYAMLだったり、古いシステムのデータはXMLだったり。それぞれ別のツールを使う必要がないのは楽ですね。
2. 対話的なグラフ表示
ペタッとテキストを貼り付けるだけで、ノードとエッジで繋がったグラフに変換されます。
ズームイン・ズームアウト、ドラッグで移動、ノードをクリックして展開・折りたたみ。マウス操作だけで深い階層まで辿れるので、JSONの構造を把握するスピードが段違い。
3. ダーク/ライトモード対応
地味だけど嬉しい機能。
夜中にデバッグしてる時、真っ白い画面は目に刺さるので。30代になって目の疲れを感じるようになった身としては、ダークモード対応は必須なんですよね。
4. データ形式の相互変換
JSON→YAML、YAML→JSON、XML→JSONなど、形式間の変換もできます。
「このYAMLをJSONで欲しい」とか、ちょっとした変換作業に別のツールを立ち上げる必要がない。時短になります。
5. コード生成機能
これがエンジニアとして嬉しいポイント。
- TypeScriptインターフェース生成
- Go構造体生成
- JSON Schema生成
APIレスポンスのJSONを貼り付けて、TypeScriptの型定義を自動生成。手作業で型を書く手間が省けるのはコスパ的に最高です。
6. 便利な追加ツール
- JWTデコード: トークンの中身をサッと確認
- jqクエリ実行: JSONをフィルタリング
- JSONPathクエリ: 特定のパスを抽出
- フォーマット・バリデーション: 整形とエラーチェック
これ全部ブラウザ上でできるので、いちいちターミナル開いてjqコマンド打つ必要がない。
7. 画像エクスポート
PNG、JPEG、SVG形式でダウンロードできます。
ドキュメントに貼り付けたり、Slackで共有したり。「このAPIのレスポンス構造、こんな感じです」って説明する時に便利。
8. プライバシー重視
データは全てブラウザ上で処理され、サーバーには送信されません。
機密性の高いデータを扱う場合でも安心。これ、意外と重要で、会社のAPIレスポンスとかをオンラインツールに貼り付けるの、セキュリティ的に気になる人も多いと思います。
インストール方法
ブラウザで使う場合
インストール不要です。
https://jsoncrack.com にアクセスするだけ。
ローカルで動かす場合
自分の環境で動かしたい場合は、リポジトリをクローンして起動できます。
# リポジトリをクローン
git clone https://github.com/AykutSarac/jsoncrack.com.git
# ディレクトリに移動
cd jsoncrack.com
# 依存関係をインストール（pnpm推奨）
pnpm install
# 開発サーバーを起動
pnpm dev
http://localhost:3000 でアクセスできます。
Dockerで動かす場合
docker compose build
docker compose up
http://localhost:8888 でアクセスできます。
社内ネットワーク内でホストしたい場合とか、Dockerが便利ですね。
VS Code拡張機能
VS Code向けの拡張機能も提供されています。
VS Codeのマーケットプレイスで「JSON Crack」を検索してインストール。エディタ内でJSONファイルを可視化できるようになります。
基本的な使い方
Webアプリとして使う
- jsoncrack.com にアクセス
- 左側のエディタにJSONを貼り付け
- 右側にグラフが自動生成される
- ノードをクリックして展開・折りたたみ
- 必要に応じてエクスポート
直感的に使えるので、説明はほとんど不要だと思います。
サンプルJSON
試しにこんなJSONを貼り付けてみてください。
{
"users": [
{
"id": 1,
"name": "田中太郎",
"email": "tanaka@example.com",
"profile": {
"age": 35,
"department": "開発部",
"skills": ["TypeScript", "React", "Node.js"]
}
},
{
"id": 2,
"name": "佐藤花子",
"email": "sato@example.com",
"profile": {
"age": 28,
"department": "デザイン部",
"skills": ["Figma", "CSS", "Illustrator"]
}
}
],
"metadata": {
"total": 2,
"page": 1,
"perPage": 10
}
}
ネストされた構造が、ノードとエッジで繋がったグラフになります。users配列の各要素、profileオブジェクト、skills配列が視覚的に分かりやすく表示されるはず。
TypeScriptの型を生成
- JSONを貼り付け
- 上部メニューから「Tools」→「Generate Type」を選択
- 「TypeScript」を選択
- 生成されたコードをコピー
interface Root {
users: User[];
metadata: Metadata;
}
interface User {
id: number;
name: string;
email: string;
profile: Profile;
}
interface Profile {
age: number;
department: string;
skills: string[];
}
interface Metadata {
total: number;
page: number;
perPage: number;
}
こんな感じで自動生成されます。手で書くと地味に面倒なやつ。
JSONの整形
圧縮されたJSONを読みやすく整形することもできます。
{"name":"test","value":123,"nested":{"key":"value"}}
↓ 整形後
{
"name": "test",
"value": 123,
"nested": {
"key": "value"
}
}
実践的なユースケース
1. APIレスポンスの構造把握
新しいAPIを使う時、まずレスポンスの構造を把握したいですよね。
ドキュメントを読むより、実際のレスポンスをJSON Crackに貼り付けた方が早い。特にネストが深いやつは、グラフで見ると一発で理解できます。
2. 設定ファイルのデバッグ
YAMLの設定ファイル、どこかでインデントがズレてエラーになってる...みたいな時。
JSON Crackに貼り付けると、パースエラーがあれば教えてくれるし、正常にパースできれば構造をグラフで確認できる。
3. TypeScript型定義の自動生成
バックエンドから返ってくるJSONに対して型を定義したい時。
レスポンスをそのまま貼り付けて「Generate Type」するだけ。個人的には、この機能だけでも使う価値があると思ってます。
4. JWTトークンのデバッグ
認証周りのトラブルシューティングで、JWTの中身を確認したい時。
JSON CrackのJWTデコード機能を使えば、ヘッダー、ペイロード、署名を分解して見られます。jwt.ioに行かなくても済む。
5. データ移行時の形式変換
「このCSVをJSONに変換して」みたいな作業。
JSON Crackでサクッと変換できます。スクリプト書くほどでもない、ちょっとした変換作業に便利。
6. ドキュメント作成
APIのレスポンス構造をドキュメントに載せたい時。
SVGでエクスポートして貼り付けるだけ。テキストで説明するより、グラフの方が伝わりやすい。
注意点
いくつか気をつけるポイントがあります。
1. データサイズの制限
Web版では、約300KB程度が実用的な上限です。
それ以上大きいデータを可視化しようとすると、ブラウザが重くなったり、グラフが見にくくなったりします。巨大なJSONは、必要な部分だけ抽出してから可視化するのがおすすめ。
2. 複雑すぎるデータ
ネストが極端に深かったり、配列の要素が何百もあったりすると、グラフが見にくくなります。
そういう場合は、jqクエリで必要な部分だけ抽出してから可視化した方がいい。
3. オフライン利用
Web版はインターネット接続が必要です。
オフラインで使いたい場合は、ローカルにクローンして起動するか、Docker版を使ってください。
まとめ
JSON Crackは「JSONの構造をサッと把握したい」というニーズにぴったりのツールです。
- JSON、YAML、CSV、XMLなど複数形式に対応
- 対話的なグラフで構造を可視化
- TypeScript/Go/JSON Schemaのコード生成
- JWTデコード、jqクエリなど便利機能満載
- データはローカル処理でプライバシー安心
- オープンソースで完全無料
個人的には、APIのレスポンス確認とTypeScript型生成でめちゃくちゃ使ってます。一度使うと、普通のJSONビューアには戻れない。
30代になって思うのは、「目で追うコストを減らすツールは正義」ということ。JSONを目視で解析する時間があったら、もっと生産的なことに使いたいですよね。
まだ使ったことがない人は、jsoncrack.com にアクセスして試してみてください。インストール不要で、今すぐ使えます。
公式サイト: https://jsoncrack.com GitHub: https://github.com/AykutSarac/jsoncrack.com