AI英語学習アプリ「Daily News English」を完成させるまでに直面した技術的な課題と、その解決プロセスを記録します。

音声認識が1秒ごとにリセットされる致命的なバグ、Three.jsの3D実装、Notion APIを使った認証システムなど、初心者エンジニアが実際につまずいたポイントを、コード例とともに共有します。

プロジェクト: Daily News English Training App

開発期間: 2026年1月

技術スタック: Next.js 16, React 19, Three.js, FastAPI, Python, Notion API

なぜこの記事を書くのか

開発ドキュメントには「何をしたか」が書いてある。でも、ブログには「なぜつまずいたか」「どう考えたか」を残したい。

完成したアプリの裏には、エラーと格闘した時間、調べても分からなかった問題、偶然見つけた解決策がある。その過程を記録することで、同じ道を歩く誰かの役に立てばと思う。

1. 音声認識が1秒ごとにリセットされる致命的バグ

何が起きたか

アプリのコア機能である音声入力が、1秒ごとに入力内容が消えてしまう。録音時間を表示するためにuseStateで1秒ごとに更新していたのが原因だった。

問題のコード:

const [recordingTime, setRecordingTime] = useState(0);

useEffect(() => {
  const interval = setInterval(() => {
    setRecordingTime(prev => prev + 1); // これが再レンダリングを引き起こす
  }, 1000);
}, []);

なぜこうなったのか

setRecordingTimeによる状態更新が、親コンポーネント全体を再レンダリングさせていた。その度にWeb Speech APIのSpeechRecognitionインスタンスが再作成され、認識中のセッションが中断されていた。

Reactの基礎は理解していたつもりだったが、「状態更新→再レンダリング→インスタンス再作成」という連鎖に気づくまで時間がかかった。

どう解決したか

useRefを使って、再レンダリングの影響を受けない参照を保持した。

修正後のコード: