React + TypeScriptでタイマーアプリを作ってみた【初心者向け解説付き】

import { useMemo } from "react";

type TimerCounterProps = {
  time: number;
};

export const TimerCounter = (props: TimerCounterProps) => {
  const { time } = props;

  // タイムオーバー判定：0以下になったらタイムオーバー
  const isTimeOver = useMemo(() => time <= 0, [time]);

  // 分の計算：タイムオーバー時は絶対値で表示
  const minutes = useMemo(() => {
    const temp = isTimeOver ? time * -1 : time;
    const minute = Math.floor(temp / 60);
    if (minute < 10) {
      return `0${minute}`;
    } else {
      return `${minute}`;
    }
  }, [time, isTimeOver]);

  // 秒の計算：60で割った余りを取得
  const seconds = useMemo(() => {
    const temp = isTimeOver ? time * -1 : time;
    const second = Math.floor(temp % 60);
    if (second < 10) {
      return `0${second}`;
    } else {
      return `${second}`;
    }
  }, [time, isTimeOver]);

  return (
    <h1
      className={
        "flex grow items-center justify-center font-dela text-[240px] " +
        (isTimeOver ? " text-red-500" : " text-black")
      }
    >
      {minutes}:{seconds}
    </h1>
  );
};

export const ButtonDesignStyle = {
  default: " border border-gray text-gray",
  blue: " border border-blue-500 text-blue-500",
  fillBlue: " bg-blue-500 text-white",
  red: " border border-red-400 text-error",
  fillRed: " bg-red-400 text-white",
} as const satisfies Record<string, string>;

import { ButtonDesignStyle } from "../constants/ButtonDesignStyle";

type TimerButtonProps = {
  label: string;
  onClick: () => void;
  color: keyof typeof ButtonDesignStyle;
  disabled?: boolean;
};

export const TimerButton = (props: TimerButtonProps) => {
  const { label, onClick, color, disabled } = props;
  return (
    <button
      className={
        ButtonDesignStyle[color] +
        " inline-flex items-center justify-center min-w-[100px] h-12 rounded-md font-bold " +
        (disabled ? " cursor-not-allowed opacity-50" : " cursor-pointer")
      }
      disabled={disabled}
      onClick={onClick}
    >
      {label}
    </button>
  );
};

import { useEffect, useRef, useState } from "react";

import { TimerButton } from "./TimerButton";
import { TimerCounter } from "./TimerCounter";

export const Timer = () => {
  const [timer, setTimer] = useState(10 * 60); // デフォルト10分
  const [defaultValue, setDefaultValue] = useState(10 * 60);
  const [isRunning, setIsRunning] = useState(false);
  const intervalRef = useRef<NodeJS.Timeout | null>(null);

  // コンポーネントのアンマウント時にインターバルをクリア
  useEffect(() => {
    return () => {
      if (intervalRef.current) {
        clearInterval(intervalRef.current);
      }
    };
  }, []);

  // タイマースタート機能
  const startTimer = () => {
    if (!isRunning) {
      setIsRunning(true);
      intervalRef.current = setInterval(() => {
        setTimer((value) => {
          if (value <= 1) {
            // タイマーが0に到達したら停止
            setIsRunning(false);
            if (intervalRef.current) {
              clearInterval(intervalRef.current);
            }
            return 0;
          }
          return value - 1;
        });
      }, 1000);
    }
  };

  // タイマー停止機能
  const stopTimer = () => {
    setIsRunning(false);
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }
  };

  // タイマーリセット機能
  const resetTimer = () => {
    setIsRunning(false);
    setTimer(defaultValue);
    if (intervalRef.current) {
      clearInterval(intervalRef.current);
    }
  };

  // タイマー時間設定機能
  const setTimerValue = (value: number) => {
    setTimer(value);
    setDefaultValue(value);
  };

  return (
    <>
      <TimerCounter time={timer} />
      <div className="fixed bottom-0 left-0 flex w-full flex-row justify-between p-5">
        <div className="flex flex-row gap-3">
          <TimerButton color="fillBlue" label="start" onClick={startTimer} />
          <TimerButton
            color="fillRed"
            label="pause"
            onClick={stopTimer}
            disabled={!isRunning}
          />
          <TimerButton color="fillRed" label="reset" onClick={resetTimer} />
        </div>
        <div className="flex flex-row gap-3">
          <TimerButton
            color="blue"
            label="3"
            onClick={() => setTimerValue(3 * 60)}
          />
          <TimerButton
            color="blue"
            label="5"
            onClick={() => setTimerValue(5 * 60)}
          />
          <TimerButton
            color="blue"
            label="10"
            onClick={() => setTimerValue(10 * 60)}
          />
          <TimerButton
            color="blue"
            label="20"
            onClick={() => setTimerValue(20 * 60)}
          />
        </div>
      </div>
    </>
  );
};