Reactで、数字を漢数字に変換する入力欄を作る方法

// 数字の文字列を読み、漢数字にする関数

const DIGITS = '〇一二三四五六七八九';
const SMALL = ['', '十', '百', '千'];
const LARGE = ['', '万', '億', '兆', '京'];

// 京の位まで（20けた）
export const MAX = 10n ** 20n - 1n;

export type ParseResult =
  | { kind: 'empty' }
  | { kind: 'ok'; value: bigint }
  | { kind: 'error'; message: string };

// 入力欄の文字列を、0以上の整数として読む
export function parseInteger(text: string): ParseResult {
  // 全角の数字を半角にし、空白と桁区切りのカンマを取り除く
  const s = text.normalize('NFKC').replace(/[\s,]/g, '');
  if (s === '') return { kind: 'empty' };
  if (!/^\d+$/.test(s)) return { kind: 'error', message: '0以上の整数を、数字で入力してください' };
  const value = BigInt(s);
  if (value > MAX) return { kind: 'error', message: '京の位（20けた）までの数にしてください' };
  return { kind: 'ok', value };
}

// 1けたずつ漢数字にする（2026 → 二〇二六）
export function toKanjiDigits(value: bigint): string {
  return value.toString().replace(/\d/g, (d) => DIGITS[Number(d)]);
}

// 0〜9999 を、十・百・千を使って書く。十・百・千の前の「一」は書かない
function fourDigits(n: number): string {
  let out = '';
  for (let i = 3; i >= 0; i--) {
    const d = Math.floor(n / 10 ** i) % 10;
    if (d === 0) continue;
    out += (d === 1 && i > 0 ? '' : DIGITS[d]) + SMALL[i];
  }
  return out;
}

// 万・億・兆・京を使って書く（2026 → 二千二十六）
export function toKanjiNumber(value: bigint): string {
  if (value === 0n) return '〇';
  let out = '';
  let i = 0;
  // 下から4けたずつ区切り、0でない区切りに万・億・兆・京を付ける
  for (let v = value; v > 0n; v /= 10000n, i++) {
    const group = Number(v % 10000n);
    if (group > 0) out = fourDigits(group) + LARGE[i] + out;
  }
  return out;
}

new Intl.NumberFormat('ja-JP-u-nu-hanidec').format(2026);
// → '二,〇二六'
new Intl.NumberFormat('ja-JP-u-nu-hanidec', { useGrouping: false }).format(2026);
// → '二〇二六'

import { useId, useState } from 'react';
import { parseInteger, toKanjiDigits, toKanjiNumber } from './kanji';

type Style = 'number' | 'digits';

export function KanjiNumberInput({ initial = '' }: { initial?: string }) {
  const id = useId();
  const [text, setText] = useState(initial);
  const [style, setStyle] = useState<Style>('number');
  const [copied, setCopied] = useState(false);

  const result = parseInteger(text);
  const kanji =
    result.kind !== 'ok' ? '' :
    style === 'number' ? toKanjiNumber(result.value) : toKanjiDigits(result.value);

  async function copy() {
    await navigator.clipboard.writeText(kanji);
    setCopied(true);
  }

  return (
    <div className="kanji">
      <label htmlFor={`${id}-num`}>数字</label>
      <input
        id={`${id}-num`}
        inputMode="numeric"
        autoComplete="off"
        value={text}
        aria-invalid={result.kind === 'error'}
        aria-describedby={`${id}-msg`}
        onChange={(e) => {
          setText(e.target.value);
          setCopied(false);
        }}
      />
      <p id={`${id}-msg`} className="error">
        {result.kind === 'error' ? result.message : ''}
      </p>

      <fieldset>
        <legend>書き方</legend>
        <label>
          <input type="radio" name={`${id}-style`} checked={style === 'number'} onChange={() => setStyle('number')} />
          万・億を使う（二千二十六）
        </label>
        <label>
          <input type="radio" name={`${id}-style`} checked={style === 'digits'} onChange={() => setStyle('digits')} />
          1けたずつ（二〇二六）
        </label>
      </fieldset>

      <output htmlFor={`${id}-num`}>{kanji}</output>
      <button type="button" disabled={kanji === ''} onClick={copy}>
        {copied ? 'コピーしました' : 'コピー'}
      </button>
    </div>
  );
}

.kanji {
  display: grid;
  gap: 6px;
  max-width: 360px;
}
.kanji input:not([type='radio']) {
  font-size: 1.125rem;
  padding: 6px 8px;
}
.kanji fieldset {
  display: grid;
  gap: 4px;
  border: none;
  padding: 0;
  margin: 0;
}
.kanji .error {
  min-height: 1.5em;
  margin: 0;
  color: #d85878;
}
.kanji output {
  min-height: 1.6em;
  font-size: 1.5rem;
  color: #067a98;
}
.kanji button {
  justify-self: start;
}