Reactで、四則演算の式を計算する入力欄を作る方法

// 四則演算の式を読み、計算する関数（eval を使わない）

export type CalcResult =
  | { kind: 'empty' }
  | { kind: 'ok'; value: number }
  // incomplete は、続けて打てば直るかもしれないエラー（「1+」「(2」「5/0」など）
  | { kind: 'error'; message: string; incomplete: boolean };

type Token =
  | { type: 'num'; value: number; pos: number }
  | { type: 'op'; value: '+' | '-' | '*' | '/' | '(' | ')'; pos: number };

const INCOMPLETE = '式が途中で終わっています';
const NO_CLOSE = '「)」が足りません';
const DIV_ZERO = '0で割ることはできません';

// Number で正しく表せる整数の範囲（±9007199254740991）を超えたときの文
const TOO_LARGE = '大きすぎて正確に計算できません';

// 全角の数字・記号、×÷ を、半角の記号にそろえる
export function normalize(text: string): string {
  return text
    .normalize('NFKC')
    .replace(/×/g, '*')
    .replace(/÷/g, '/')
    .replace(/−/g, '-');
}

// 式の文字列を、数と記号の並びに分ける
function tokenize(s: string): Token[] {
  const tokens: Token[] = [];
  // 直前に読んだ数の文字列（数のすぐあとでないときは空）
  let lastNum = '';
  let i = 0;
  while (i < s.length) {
    const c = s[i];
    if (/\s/.test(c)) {
      lastNum = '';
      i++;
      continue;
    }
    if ('+-*/()'.includes(c)) {
      tokens.push({ type: 'op', value: c as '+', pos: i });
      lastNum = '';
      i++;
      continue;
    }
    // 数：1,200 のような3けたごとのカンマと、小数点を受け付ける
    const m = /^(?:\d{1,3}(?:,\d{3})+|\d+)(?:\.\d+)?|^\.\d+/.exec(s.slice(i));
    if (m) {
      const value = Number(m[0].replace(/,/g, ''));
      if (value > Number.MAX_SAFE_INTEGER) throw new Error(TOO_LARGE);
      tokens.push({ type: 'num', value, pos: i });
      lastNum = m[0];
      i += m[0].length;
      continue;
    }
    // 「1200.」や「1,20」のように、数を打っている途中で式が終わっている
    const rest = s.slice(i);
    if (!lastNum.includes('.')) {
      if (rest === '.') throw new Error(INCOMPLETE);
      if (/^,\d{0,2}$/.test(rest) && /^\d{1,3}(?:,\d{3})*$/.test(lastNum)) throw new Error(INCOMPLETE);
    }
    throw new Error(`${i + 1}文字目の「${c}」は使えません`);
  }
  return tokens;
}

// 掛け算・割り算を先に計算するよう、3段の関数で読む
//   式 = 項 (('+' | '-') 項)*
//   項 = 因子 (('*' | '/') 因子)*
//   因子 = ('+' | '-') 因子 | 数 | '(' 式 ')'
function parse(tokens: Token[]): number {
  // 途中の計算結果も、正確に表せる範囲に収まっているかを確かめる
  const safe = (v: number) => {
    if (!(Math.abs(v) <= Number.MAX_SAFE_INTEGER)) throw new Error(TOO_LARGE);
    return v;
  };
  let i = 0;
  const peek = () => tokens[i];

  function expr(): number {
    let v = term();
    for (let t = peek(); t?.type === 'op' && (t.value === '+' || t.value === '-'); t = peek()) {
      i++;
      const r = term();
      v = safe(t.value === '+' ? v + r : v - r);
    }
    return v;
  }

  function term(): number {
    let v = factor();
    for (let t = peek(); t?.type === 'op' && (t.value === '*' || t.value === '/'); t = peek()) {
      i++;
      const r = factor();
      if (t.value === '/' && r === 0) throw new Error(DIV_ZERO);
      v = safe(t.value === '*' ? v * r : v / r);
    }
    return v;
  }

  function factor(): number {
    const t = peek();
    if (!t) throw new Error(INCOMPLETE);
    i++;
    if (t.type === 'num') return t.value;
    if (t.value === '-') return -factor();
    if (t.value === '+') return factor();
    if (t.value === '(') {
      const v = expr();
      if (peek()?.value !== ')') throw new Error(NO_CLOSE);
      i++;
      return v;
    }
    throw new Error(`${t.pos + 1}文字目の「${t.value}」の位置がおかしいです`);
  }

  const v = expr();
  const rest = peek();
  if (rest) throw new Error(`${rest.pos + 1}文字目の「${rest.value}」の位置がおかしいです`);
  return v;
}

export function calculate(text: string): CalcResult {
  const s = normalize(text);
  if (s.trim() === '') return { kind: 'empty' };
  try {
    const value = parse(tokenize(s));
    // 0.1 + 0.2 が 0.30000000000000004 になるような誤差を、有効数字15けたで丸める
    return { kind: 'ok', value: Number.isInteger(value) ? value : Number(value.toPrecision(15)) };
  } catch (e) {
    const message = (e as Error).message;
    return { kind: 'error', message, incomplete: [INCOMPLETE, NO_CLOSE, DIV_ZERO].includes(message) };
  }
}

import { useId, useState } from 'react';
import { calculate } from './calc';

const format = new Intl.NumberFormat('ja-JP', { maximumFractionDigits: 15 });

type Props = {
  label: string;
  initial?: string;
  // 計算結果で確定したときに呼ばれる
  onCommit?: (value: number) => void;
};

export function CalcInput({ label, initial = '', onCommit }: Props) {
  const id = useId();
  const [text, setText] = useState(initial);
  // Enter やフォーカスを外したときに計算できなかったら true にする
  const [tried, setTried] = useState(false);
  const result = calculate(text);
  // 続けて打てば直るかもしれないエラーは、確定しようとするまで出さない
  const error = result.kind === 'error' && (tried || !result.incomplete) ? result.message : '';

  // 式を計算結果に置き換える
  function commit() {
    if (result.kind !== 'ok') {
      setTried(result.kind === 'error');
      return;
    }
    setText(String(result.value));
    onCommit?.(result.value);
  }

  return (
    <div className="calc">
      <label htmlFor={id}>{label}</label>
      <input
        id={id}
        autoComplete="off"
        value={text}
        aria-invalid={error !== ''}
        aria-describedby={`${id}-msg`}
        onChange={(e) => {
          setText(e.target.value);
          setTried(false);
        }}
        onKeyDown={(e) => {
          // 日本語入力の変換を確定する Enter では、計算しない
          if (e.key !== 'Enter' || e.nativeEvent.isComposing) return;
          // 式を計算結果に置き換えるときと、エラーのときは、フォームを送信しない
          const settled = result.kind === 'empty' || (result.kind === 'ok' && String(result.value) === text);
          if (!settled) e.preventDefault();
          commit();
        }}
        onBlur={commit}
      />
      <p id={`${id}-msg`} className={error ? 'error' : 'preview'}>
        {error || (result.kind === 'ok' ? `= ${format.format(result.value)}` : '')}
      </p>
    </div>
  );
}

.calc {
  display: grid;
  gap: 4px;
  max-width: 320px;
}
.calc input {
  font-size: 1.125rem;
  padding: 6px 8px;
}
.calc p {
  min-height: 1.5em;
  margin: 0;
}
.calc .preview {
  color: #067a98;
}
.calc .error {
  color: #d85878;
}