Reactで、和暦と西暦を変換する入力欄を作る方法

// 西暦の年と和暦の年を変換する関数

type Era = { name: string; initial: string; start: [number, number, number] };

// 元号と、始まった日（西暦）。新しい元号ができたら1行足す
const ERAS: Era[] = [
  { name: '明治', initial: 'M', start: [1868, 10, 23] },
  { name: '大正', initial: 'T', start: [1912, 7, 30] },
  { name: '昭和', initial: 'S', start: [1926, 12, 25] },
  { name: '平成', initial: 'H', start: [1989, 1, 8] },
  { name: '令和', initial: 'R', start: [2019, 5, 1] },
];

export const MIN_YEAR = 1873; // 明治6年。これより前は扱わない
export const MAX_YEAR = 9999;

// 1年目は「元年」と書く
const yearText = (n: number) => (n === 1 ? '元' : String(n));

// その元号の最後の日（次の元号の始まりの前日）
function lastDay(next: Era): [number, number] {
  const [y, m, d] = next.start;
  const date = new Date(Date.UTC(y, m - 1, d - 1));
  return [date.getUTCMonth() + 1, date.getUTCDate()];
}

export type Result =
  | { kind: 'empty' }
  | { kind: 'hint'; message: string }
  | { kind: 'error'; message: string }
  | { kind: 'ok'; lines: string[] };

// 西暦の年 → 和暦。年の途中で元号が変わる年は2つ返す
export function toWareki(year: number): string[] {
  const lines: string[] = [];
  ERAS.forEach((era, i) => {
    const next = ERAS[i + 1];
    const [sy, sm, sd] = era.start;
    if (year < sy || (next && year > next.start[0])) return;
    // 次の元号が1月1日に始まる年は、この元号に入らない
    if (next && year === next.start[0] && next.start[1] === 1 && next.start[2] === 1) return;
    let line = `${era.name}${yearText(year - sy + 1)}年`;
    if (year === sy && !(sm === 1 && sd === 1)) line += `（${sm}月${sd}日から）`;
    if (next && year === next.start[0]) {
      const [m, d] = lastDay(next);
      line += `（${m}月${d}日まで）`;
    }
    lines.push(line);
  });
  return lines;
}

// 和暦 → 西暦の年
function fromWareki(era: Era, n: number): Result {
  const i = ERAS.indexOf(era);
  const next = ERAS[i + 1];
  const [sy, sm, sd] = era.start;
  const year = sy + n - 1;
  if (n < 1) return { kind: 'error', message: `${era.name}は元年からです` };
  if (next && year > next.start[0]) {
    const last = next.start[0] - sy + 1;
    return { kind: 'error', message: `${era.name}は${yearText(last)}年までです` };
  }
  if (year < MIN_YEAR) return { kind: 'error', message: `${MIN_YEAR}年（明治6年）より前は扱いません` };
  if (year > MAX_YEAR) return { kind: 'error', message: `${MAX_YEAR}年より後は扱いません` };
  let line = `${year}年`;
  if (year === sy && !(sm === 1 && sd === 1)) line += `（${sm}月${sd}日から）`;
  if (next && year === next.start[0]) {
    const [m, d] = lastDay(next);
    line += `（${m}月${d}日まで）`;
  }
  return { kind: 'ok', lines: [line] };
}

const WESTERN = /^(\d{1,4})年?$/; // 「2026年」のように年が付いた形も受け付ける
const WAREKI = /^(明治|大正|昭和|平成|令和|[MTSHR])(\d{1,4}|元)年?$/;
// 打っている途中の形（元号だけ、元号の1文字目だけ、3桁までの数字）
const ERA_ONLY = /^(明治|大正|昭和|平成|令和|[MTSHR明大昭平令])$/;
const SHORT_NUMBER = /^\d{1,3}$/;

// 入力欄の文字列を読んで、どちら向きかを決めて変換する
export function convert(input: string): Result {
  // 全角の英数字や「㋿」「㍻」を半角・2文字に直し、空白を取る
  const s = input.normalize('NFKC').replace(/\s+/g, '').toUpperCase();
  if (s === '') return { kind: 'empty' };

  // 打っている途中では、エラーにせず続きを促す
  if (ERA_ONLY.test(s)) return { kind: 'hint', message: '続けて年を入力してください' };
  if (SHORT_NUMBER.test(s)) return { kind: 'hint', message: '西暦は4桁で入力してください' };

  const w = s.match(WESTERN);
  if (w) {
    const year = Number(w[1]);
    if (year < MIN_YEAR) return { kind: 'error', message: `${MIN_YEAR}年（明治6年）より前は扱いません` };
    return { kind: 'ok', lines: toWareki(year) };
  }

  const j = s.match(WAREKI);
  if (j) {
    const era = ERAS.find((e) => e.name === j[1] || e.initial === j[1])!;
    const n = j[2] === '元' ? 1 : Number(j[2]);
    return fromWareki(era, n);
  }

  return { kind: 'error', message: '「2026」「令和8年」「R8」のように入力してください' };
}

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

export function WarekiInput({ defaultValue = '' }: { defaultValue?: string }) {
  const id = useId();
  const [text, setText] = useState(defaultValue);
  const result = convert(text);

  return (
    <div className="wareki">
      <label htmlFor={id}>西暦または和暦の年</label>
      <input
        id={id}
        type="text"
        value={text}
        placeholder="2026 / 令和8年 / R8"
        aria-describedby={`${id}-result`}
        aria-invalid={result.kind === 'error'}
        onChange={(e) => setText(e.target.value)}
      />
      <output id={`${id}-result`} htmlFor={id} aria-live="polite">
        {result.kind === 'ok' &&
          result.lines.map((line) => <p key={line} className="answer">{line}</p>)}
        {result.kind === 'hint' && <p>{result.message}</p>}
        {result.kind === 'error' && <p className="error">{result.message}</p>}
      </output>
    </div>
  );
}

.wareki {
  display: grid;
  gap: 8px;
  max-width: 360px;
}
.wareki input {
  font-size: 1.25rem;
  padding: 6px 8px;
}
.wareki output p {
  margin: 4px 0;
}
.wareki .answer {
  font-size: 1.5rem;
  color: #067a98;
}
.wareki .error {
  color: #d85878;
}

const d = new Date('2019-05-01T00:00:00Z');
new Intl.DateTimeFormat('ja-JP-u-ca-japanese', { dateStyle: 'long', timeZone: 'UTC' }).format(d);
// "令和元年5月1日"
new Intl.DateTimeFormat('ja-JP-u-ca-japanese', { era: 'narrow', year: 'numeric', timeZone: 'UTC' }).format(d);
// "R元年"