WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： トレンド >サービス紹介

何かのWebサービスを作成する際、世の中に存在する様々な「API」を駆使すると、自分で情報を集めること無く、非常に手軽に大量のデータが取得できます。

その際に用いられることの多い「JSON」形式のデータですが、情報の量が多くなればなるほど、ひと目見ただけでは、どこにどのようなデータが入っているのかがわかりにくくなります。

今回は、複雑なJSON形式のデータを一瞬で整形・可視化することができるサービス「The Fastest JSON visualizer」をご紹介します。

ペーストしてボタンを押すだけ

サイトのURLはコチラです。
https://kimihiro-n.site44.com/json_dump/index.html

今回は試しにYahoo!が提供する天気予報のAPIから返される下記のJSONデータを使用してみます。

{"ResultInfo":{"Count":1,"Total":1,"Start":1,"Status":200,"Latency":0.053,"Description":"","Copyright":"(C) Yahoo Japan Corporation."},"Feature":[{"Id":"202212261230_139.732293_35.663613","Name":"地点(139.732293,35.663613)の2022年12月26日 12時30分から60分間の天気情報","Geometry":{"Type":"point","Coordinates":"139.732293,35.663613"},"Property":{"WeatherAreaCode":4410,"WeatherList":{"Weather":[{"Type":"observation","Date":"202212261230","Rainfall":0.0},{"Type":"forecast","Date":"202212261240","Rainfall":0.0},{"Type":"forecast","Date":"202212261250","Rainfall":0.0},{"Type":"forecast","Date":"202212261300","Rainfall":0.0},{"Type":"forecast","Date":"202212261310","Rainfall":0.0},{"Type":"forecast","Date":"202212261320","Rainfall":0.0},{"Type":"forecast","Date":"202212261330","Rainfall":0.0}]}}}]}

このままでは、ただの非常に長い1行のテキストになっているため、ネストの構造などが分かりづらいですが、「The Fastest JSON visualizer」の入力欄にペーストして、「Visualize JSON」ボタンを押してみます。

結果はネスト表示されインデントがついた状態に

ご覧の通り、見づらかったJSONデータがキレイに整形・可視化された状態で表示されました。
各データの右端には、プログラムにおいてどのように表記すればそのデータにアクセスできるのか、連想配列形式で表示されていますので、これで迷いなく目的のデータを取得することが可能になります。

JSON形式のファイルを読み込ませることも可能

先ほどは、サイト上の入力欄に直接JSONデータをペーストして実行しましたが、すでにJSON形式のファイルがある場合は、そのファイルを読み込ませることも可能です。

「Browse」ボタンを押すとPC上にあるファイルを指定することができるので、目的のファイルを選択すれば、上記と同様に結果が表示されます。

まとめ

今回はサンプルとして、比較的短いJSONデータを用意して実行しましたが、APIを利用して返ってくるデータには何千項目ものデータが含まれていたり、ネスト構造が複雑なものも非常に多くあります。

今回ご紹介したツールを利用すれば、見た目にも非常に分かりやすくデータをまとめてくれますので、複雑なAPIをご利用される場合は、ぜひ活用してみてください。