シンプルで使いやすいWEBタイマー「うぇぶたいまー」を作ってみた！

シンプルで使いやすいWEBタイマー「うぇぶたいまー」を開発したので、紹介させていただきます。

ちなみにこのアプリは3時間で開発できました。

なぜ作ったの？

スマートフォンやPCで使えるタイマーアプリは数多くありますが、以下のような課題を感じていました：

インストールが必要
広告が多すぎる
デザインが派手すぎる
機能が多すぎて複雑

そこで、「必要な機能だけを備えた、シンプルなWEBタイマー」を作ることにしました。

うぇぶたいまーの特徴

1. インストール不要で、すぐに使える

ブラウザさえあれば、どこからでもアクセスして使用できます。 URLをブックマークしておけば、すぐにアクセス可能です。

2. シンプルな操作性

直感的な「＋」「−」ボタンで時間を設定
開始・停止・リセットの基本操作のみ
目に優しい落ち着いた色使い

3. 便利な機能をオプションで搭載

アラーム音のON/OFF切り替え
ポモドーロタイマー機能（オプション）
プログレスバーで残り時間を視覚的に表示
バックグラウンドでも時間のカウントが走る

こんな時に便利です

料理の時間管理
- レシピを見ながら、同じブラウザでタイマーも使える
- 複数の調理時間を管理可能
作業の区切り管理
- 集中作業のタイムキープ
- 休憩時間の管理
オンライン会議の時間管理
- 会議の残り時間を確認
- プレゼンテーションの時間管理

技術的なポイント

「うぇぶたいまー」は、React.jsを使用して開発しています。特に以下の実装がポイントとなっています。

1. カウントダウンの実装

Reactの useEffect フックを使用して、時間のカウントダウンを実装しています：

const CountdownTimer = () => {
  const [time, setTime] = useState(0);
  const [isRunning, setIsRunning] = useState(false);

  useEffect(() => {
    let interval;
    if (isRunning && time > 0) {
      interval = setInterval(() => {
        setTime((prevTime) => prevTime - 1);
      }, 1000);
    } else if (time === 0 && isRunning) {
      setIsRunning(false);
      if (isSoundOn) playAlarm();
    }
    return () => clearInterval(interval);
  }, [isRunning, time]);

  // タイマー開始処理
  const startTimer = () => {
    const totalSeconds = hours * 3600 + minutes * 60 + seconds;
    if (totalSeconds > 0) {
      setTime(totalSeconds);
      setIsRunning(true);
      setShowTimeUp(false);
    }
  };

このコードの特徴は以下です。

setInterval を使用して1秒ごとにカウントダウン
クリーンアップ関数で確実にインターバルをクリア
タイマー終了時の処理（アラーム再生など）も実装

2. 時間調整機能の実装

プラス/マイナスボタンによる時間調整は以下のように実装しています：

const adjustTime = (unit, amount) => {
  const setter = unit === 'hours' ? setHours 
               : unit === 'minutes' ? setMinutes 
               : setSeconds;
  setter((prev) => Math.max(0, Math.min(unit === 'hours' ? 23 : 59, prev + amount)));
};

const TimeAdjuster = ({ value, unit, onChange }) => (
  <div className="flex flex-col items-center">
    <button 
      onClick={() => onChange(unit, 1)} 
      className="p-1 text-white" 
      disabled={isRunning}
    >
      <Plus size={20} />
    </button>
    <span className="text-2xl font-bold my-1 text-white">
      {value.toString().padStart(2, '0')}
    </span>
    <button 
      onClick={() => onChange(unit, -1)} 
      className="p-1 text-white" 
      disabled={isRunning}
    >
      <Minus size={20} />
    </button>
  </div>
);

このコードの特徴は以下です。

時、分、秒それぞれの値を個別に管理
上限値（時：23、分・秒：59）を考慮
負の値にならないよう制御
ゼロパディングで2桁表示を維持

3. Reactの状態管理

アプリケーション全体で以下のような状態を管理しています!

// 時間関連の状態
const [hours, setHours] = useState(0);
const [minutes, setMinutes] = useState(0);
const [seconds, setSeconds] = useState(0);
const [time, setTime] = useState(0);

// タイマーの状態
const [isRunning, setIsRunning] = useState(false);
const [showTimeUp, setShowTimeUp] = useState(false);

// 設定関連の状態
const [isSoundOn, setIsSoundOn] = useState(true);
const [isPomodoroMode, setIsPomodoroMode] = useState(false);