ReactでJSONを折りたたんで見やすく表示する方法

export type JsonValue =
  | null
  | boolean
  | number
  | string
  | JsonValue[]
  | { [key: string]: JsonValue };

function isContainer(value: JsonValue): value is Container {
  return typeof value === 'object' && value !== null;
}

import { useState } from 'react';

export type JsonValue =
  | null
  | boolean
  | number
  | string
  | JsonValue[]
  | { [key: string]: JsonValue };

type Container = JsonValue[] | { [key: string]: JsonValue };
type Path = (string | number)[];

// パスの配列を、そのまま JSON の文字列にして Set のキーにする
const pathId = (path: Path) => JSON.stringify(path);

function isContainer(value: JsonValue): value is Container {
  return typeof value === 'object' && value !== null;
}

function entriesOf(value: Container): [string | number, JsonValue][] {
  return Array.isArray(value) ? value.map((v, i) => [i, v]) : Object.entries(value);
}

// 深さが maxDepth より浅いところにある、配列とオブジェクトのパスを集める
function collectPaths(value: JsonValue, maxDepth: number, path: Path = [], out = new Set<string>()) {
  if (!isContainer(value) || path.length >= maxDepth) return out;
  out.add(pathId(path));
  for (const [key, child] of entriesOf(value)) collectPaths(child, maxDepth, [...path, key], out);
  return out;
}

type Props = { value: JsonValue; defaultDepth?: number };

export function JsonViewer({ value, defaultDepth = 1 }: Props) {
  const [open, setOpen] = useState(() => collectPaths(value, defaultDepth));

  const toggle = (id: string) =>
    setOpen((prev) => {
      const next = new Set(prev);
      if (next.has(id)) next.delete(id);
      else next.add(id);
      return next;
    });

  return (
    <div className="json-viewer">
      <div className="json-toolbar">
        <button type="button" onClick={() => setOpen(collectPaths(value, Infinity))}>すべて開く</button>
        <button type="button" onClick={() => setOpen(new Set())}>すべて閉じる</button>
      </div>
      <JsonNode name={null} value={value} path={[]} open={open} onToggle={toggle} />
    </div>
  );
}

type NodeProps = {
  name: string | number | null;
  value: JsonValue;
  path: Path;
  open: Set<string>;
  onToggle: (id: string) => void;
};

function JsonNode({ name, value, path, open, onToggle }: NodeProps) {
  // オブジェクトのキーは "name": のように引用符付きで、配列の番号は 0: のように出す
  const label =
    name === null ? null : (
      <span className="json-key">{typeof name === 'number' ? name : JSON.stringify(name)}: </span>
    );

  if (!isContainer(value)) {
    return (
      <div className="json-row">
        {label}
        <Primitive value={value} />
      </div>
    );
  }

  const id = pathId(path);
  const isOpen = open.has(id);
  const isArray = Array.isArray(value);
  const entries = entriesOf(value);
  const [start, end] = isArray ? ['[', ']'] : ['{', '}'];

  return (
    <div className="json-row">
      <button type="button" className="json-toggle" aria-expanded={isOpen} onClick={() => onToggle(id)}>
        <span className="json-arrow" aria-hidden="true">{isOpen ? '▼' : '▶'}</span>
        {label}
        {isOpen ? start : `${start}…${end}`}
        {!isOpen && <span className="json-count"> {entries.length}件</span>}
      </button>
      {isOpen && (
        <>
          <div className="json-children">
            {entries.map(([key, child]) => (
              <JsonNode key={key} name={key} value={child} path={[...path, key]} open={open} onToggle={onToggle} />
            ))}
          </div>
          <div className="json-close">{end}</div>
        </>
      )}
    </div>
  );
}

function Primitive({ value }: { value: null | boolean | number | string }) {
  if (value === null) return <span className="json-null">null</span>;
  if (typeof value === 'string') return <span className="json-string">{JSON.stringify(value)}</span>;
  if (typeof value === 'number') return <span className="json-number">{String(value)}</span>;
  return <span className="json-boolean">{String(value)}</span>;
}

.json-viewer { font-family: ui-monospace, monospace; font-size: 14px; line-height: 1.6; }
.json-toolbar { display: flex; gap: 8px; margin-bottom: 8px; }
.json-children { padding-left: 1.5em; border-left: 1px solid #d0e8ee; margin-left: 0.4em; }
.json-toggle { font: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; }
.json-arrow { display: inline-block; width: 1.2em; color: #067a98; }
.json-close { padding-left: 1.2em; }
.json-row > .json-key:first-child { margin-left: 1.2em; }
.json-key { color: #1f2a30; font-weight: bold; }
.json-string { color: #067a98; }
.json-number { color: #1f2a30; }
.json-boolean, .json-null { color: #6b7780; }
.json-count { color: #6b7780; }

{"id":12345678901234567890,"name":"ねこ","tags":["しろ","くろ"],"owner":{"name":"Taro","address":{"city":"Tokyo","zip":null}},"active":true}

▼{
"id": 12345678901234567000
"name": "ねこ"
▶"tags": […] 2件
▶"owner": {…} 2件
"active": true
}

{"a.b":{"x":1},"a":{"b":{"y":2}}}

▼{
"memo": "1行目\n\"引用\""
▶"empty": {…} 0件
▶"list": […] 0件
}

import { useState } from 'react';
import { JsonViewer, type JsonValue } from './JsonViewer';

const SAMPLE = `{"id":12345678901234567890,"name":"ねこ","tags":["しろ","くろ"],"owner":{"name":"Taro","address":{"city":"Tokyo","zip":null}},"active":true}`;

export function App() {
  const [text, setText] = useState(SAMPLE);
  const [data, setData] = useState<{ value: JsonValue; version: number } | null>(null);
  const [error, setError] = useState<string | null>(null);

  const show = () => {
    try {
      const value = JSON.parse(text) as JsonValue;
      setData((prev) => ({ value, version: (prev?.version ?? 0) + 1 }));
      setError(null);
    } catch (e) {
      setError(e instanceof SyntaxError ? e.message : String(e));
    }
  };

  return (
    <main>
      <textarea aria-label="JSON" value={text} onChange={(e) => setText(e.target.value)} rows={5} />
      <button type="button" onClick={show}>表示する</button>
      {error && <p role="alert" className="json-error">JSON として読めません：{error}</p>}
      {data && <JsonViewer key={data.version} value={data.value} />}
    </main>
  );
}