JSONファイルを開いたとき、
「この {} や [] が何を意味しているのか分からない」
「とりあえず中身を一覧で見たい」
と感じたことはありませんか。
このJSONビューアを使えば、JSONを表形式で確認できます。
コードを読まなくても、データ構造を直感的に把握できるのが特徴です。
この記事では、JSONに特化して、
- 配列JSONの見方
- オブジェクトJSONの表示方法
- 複数データの切り替え
- 表示・コピー時の注意点
を順番に解説します。
※ 基本的な読み込み方法は「基本操作編」をご覧ください。
JSONビューアを使うメリット
JSONは、APIやシステム連携でよく使われる形式ですが、
といった悩みがあります。
このビューアでは、JSONを自動的に表形式に変換するため、
というメリットがあります。
JSONデータを読み込む
ファイルから読み込む
- 「ファイル読み込み」からJSONファイルを選択します
- 自動的にJSON形式と判定されます
- 表形式でデータが表示されます
特別な設定は不要です。
テキストを貼り付けて表示する
APIレスポンスやサンプルJSONは、貼り付けエリアに直接貼り付けて表示できます。
といった用途に向いています。
配列JSONの見方を理解する
配列JSONとは
配列JSONは、次のような形式です。
[
{ "id": 1, "name": "Alice", "city": "Tokyo" },
{ "id": 2, "name": "Bob", "city": "Osaka" }
]複数のデータが、同じ構造で並んでいるのが特徴です。
配列JSONの表示方法
ビューアでは、
- キー → 列名
- 各オブジェクト → 行
として表示されます。
Excelの表に近い感覚で、JSONの中身を確認できます。
キーが揃っていない場合
配列内でキーが異なる場合でも、ビューアが自動で列を補完します。
存在しない値は、空欄として表示されるため安心です。
オブジェクトJSONの見方を理解する
オブジェクトJSONとは
オブジェクトJSONは、キーと値の組み合わせで構成されます。
{
"id": 10,
"name": "Sample",
"status": "active"
}オブジェクトJSONの表示方法
この場合、ビューアでは、
- key
- value
の2列で表形式に変換されます。
設定ファイルや、単一データの確認に向いています。
ネストされたJSONの表示方法
JSONの中に、配列やオブジェクトが入っている場合もあります。
{
"user": {
"id": 1,
"name": "Alice"
},
"orders": [
{ "id": 100, "price": 1200 },
{ "id": 101, "price": 800 }
]
}データ構造一覧（データセット切り替え）
このビューアでは、ネストされたJSONを分解して表示します。
- 上位のデータ
- ネストされた配列・オブジェクト
が、それぞれ別データセットとして表示されます。
ボタンをクリックすることで、確認したいデータ構造を切り替えられます。
データセット切り替えが便利な場面
開発・検証作業で特に役立ちます。
JSONデータを検索・並び替える
JSONでも検索が使える
JSONデータでも、CSVと同様に全列検索が可能です。
- 特定のIDを探す
- ステータスで絞り込む
といった操作が簡単に行えます。
並び替えでデータを比較する
列ヘッダーをクリックすると、JSONデータも並び替えできます。
- 数値項目
- 文字列項目
どちらにも対応しています。
JSONデータをコピーする
表示中のJSONをコピーする
「表示中のみコピー」を使うと、
- 検索・並び替え後の状態
- 表示しているデータセット
そのままの内容を、整形されたJSON形式でコピーできます。
JSONコピー時のポイント
JSONの再利用や共有にも便利です。
JSON操作でよくある注意点
JSONの構文エラー
があると解析に失敗します。
貼り付けたJSONは、構文が正しいか確認してください。
表示が重い場合の対処
JSONの要素数が多い場合は、
- 表示行数を制限する
- 必要なデータセットだけ確認する
ことで、動作が安定します。
まとめ｜JSONを「読む」より「見る」ためのビューア
このJSONビューアを使えば、
といったことが、ブラウザだけで可能です。
JSONをコードとして読むのが苦手な方でも、安心して使える確認用ツールです。
あわせて読みたい
- 👉 ブラウザだけで使えるJSON・CSV・TSVビューアの使い方（基本操作編）
- 👉 CSV・TSVビューアの便利な使い方（操作特化編）
コメント