スクレイピングをする際、多階層のJSONファイルから自分がほしいデータだけをパースするためには、
まず元のデータ構造を正確に把握することが重要です。
しかし、VSCodeではデフォルト設定だと親要素が最大5階層までしか表示されません。
そのため、6階層以上のデータでは親フィールドが見えなくなってしまいます。
そこで今回は、デフォルトの設定値を変更して、JSON構造をより見やすくする方法を紹介します。
方法
やり方は簡単です。VSCodeの settings.json に以下を追記します。(デフォルトは5)
{
"editor.stickyScroll.maxLineCount": 20
}
これだけで、20階層まで親要素を固定表示できるようになります。
実際の例：AirbnbのAPIレスポンス
AirbnbのAPIレスポンスをJSONファイルとして保存し、
accuracyRating や checkinRating といったフィールドを取得しようとしたときの例です。
🔹 変更前（Sticky Scrollデフォルト設定）
一見すると次のようにアクセスできそうに見えます。
data.presentation.stayProductDetailPage.sections.metatag.accuracyRating
data.presentation.stayProductDetailPage.sections.metatag.checkinRating
しかし、実際には中間のフィールドが折りたたまれており、正しくパースできません。
🔹 設定変更後（maxLineCount = 20）
data.presentation.stayProductDetailPage.sections.metatag.loggingContext.eventDataLogging.accuracyRating
data.presentation.stayProductDetailPage.sections.metatag.loggingContext.eventDataLogging.checkinRating
loggingContext.eventDataLoggingが隠れていましたね。
変更後はすべてデータ構造が明らかになるため人間の目にも非常に優しくなります。
👀 ちなみに
VSCodeのJSONファイル上部にも、現在の階層構造が表示されてるようですね。こちらも構造を把握するうえで非常に有用です。
（筆者はこの記事を書いている途中で気づきました…😅）
おわりに
デフォルト設定のままだと、深い階層のJSON構造が隠れてしまい、正しいデータ構造を把握するのに時間がかかります。
Sticky Scrollの行数を増やすことで、視覚的に理解しやすくなり、デバッグ効率も向上します。
JSONを扱うことが多い方は、設定しておくのをおすすめします。