(JS/TS) setIntervalを使ってカウントダウン機能を作ろう

カウントダウンを実現するために setInterval を使ってみました。
調べてみるとさまざまな方法がありましたが、自分にはこのやり方が一番シンプルに感じたので、まとめておきます。

setInterval

指定した間隔で、同じ処理を繰り返し実行する関数です。

基本構文

setInterval(() => {
  // 処理内容
}, 時間); // 単位はミリ秒（1000 = 1秒）

例：60秒カウントダウン

設定時間(60秒)を1秒ごとに「-1」減らす➡️残り時間が1秒以下になると、0に固定
初期秒数（initialSeconds）は、カスタムフックの引数として受け取るようにしています。

const initialSeconds = 60;
const [timeLeft, setTimeLeft] = useState(initialSeconds); // カウントダウンの初期値

useEffect(() => {
  if (timeLeft <= 0) return; // タイマーが0以下なら何もしない

  const timer = setInterval(() => {
    setTimeLeft(prev => {
      if (prev <= 1) {
        clearInterval(timer); // タイマー停止
        return 0; // 残り0秒で固定
      }
      return prev - 1; // 残り秒数を1減らす
    });
  }, 1000); // 1000ミリ秒（1秒）ごとに実行

  return () => clearInterval(timer); // コンポーネントのクリーンアップ時にタイマー解除
}, [timeLeft]); // timeLeftが更新されるたびに再実行

リセット機能

初期状態に戻すためのリセット関数も用意しました。

const reset = useCallback(() => {
  setTimeLeft(initialSeconds);
}, [initialSeconds]); // 初期秒数が変わった場合にも対応