Reactで、ローマ字をひらがなに変換する入力欄を作る方法

// ローマ字をひらがなに変換する関数

// 5つの母音と、子音ごとの行（母音の順は a i u e o）
const VOWELS = 'aiueo';
const ROWS: Record<string, string> = {
  '': 'あいうえお',
  k: 'かきくけこ',
  s: 'さしすせそ',
  t: 'たちつてと',
  n: 'なにぬねの',
  h: 'はひふへほ',
  m: 'まみむめも',
  r: 'らりるれろ',
  g: 'がぎぐげご',
  z: 'ざじずぜぞ',
  d: 'だぢづでど',
  b: 'ばびぶべぼ',
  p: 'ぱぴぷぺぽ',
  x: 'ぁぃぅぇぉ',
  l: 'ぁぃぅぇぉ',
};

const TABLE: Record<string, string> = {};
for (const [c, kana] of Object.entries(ROWS)) {
  [...VOWELS].forEach((v, i) => (TABLE[c + v] = kana[i]));
}
// 「きゃ」「しゃ」のように、小さい「ゃゅょ」が付く音
const YOUON: Record<string, string> = {
  ky: 'き', sy: 'し', ty: 'ち', ny: 'に', hy: 'ひ', my: 'み', ry: 'り',
  gy: 'ぎ', zy: 'じ', jy: 'じ', dy: 'ぢ', by: 'び', py: 'ぴ',
  sh: 'し', ch: 'ち', cy: 'ち', j: 'じ',
};
for (const [c, kana] of Object.entries(YOUON)) {
  TABLE[c + 'a'] = kana + 'ゃ';
  TABLE[c + 'u'] = kana + 'ゅ';
  TABLE[c + 'o'] = kana + 'ょ';
  TABLE[c + 'e'] = kana + 'ぇ';
}
Object.assign(TABLE, {
  // ヘボン式のつづりと、表にない音
  shi: 'し', chi: 'ち', tsu: 'つ', fu: 'ふ', ji: 'じ',
  ca: 'か', cu: 'く', co: 'こ',
  ya: 'や', yu: 'ゆ', yo: 'よ', ye: 'いぇ',
  wa: 'わ', wi: 'うぃ', we: 'うぇ', wo: 'を',
  fa: 'ふぁ', fi: 'ふぃ', fe: 'ふぇ', fo: 'ふぉ',
  va: 'ゔぁ', vi: 'ゔぃ', vu: 'ゔ', ve: 'ゔぇ', vo: 'ゔぉ',
  thi: 'てぃ', dhi: 'でぃ', twu: 'とぅ', dwu: 'どぅ',
  // 小さい文字
  xya: 'ゃ', xyu: 'ゅ', xyo: 'ょ', lya: 'ゃ', lyu: 'ゅ', lyo: 'ょ',
  xtu: 'っ', ltu: 'っ', xtsu: 'っ', ltsu: 'っ', xwa: 'ゎ', lwa: 'ゎ',
  // 「ん」と記号
  nn: 'ん', "n'": 'ん', xn: 'ん',
  '-': 'ー', ',': '、', '.': '。',
});

const KEYS = Object.keys(TABLE);
const MAX_LEN = Math.max(...KEYS.map((k) => k.length));
const isConsonant = (c: string) => /^[bcdfghjklmpqrstvwxyz]$/.test(c);

// final が false のときは、末尾の打ちかけのローマ字（「k」「sh」「n」など）を残す
export function toHiragana(text: string, final = false): string {
  let out = '';
  let i = 0;
  while (i < text.length) {
    const rest = text.slice(i).toLowerCase();

    // 表にある、いちばん長いつづりを探す
    let hit = '';
    for (let len = Math.min(MAX_LEN, rest.length); len > 0; len--) {
      if (TABLE[rest.slice(0, len)]) {
        hit = rest.slice(0, len);
        break;
      }
    }
    if (hit) {
      out += TABLE[hit];
      i += hit.length;
      continue;
    }

    const [c, next] = rest;
    // n のあとに母音・y・n・' 以外が来たら、その n は「ん」
    if (c === 'n' && next !== undefined && !/[aiueoyn']/.test(next)) {
      out += 'ん';
      i += 1;
      continue;
    }
    // 同じ子音が2つ続いたら「っ」（kka → っか）。tch も「っ」にする（matcha → まっちゃ）
    if (isConsonant(c) && c !== 'n' && (next === c || rest.startsWith('tch'))) {
      out += 'っ';
      i += 1;
      continue;
    }
    // 末尾の打ちかけは、そのまま残す（final のときの n だけは「ん」にする）
    if (KEYS.some((k) => k.length > rest.length && k.startsWith(rest))) {
      out += final && rest === 'n' ? 'ん' : text.slice(i);
      break;
    }
    // 表にない文字（数字、漢字、変換できないつづり）は、そのまま
    out += text[i];
    i += 1;
  }
  return out;
}

import { useId, useLayoutEffect, useRef, useState } from 'react';
import { toHiragana } from './romaji';

// ローマ字で打つと、ひらがなに変わる入力欄
export function RomajiInput({ label }: { label: string }) {
  const id = useId();
  const [value, setValue] = useState('');
  const inputRef = useRef<HTMLInputElement>(null);
  // 変換したあとに、カーソルを置き直す位置
  const caretRef = useRef<number | null>(null);

  useLayoutEffect(() => {
    const el = inputRef.current;
    if (el && caretRef.current !== null) {
      el.setSelectionRange(caretRef.current, caretRef.current);
      caretRef.current = null;
    }
  });

  return (
    <div className="romaji">
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        ref={inputRef}
        type="text"
        autoComplete="off"
        value={value}
        onChange={(e) => {
          const el = e.target;
          const pos = el.selectionStart ?? el.value.length;
          // カーソルより前だけを変換し、後ろはそのまま残す
          const before = toHiragana(el.value.slice(0, pos));
          setValue(before + el.value.slice(pos));
          caretRef.current = before.length;
        }}
        onBlur={() => setValue(toHiragana(value, true))}
      />
    </div>
  );
}

.romaji {
  display: grid;
  gap: 6px;
  max-width: 360px;
  margin-bottom: 16px;
}
.romaji input {
  font-size: 1.25rem;
  padding: 6px 8px;
}

import { useId, useState } from 'react';
import { toHiragana } from './romaji';

// 比べるための書き方：欄の文字全体を変換し、カーソルの位置は気にしない
export function NaiveRomajiInput({ label }: { label: string }) {
  const id = useId();
  const [value, setValue] = useState('');

  return (
    <div className="romaji">
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        type="text"
        autoComplete="off"
        value={value}
        onChange={(e) => setValue(toHiragana(e.target.value))}
      />
    </div>
  );
}