Reactで、数字をローマ数字に変換する方法

// 数字とローマ数字を相互に変換する

// 大きい順に並べた、記号と値の組。4 や 9 を表す「IV」「IX」なども入れておく
const TABLE: [string, number][] = [
  ['M', 1000], ['CM', 900], ['D', 500], ['CD', 400],
  ['C', 100], ['XC', 90], ['L', 50], ['XL', 40],
  ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1],
];

export const MIN = 1;
export const MAX = 3999;

// 1〜3999 の整数をローマ数字にする。範囲の外なら null を返す
export function toRoman(n: number): string | null {
  if (!Number.isInteger(n) || n < MIN || n > MAX) return null;
  let rest = n;
  let result = '';
  for (const [symbol, value] of TABLE) {
    while (rest >= value) {
      result += symbol;
      rest -= value;
    }
  }
  return result;
}

// 正しい並びのローマ数字だけに一致する正規表現（千・百・十・一の位の順）
const PATTERN = /^M{0,3}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I{0,3})$/;

// ローマ数字を数にする。正しくない並びなら null を返す
export function fromRoman(input: string): number | null {
  // 全角の「ＸＩＩ」や1文字の「Ⅻ」を「XII」にし、小文字は大文字にそろえる
  const s = input.normalize('NFKC').trim().toUpperCase();
  if (s === '' || !PATTERN.test(s)) return null;
  let result = 0;
  let i = 0;
  for (const [symbol, value] of TABLE) {
    while (s.startsWith(symbol, i)) {
      result += value;
      i += symbol.length;
    }
  }
  return result;
}

import { useId, useState } from 'react';
import { MAX, MIN, fromRoman, toRoman } from './roman';

export function RomanNumeralConverter() {
  const id = useId();
  const [text, setText] = useState('2026');

  const trimmed = text.trim();
  let result = '';
  let error = '';
  if (trimmed === '') {
    result = '';
  } else if (/^[0-9０-９]+$/.test(trimmed)) {
    // 数字が入っていたらローマ数字にする
    const n = Number(trimmed.normalize('NFKC'));
    const roman = toRoman(n);
    if (roman === null) error = `${MIN}から${MAX}までの数を入れてください`;
    else result = roman;
  } else {
    // それ以外はローマ数字として読む
    const n = fromRoman(trimmed);
    if (n === null) error = 'ローマ数字として読めませんでした';
    else result = String(n);
  }

  return (
    <div className="roman-converter">
      <label htmlFor={id}>数字かローマ数字</label>
      <input
        id={id}
        value={text}
        autoComplete="off"
        onChange={(e) => setText(e.target.value)}
        aria-describedby={`${id}-result`}
      />
      <output id={`${id}-result`} htmlFor={id} className={error ? 'error' : ''}>
        {error || result}
      </output>
    </div>
  );
}

.roman-converter { display: grid; gap: 8px; max-width: 480px; }
.roman-converter input { font-size: 16px; padding: 6px 8px; }
.roman-converter output { min-height: 1.5em; font-size: 28px; color: #067a98; overflow-wrap: anywhere; }
.roman-converter output.error { font-size: 16px; color: #d85878; }

.css-roman ol { list-style-type: upper-roman; list-style-position: inside; padding-left: 0; margin: 0; font-size: 18px; }