JSON Crack - 複雑なJSONを一発で可視化できる最強ツール

はじめに

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アプリとして使う

1. jsoncrack.com にアクセス
2. 左側のエディタにJSONを貼り付け
3. 右側にグラフが自動生成される
4. ノードをクリックして展開・折りたたみ
5. 必要に応じてエクスポート

直感的に使えるので、説明はほとんど不要だと思います。

サンプル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の型を生成

1. JSONを貼り付け
2. 上部メニューから「Tools」→「Generate Type」を選択
3. 「TypeScript」を選択
4. 生成されたコードをコピー

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