はじめに
現在、Reactを習得するために、23種類のReactアプリ開発に取り組んでいます。
今回はその第三弾として、Reactでカウントダウンタイマーアプリを作成しました。
要件
一般的なタイマーの仕様を満たすことを目標にしました。
具体的には、以下の要件を満たすことを目指しています：
- 分と秒を設定できること
- スタートボタンを押すとカウントダウンが開始されること
- カウントダウン中はストップボタンを押してタイマーを停止できること
- タイマー未設定の場合はスタートボタンを無効化すること
- タイマーが0になると音が鳴ること
作成したアプリのイメージ
アプリ紹介動画
利用技術
- React
- TypeScript
- Vite
- Tailwind CSS
- use-sound
意識したポイント
Timerの管理をuseEffectで実装
タイマーの実行状態と時間をuseEffectで管理し、依存配列に変更があった場合に発火するようにしました。
無限ループが発生しないように注意して実装しています。
useTimer.tsx 一部抜粋
const [time, setTime] = useState<number>(0);
const [isRunning, setIsRunning] = useState(false);
useEffect(() => {
if (!isRunning) return;
const intervalId = setInterval(() => {
if (time === 0) {
setIsRunning(false);
play();
} else {
setTime((prev) => prev - 1);
}
}, 1000);
return () => {
clearInterval(intervalId);
};
}, [isRunning, time]);
アラームについてはuse-soundを利用
アラーム音を鳴らすために、use-soundというライブラリを使用しました。
シンプルで使いやすく、実装も非常に簡単でした。
https://www.npmjs.com/package/use-sound
おわりに
前回と同様にuseEffectを利用してインターバルを管理していますが、
今回はTimerとisRunningの状態も管理する必要があり、依存配列に追加することで、
少し難易度が高く感じました。
Github
GitHubにコードをアップロードしていますので、よかったら確認してみてください。