§01-29Data Visualization

JSON viewer

JSON を階層ごとに折りたたんで表示する。

深い入れ子のデータを必要な部分だけ開いて読める。API レスポンスの確認や設定ファイルの閲覧など、構造を把握しながら値を探す場面に向く。

実装のポイント

再帰コンポーネントで各ノードが開閉状態を持ち、初期展開は深さで制限する。開閉ボタンには aria-expanded を付け、矢印キーで移動できる tree にする。