ReactでGoNogo課題を作ってみた

Go Nogo課題とは？

心理学実験でよく用いられる認知機能を評価する課題です。
・Goの刺激が出た時は反応する（例：ボタンを押す）
・Nogoの刺激が出た時は反応しない（例：ボタンを押さない）
というものです。

大学時代に実験していた時は、PCに専用ソフトを入れて計測していたので、
Webアプリケーションで構築すればもっと効率的にデータを集められるのではないかと思い、
作ってみました。
※今回はReactの勉強も兼ねているので、実験用としては作成していません。

成果物

Vercelにデプロイしました。
精度については検証していないので結果は参考程度ですがもしよければ遊んでみてください。
GoNogo課題

githubはこちらです。
https://github.com/iwasan0114/go-nogo

作成時のポイント

GoNogoは定期的に刺激を提示します。
それをsetTimeOutで制御しています。

gonogo\page.tsx

      // 刺激表示時間後の処理
      setTimeout(() => {
        if (!hasRespondedRef.current) {
          // 無反応の場合の記録
          const isCorrect = trialType === 'nogo';
          const trialData: TrialData = {
            trialNumber: currentTrial + 1,
            type: trialType,
            response: false,
            correct: isCorrect,
            reactionTime: null,
            timestamp: Date.now()
          };

          setResults(prev => [...prev, trialData]);
          console.log('Trial Result (No Response):', trialData);
        }

        setShowStimulus(false);
        
        // 次の試行への進行処理
        setTimeout(() => {
          const nextTrial = currentTrial + 1;
          
          if (nextTrial >= TRIAL_COUNT) {
            // 課題終了
            console.log('All trials completed!');
            setIsRunning(false);
            setShowResult(true);
            isExecutingRef.current = false;
          } else {
            // 次の試行へ
            setCurrentTrial(nextTrial);
            isExecutingRef.current = false; // フラグをリセット
          }
        }, 100);
      }, STIMULUS_DURATION);
    }, ITI_DURATION);

各刺激の実行後にuseEffectで次の施行に進むかを判定しています。

gonogo\page.tsx

  useEffect(() => {
    console.log("useEffect triggered - isRunning:", isRunning, "currentTrial:", currentTrial, "isExecuting:", isExecutingRef.current);
    
    if (isRunning && currentTrial > 0 && currentTrial < TRIAL_COUNT && !isExecutingRef.current) {
      console.log('Triggering next trial from useEffect');
      runNextTrial();
    }
  }, [currentTrial, isRunning, runNextTrial]);

学び

useStateやuseEffectの使い方を理解できたこと
実際に使ってもらって思いのほか反応が良かったこと

課題

実験で実運用することを想定すると
刺激の反応時間の精度をどう検証するか
ブラウザでの描画になるので、安定したフレームレートで表示するにはどうすればいいか？

反応時間のずれの改善に関してはQRTEngineというものがあるようです。
https://github.com/ErwinHaasnoot/QRTEngine

今後

現在は結果表示までなので、バックエンド機能を実装して、データを集められるようにしたいと思います。