ReactでYAMLとJSONを相互に変換する方法

// YAML と JSON を相互に変換する関数
import { parse, stringify, YAMLParseError } from 'yaml';

export type Converted =
  | { text: string; error: ''; warning: string }
  | { text: ''; error: string; warning: '' };

const empty: Converted = { text: '', error: '', warning: '' };

function fail(error: string): Converted {
  return { text: '', error, warning: '' };
}

// yaml が投げたエラーを、行と列の付いた短いメッセージにする
function yamlErrorMessage(e: unknown): string {
  if (e instanceof YAMLParseError) {
    // message の1行目は「理由 at line 2, column 1:」。2行目からはエラーの箇所の抜き出し
    const reason = e.message.split('\n')[0].replace(/ at line \d+, column \d+:$/, '');
    const where = e.linePos ? `${e.linePos[0].line}行目・${e.linePos[0].col}列目` : '位置不明';
    return `YAML として読めません（${where}、${e.code}）：${reason}`;
  }
  if (e instanceof ReferenceError) {
    // ReferenceError は、エイリアスの展開が maxAliasCount を超えたときと、
    // & で定義していない名前を *名前 で参照したときに投げられる
    if (e.message.startsWith('Excessive alias count')) {
      return 'YAML のエイリアス（*名前）の展開が多すぎるため、変換をやめました';
    }
    return `YAML のエイリアスを読めません：${e.message}`;
  }
  return `YAML として読めません：${(e as Error).message}`;
}

export function yamlToJson(source: string): Converted {
  if (source.trim() === '') return empty;
  let value: unknown;
  try {
    // merge: true で、<<: *名前 のマージキーを展開する（YAML 1.2 では既定で無効）
    value = parse(source, { merge: true, maxAliasCount: 100 });
  } catch (e) {
    return fail(yamlErrorMessage(e));
  }
  // .inf や .nan は JSON にない値で、JSON.stringify では null になる。いくつあったかを数えておく
  let lost = 0;
  const text = JSON.stringify(
    value,
    (_key, v) => {
      if (typeof v === 'number' && !Number.isFinite(v)) lost++;
      return v;
    },
    2,
  );
  const warning = lost > 0 ? `JSON で表せない数（.inf、.nan）が ${lost} か所あり、null にしました` : '';
  return { text: text + '\n', error: '', warning };
}

export function jsonToYaml(source: string): Converted {
  if (source.trim() === '') return empty;
  let value: unknown;
  try {
    value = JSON.parse(source);
  } catch (e) {
    return fail(`JSON として読めません：${(e as Error).message}`);
  }
  // compat: 'yaml-1.1' で、YAML 1.1 では真偽値や日付として読まれる文字列（no、on、2024-01-01 など）も引用符で囲む
  // lineWidth: 0 で、長い文字列を途中で折り返さない
  const text = stringify(value, { compat: 'yaml-1.1', lineWidth: 0 });
  return { text, error: '', warning: '' };
}

# 猫の情報
name: たま
age: 3
indoor: true
answer: "no"
birthday: "2022-04-01"
toys:
  - ねずみ
  - ボール
owner:
  name: Sato
  city: Tokyo
note: |
  ごはんは朝と夜。
  水はいつも新しく。

{
  "name": "たま",
  "age": 3,
  "indoor": true,
  "answer": "no",
  "birthday": "2022-04-01",
  "toys": [
    "ねずみ",
    "ボール"
  ],
  "owner": {
    "name": "Sato",
    "city": "Tokyo"
  },
  "note": "ごはんは朝と夜。\n水はいつも新しく。\n"
}

base: &base
  color: white
cat:
  <<: *base
  name: tama

--- 比較：merge を付けない parse のマージキー
{"base":{"color":"white"},"cat":{"<<":{"color":"white"},"name":"tama"}}

a: &a [x, x, x, x, x, x, x, x, x]
b: &b [*a, *a, *a, *a, *a, *a, *a, *a, *a]
c: &c [*b, *b, *b, *b, *b, *b, *b, *b, *b]
（d から i も同じ形で続く）
j: &j [*i, *i, *i, *i, *i, *i, *i, *i, *i]

"Tabs are not allowed as indentation at line 2, column 1:\n\na:\n\tb: 1\n^\n"

--- 比較：compat を付けない stringify
answer: no
flag: on
date: 2024-01-01
code: "017"
num: "123"
y: y

answer: "no"
flag: "on"
date: "2024-01-01"
code: "017"
num: "123"
"y": "y"

--- 比較：lineWidth を付けない stringify
memo: ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ ねこ
  ねこ ねこ ねこ ねこ ねこ

import { useId, useState } from 'react';
import { jsonToYaml, yamlToJson } from './convert';

type Side = 'yaml' | 'json';

export function YamlJsonConverter({ initialYaml = '' }: { initialYaml?: string }) {
  const id = useId();
  const [yaml, setYaml] = useState(initialYaml);
  const [json, setJson] = useState(() => yamlToJson(initialYaml).text);
  // 最後に書き換えた欄と、その欄を変換した結果のエラー・注意
  const [edited, setEdited] = useState<Side>('yaml');
  const [error, setError] = useState('');
  const [warning, setWarning] = useState('');

  function update(side: Side, text: string) {
    const result = side === 'yaml' ? yamlToJson(text) : jsonToYaml(text);
    if (side === 'yaml') setYaml(text);
    else setJson(text);
    setEdited(side);
    setError(result.error);
    setWarning(result.warning);
    // 読めないときは、反対側の欄を前の結果のまま残す
    if (result.error === '') {
      if (side === 'yaml') setJson(result.text);
      else setYaml(result.text);
    }
  }

  // エラーのある欄の反対側は、前の結果のままなので、文字を灰色にする
  const stale = (side: Side) => error !== '' && edited !== side;

  return (
    <div className="yaml-json">
      {(['yaml', 'json'] as const).map((side) => (
        <div key={side} className="pane">
          <label htmlFor={`${id}-${side}`}>{side === 'yaml' ? 'YAML' : 'JSON'}</label>
          <textarea
            id={`${id}-${side}`}
            rows={13}
            spellCheck={false}
            value={side === 'yaml' ? yaml : json}
            aria-invalid={error !== '' && edited === side}
            aria-describedby={edited === side && (error || warning) ? `${id}-message` : undefined}
            className={stale(side) ? 'stale' : undefined}
            onChange={(e) => update(side, e.target.value)}
          />
          {edited === side && (error || warning) && (
            <p id={`${id}-message`} className={error ? 'error' : 'warning'} role={error ? 'alert' : 'status'}>
              {error || warning}
            </p>
          )}
        </div>
      ))}
    </div>
  );
}

.yaml-json {
  display: grid;
  gap: 12px;
  max-width: 560px;
}
.yaml-json .pane {
  display: grid;
  gap: 4px;
}
.yaml-json label {
  font-weight: bold;
}
.yaml-json textarea {
  font-family: ui-monospace, monospace;
  font-size: 14px;
  color: #1f2a30;
  padding: 6px 8px;
  border: 1px solid #00c8e8;
  border-radius: 6px;
}
.yaml-json textarea[aria-invalid='true'] {
  border-color: #d85878;
}
/* エラーのとき、反対側の欄は前の結果のまま。灰色にして、いまの入力と合っていないことを示す */
.yaml-json textarea.stale {
  color: #9aa5ab;
}
.yaml-json .error,
.yaml-json .warning {
  margin: 0;
  font-size: 14px;
}
.yaml-json .error {
  color: #d85878;
}
.yaml-json .warning {
  color: #067a98;
}