Reactで、単位を相互に変換する入力欄を作る方法

export type Unit = {
  id: string;
  label: string;
  toBase: (v: number) => number; // この単位の値を、基準の単位の値にする
  fromBase: (v: number) => number; // 基準の単位の値を、この単位の値にする
};

// 基準の単位に掛ける数だけで換算できる単位
const scaled = (id: string, label: string, factor: number): Unit => ({
  id,
  label,
  toBase: (v) => v * factor,
  fromBase: (v) => v / factor,
});

// 長さ（基準はメートル）
export const lengthUnits: Unit[] = [
  scaled('mm', 'ミリメートル（mm）', 0.001),
  scaled('cm', 'センチメートル（cm）', 0.01),
  scaled('m', 'メートル（m）', 1),
  scaled('in', 'インチ（in）', 0.0254),
  scaled('ft', 'フィート（ft）', 0.3048),
];

// 温度（基準は摂氏）。掛け算だけでは換算できない
export const temperatureUnits: Unit[] = [
  { id: 'c', label: '摂氏（℃）', toBase: (v) => v, fromBase: (v) => v },
  { id: 'f', label: '華氏（℉）', toBase: (v) => ((v - 32) * 5) / 9, fromBase: (v) => (v * 9) / 5 + 32 },
];

import { useId, useState } from 'react';
import { formatNumber, parseNumber, type Unit } from './units';

type Edit = { unitId: string; text: string }; // 最後に打った欄の単位と、打ったままの文字列

type Props = { units: Unit[]; initial: Edit };

export function UnitConverter({ units, initial }: Props) {
  const [edit, setEdit] = useState<Edit>(initial);
  const baseId = useId();

  const source = units.find((u) => u.id === edit.unitId)!;
  const value = parseNumber(edit.text);
  const base = value === null ? null : source.toBase(value);
  // 空、「-」「.」「-.」は打っている途中なので、間違いとして扱わない
  const invalid = value === null && !/^-?\.?$/.test(edit.text.trim());

  return (
    <div className="converter">
      {units.map((u) => {
        const isSource = u.id === edit.unitId;
        const text = isSource ? edit.text : base === null ? '' : formatNumber(u.fromBase(base));
        const id = `${baseId}-${u.id}`;
        return (
          <div className="row" key={u.id}>
            <label htmlFor={id}>{u.label}</label>
            <input
              id={id}
              type="text"
              inputMode="decimal"
              autoComplete="off"
              value={text}
              aria-invalid={isSource && invalid}
              onChange={(e) => setEdit({ unitId: u.id, text: e.target.value })}
            />
          </div>
        );
      })}
    </div>
  );
}

"1" → mm="10" cm="1" m="0.01" in="0.393701" ft="0.032808"
"2" → mm="120" cm="12" m="0.12" in="4.724409" ft="0.393701"
"." → mm="120" cm="12." m="0.12" in="4.724409" ft="0.393701"
"5" → mm="125" cm="12.5" m="0.125" in="4.92126" ft="0.410105"

const [base, setBase] = useState<number | null>(initial);
// …
<input
  id={id}
  type="text"
  inputMode="decimal"
  value={base === null ? '' : formatNumber(u.fromBase(base))}
  onChange={(e) => {
    const v = parseNumber(e.target.value);
    setBase(v === null ? null : u.toBase(v));
  }}
/>

Number("") = 0
Number(" ") = 0
Number("1e3") = 1000
Number("0x10") = 16

// 入力された文字列を数にする。数として読めないときは null
export function parseNumber(text: string): number | null {
  const t = text.trim();
  if (!/^-?(\d+\.?\d*|\.\d+)$/.test(t)) return null;
  return Number(t);
}

0.7 cm → mm をそのまま計算: 6.999999999999999
0.1 ft → in をそのまま計算: 1.2000000000000002

// 計算の結果を、小数6桁までの文字列にする
const formatter = new Intl.NumberFormat('en-US', {
  maximumFractionDigits: 6,
  useGrouping: false,
  signDisplay: 'negative',
});
export function formatNumber(v: number): string {
  return formatter.format(v);
}