JavaScript で作る反応時間テストゲーム（performance.now 活用）

はじめに

反応時間（reaction time）を測るミニゲームは、ブラウザ上で実装しやすく、
タイマー精度・イベント処理・UI 状態管理の練習にちょうど良い題材です。
本記事では performance.now() を使った計測の考え方と、React での実装例を紹介します。

なぜ Date.now() ではなく performance.now() か

Date.now() はシステム時刻を返すため、OS の時刻同期などで値がずれる可能性があります。
一方 performance.now() はページ読み込みからの経過時間を高精度（マイクロ秒単位）で返し、
時間計測の目的に適しています。

const start = performance.now();
// ... 何か処理 ...
const elapsed = performance.now() - start; // ms

シンプルな実装例

「画面が変わったらクリック、どれだけ速く反応できたか」を測る最小実装は次のとおりです。

function ReactionTest() {
  const [state, setState] = useState("waiting"); // waiting | ready | result
  const [result, setResult] = useState(null);
  const startRef = useRef(0);

  const begin = () => {
    // ランダムな遅延（1〜3秒）で「反応して」表示に切り替える
    const delay = 1000 + Math.random() * 2000;
    setState("waiting");
    setTimeout(() => {
      startRef.current = performance.now();
      setState("ready");
    }, delay);
  };

  const onPress = () => {
    if (state === "ready") {
      const ms = Math.round(performance.now() - startRef.current);
      setResult(ms);
      setState("result");
    } else {
      setResult(0); // 早すぎる反応は 0ms 扱い
      setState("result");
    }
  };

  return (
    <div>
      <p>{state === "waiting" ? "画面が変わるのを待って…" : state === "ready" ? "クリック！" : `結果: ${result}ms`}</p>
      {state === "result" ? (
        <button onClick={begin}>もう一度</button>
      ) : (
        <button onClick={onPress}>反応する</button>
      )}
    </div>
  );
}

実装のポイント

• 開始タイミング：performance.now() を画面切り替えの瞬間に記録する
• 早すぎる反応：待機中にクリックされた場合は計測失敗として扱う
• 複数回の計測：結果を配列に貯めて平均・標準偏差を出すと、集中力の変化も見える

おわりに

このようなゲーム化された計測 UI の実装は、ゲームベースの評価（game-based assessment）
に近いインタラクションの練習にも応用できます。実際にブラウザで動く
反応時間ゲームや類似のミニゲーム集は、以下のプロジェクトで体験できます。

HireVueGames

なお HireVueGames は非公式の練習用サービスであり、採用評価そのものとは無関係です。