Reactで、2つのJSONの違いを項目ごとに表示する方法

{
  "name": "たま",
  "age": 3,
  "tags": ["白", "長毛"],
  "toys": [
    { "id": 1, "name": "ねずみ" },
    { "id": 2, "name": "ボール" }
  ]
}

{
  "name": "たま",
  "age": 4,
  "tags": ["白"],
  "toys": [
    { "id": 3, "name": "羽根" },
    { "id": 1, "name": "ねずみ" },
    { "id": 2, "name": "ボール" }
  ],
  "indoor": true
}

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

// パスの1つ分：オブジェクトのキー、配列の番号、または「id が 2 の要素」のような指定
export type PathPart = string | number | { key: string; value: string | number };

export type Change =
  | { kind: 'added'; path: PathPart[]; after: JsonValue }
  | { kind: 'removed'; path: PathPart[]; before: JsonValue }
  | { kind: 'changed'; path: PathPart[]; before: JsonValue; after: JsonValue };

export type DiffOptions = {
  // 配列の要素をこのキーの値で対応させる（指定しなければ、番号で対応させる）
  arrayKey?: string;
};

const isObject = (v: JsonValue): v is JsonObject =>
  typeof v === 'object' && v !== null && !Array.isArray(v);

// すべての要素がオブジェクトで、arrayKey の値（文字列か数値）が重ならずに入っていれば、値から要素を引ける Map を返す
function indexByKey(arr: JsonValue[], key: string): Map<string | number, JsonValue> | null {
  const m = new Map<string | number, JsonValue>();
  for (const item of arr) {
    if (!isObject(item) || !Object.hasOwn(item, key)) return null;
    const id = item[key];
    if ((typeof id !== 'string' && typeof id !== 'number') || m.has(id)) return null;
    m.set(id, item);
  }
  return m;
}

export function diffJson(a: JsonValue, b: JsonValue, options: DiffOptions = {}): Change[] {
  const out: Change[] = [];

  function walk(a: JsonValue, b: JsonValue, path: PathPart[]) {
    if (Array.isArray(a) && Array.isArray(b)) {
      const key = options.arrayKey;
      const ma = key ? indexByKey(a, key) : null;
      const mb = key ? indexByKey(b, key) : null;
      if (key && ma && mb) {
        for (const [id, item] of ma) {
          const p = [...path, { key, value: id }];
          if (mb.has(id)) walk(item, mb.get(id)!, p);
          else out.push({ kind: 'removed', path: p, before: item });
        }
        for (const [id, item] of mb) {
          if (!ma.has(id)) out.push({ kind: 'added', path: [...path, { key, value: id }], after: item });
        }
        return;
      }
      // 番号で対応させる
      for (let i = 0; i < Math.max(a.length, b.length); i++) {
        if (i >= b.length) out.push({ kind: 'removed', path: [...path, i], before: a[i] });
        else if (i >= a.length) out.push({ kind: 'added', path: [...path, i], after: b[i] });
        else walk(a[i], b[i], [...path, i]);
      }
    } else if (isObject(a) && isObject(b)) {
      for (const k of Object.keys(a)) {
        if (Object.hasOwn(b, k)) walk(a[k], b[k], [...path, k]);
        else out.push({ kind: 'removed', path: [...path, k], before: a[k] });
      }
      for (const k of Object.keys(b)) {
        if (!Object.hasOwn(a, k)) out.push({ kind: 'added', path: [...path, k], after: b[k] });
      }
    } else if (a !== b) {
      // 値が違う、または種類（オブジェクト・配列・文字列など）が違う
      out.push({ kind: 'changed', path, before: a, after: b });
    }
  }

  walk(a, b, []);
  return out;
}

// JavaScript の識別子として書けるキーは「.」でつなぎ、それ以外は ["..."] で書く
const IDENT = /^[$_\p{ID_Start}][$\p{ID_Continue}]*$/u;

export function formatPath(path: PathPart[]): string {
  let s = '';
  for (const p of path) {
    if (typeof p === 'number') s += `[${p}]`;
    else if (typeof p === 'object') s += `[${p.key}=${JSON.stringify(p.value)}]`;
    else if (IDENT.test(p)) s += s ? `.${p}` : p;
    else s += `[${JSON.stringify(p)}]`;
  }
  return s || '（全体）';
}

キー constructor: in → true / Object.hasOwn → false / b[k] の型 → function
キー name: in → true / Object.hasOwn → true / b[k] の型 → string
JSON.stringify(b.constructor) → undefined

in で調べたとき : ["changed constructor: \"x\" → undefined"]
diffJson        : [{"kind":"removed","path":["constructor"],"before":"x"}]
microdiff       : [{"path":["constructor"],"type":"CHANGE","oldValue":"x"}] / value の型 → [ 'function' ]

import { useId, useState } from 'react';
import { diffJson, formatPath, type Change, type JsonValue } from './diff';

type Parsed = { ok: true; value: JsonValue } | { ok: false; message: string };

function parse(text: string): Parsed {
  try {
    return { ok: true, value: JSON.parse(text) as JsonValue };
  } catch (e) {
    return { ok: false, message: e instanceof SyntaxError ? e.message : String(e) };
  }
}

const LABEL = { added: '追加', removed: '削除', changed: '変更' } as const;
// 表に出す行の上限。表の行が多くなりすぎないようにする
const MAX_ROWS = 200;
const show = (v: JsonValue | undefined) => (v === undefined ? '' : JSON.stringify(v));

const BEFORE = `{ ...変更前の JSON（上の節と同じ）... }`;
const AFTER = `{ ...変更後の JSON（上の節と同じ）... }`;

export function JsonDiff() {
  const [before, setBefore] = useState(BEFORE);
  const [after, setAfter] = useState(AFTER);
  const [byId, setById] = useState(false);
  const idA = useId();
  const idB = useId();

  const a = parse(before);
  const b = parse(after);
  const changes: Change[] | null =
    a.ok && b.ok ? diffJson(a.value, b.value, { arrayKey: byId ? 'id' : undefined }) : null;

  return (
    <div className="json-diff">
      <div className="inputs">
        <div>
          <label htmlFor={idA}>変更前</label>
          <textarea id={idA} rows={12} spellCheck={false} value={before} onChange={(e) => setBefore(e.target.value)} />
          {!a.ok && <p role="alert">変更前の JSON を読めません：{a.message}</p>}
        </div>
        <div>
          <label htmlFor={idB}>変更後</label>
          <textarea id={idB} rows={12} spellCheck={false} value={after} onChange={(e) => setAfter(e.target.value)} />
          {!b.ok && <p role="alert">変更後の JSON を読めません：{b.message}</p>}
        </div>
      </div>

      <label className="option">
        <input type="checkbox" checked={byId} onChange={(e) => setById(e.target.checked)} />
        配列の要素を id で対応させる
      </label>

      {changes && (
        <>
          <p className="summary">
            違い {changes.length}件（追加 {changes.filter((c) => c.kind === 'added').length}・削除{' '}
            {changes.filter((c) => c.kind === 'removed').length}・変更{' '}
            {changes.filter((c) => c.kind === 'changed').length}）
          </p>
          {changes.length > 0 && (
            <table>
              <thead>
                <tr><th>種類</th><th>場所</th><th>変更前</th><th>変更後</th></tr>
              </thead>
              <tbody>
                {changes.slice(0, MAX_ROWS).map((c) => {
                  const where = formatPath(c.path);
                  return (
                    <tr key={c.kind + where} className={c.kind}>
                      <td>{LABEL[c.kind]}</td>
                      <td><code>{where}</code></td>
                      <td><code>{c.kind === 'added' ? '' : show(c.before)}</code></td>
                      <td><code>{c.kind === 'removed' ? '' : show(c.after)}</code></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          )}
          {changes.length > MAX_ROWS && <p>最初の {MAX_ROWS}件だけを表示しています。</p>}
        </>
      )}
    </div>
  );
}

変更後の JSON を読めません：Unexpected token ',', ..."
  "age": ,
  "tags""... is not valid JSON