Reactで、タイピング練習の画面を作る方法

export type TypingState = {
  text: string; // お手本の文
  pos: number; // 次に打つ文字の位置（ここまでは正しく打てている）
  keystrokes: number; // 数えたキーの回数（正しいキーとまちがえたキーの合計）
  misses: number; // まちがえたキーの回数
  missed: boolean; // いまの位置で、直前にまちがえたか（表示用）
  startedAt: number | null; // 最初のキーを押した時刻（ミリ秒）
  finishedAt: number | null; // 最後の文字を打った時刻（ミリ秒）
};

export type TypingAction =
  | { type: 'key'; key: string; time: number }
  | { type: 'reset'; text: string };

export function initTyping(text: string): TypingState {
  return { text, pos: 0, keystrokes: 0, misses: 0, missed: false, startedAt: null, finishedAt: null };
}

export function typingReducer(s: TypingState, a: TypingAction): TypingState {
  if (a.type === 'reset') return initTyping(a.text);
  if (s.finishedAt !== null) return s; // 打ち終わったら、それ以上は数えない
  const startedAt = s.startedAt ?? a.time;
  if (a.key !== s.text[s.pos]) {
    // まちがえたら、位置は進めずに回数だけ数える
    return { ...s, keystrokes: s.keystrokes + 1, misses: s.misses + 1, missed: true, startedAt };
  }
  const pos = s.pos + 1;
  return {
    ...s, pos, keystrokes: s.keystrokes + 1, missed: false, startedAt,
    finishedAt: pos === s.text.length ? a.time : null,
  };
}

// 打ち終わったときの成績
export function typingResult(s: TypingState) {
  if (s.startedAt === null || s.finishedAt === null) return null;
  const seconds = (s.finishedAt - s.startedAt) / 1000;
  return {
    seconds,
    perMinute: seconds > 0 ? Math.round((s.text.length / seconds) * 60) : 0, // 1分あたりに正しく打てた文字数
    accuracy: Math.round(((s.keystrokes - s.misses) / s.keystrokes) * 1000) / 10, // 正確率（%）
  };
}

import { useEffect, useReducer, useState } from 'react';
import { initTyping, typingReducer, typingResult } from './typing';

const TEXTS = [
  'the quick brown fox jumps over the lazy dog',
  'Practice makes perfect.',
  'Never put off till tomorrow what you can do today.',
];

type Props = { texts?: string[] };

export function TypingPractice({ texts = TEXTS }: Props) {
  const [round, setRound] = useState(0);
  const [state, dispatch] = useReducer(typingReducer, texts[0], initTyping);
  const result = typingResult(state);

  useEffect(() => {
    function onKeyDown(e: KeyboardEvent) {
      if (e.ctrlKey || e.metaKey || e.altKey) return; // ショートカットはブラウザに任せる
      if (e.key.length !== 1) return; // Shift、Enter、Backspace などは数えない
      e.preventDefault(); // Space でページがスクロールしたり、ボタンが押されたりしないように
      dispatch({ type: 'key', key: e.key, time: performance.now() });
    }
    window.addEventListener('keydown', onKeyDown);
    return () => window.removeEventListener('keydown', onKeyDown);
  }, []);

  function start(next: number) {
    setRound(next);
    dispatch({ type: 'reset', text: texts[next % texts.length] });
  }

  return (
    <div className="typing">
      <p className="text">
        {[...state.text].map((ch, i) => (
          <span
            key={i}
            className={i < state.pos ? 'done' : i === state.pos ? (state.missed ? 'current miss' : 'current') : ''}
          >
            {ch}
          </span>
        ))}
      </p>
      <p className="progress">
        {state.pos} / {state.text.length} 文字　ミス {state.misses}
      </p>
      <p className="result" role="status">
        {result && `${result.seconds.toFixed(1)}秒　1分あたり ${result.perMinute} 文字　正確率 ${result.accuracy}%`}
      </p>
      <button type="button" onClick={() => start(round)}>やり直す</button>
      {result && <button type="button" onClick={() => start(round + 1)}>次の文へ</button>}
    </div>
  );
}

.typing { font-family: sans-serif; color: #1f2a30; }
.text {
  font-family: ui-monospace, monospace; font-size: 22px; line-height: 1.8;
  white-space: pre-wrap; padding: 12px 16px; background: #eefafd; border-radius: 8px;
}
.text .done { color: #9aa5ab; }
.text .current { border-bottom: 3px solid #00c8e8; }
.text .miss { background: #d85878; color: #fff; border-bottom-color: #d85878; }
.progress { color: #067a98; }

23 / 23 文字　ミス 1
5.5秒　1分あたり 251 文字　正確率 95.8%