ポモドーロタイマー

React（CDN版）を使用して構築したポモドーロタイマーです。25分の作業セッション、5分の小休憩、15分の長休憩を自動で切り替え、円形のプログレスバーでタイマーの残り時間を視覚的に表示します。4セッションで1サイクルとし、セッション数・合計作業時間・完了サイクル数を記録します。Web Audio API による通知音、モード切替、スキップ機能など、実用的な機能を備えています。React の useState / useEffect / useCallback / useMemo / useRef を活用し、コンポーネント分割と状態管理のベストプラクティスを適用しています。

useEffect 内でのタイマー管理と、タイマー完了時の状態遷移ロジックの整合性を保つことが課題でした。setInterval のクリーンアップと useCallback による関数の安定参照を適切に組み合わせることで、意図しない再レンダリングやタイマーの二重起動を防止しています。

React Hooks（useState, useEffect, useCallback, useMemo, useRef）を組み合わせた状態管理のパターンを深く理解できました。また、Web Audio API を使ったブラウザ上での音声生成や、SVG を活用した円形プログレスバーの実装経験が得られました。CDN 版 React でも十分にコンポーネント指向の設計ができることを実感しました。