カウントダウンタイマー (TypeScript + React + Storybook)

React 18とTypeScriptで構築されたシンプルなカウントダウンタイマーアプリケーションです。機能別のモジュラーアーキテクチャを採用しています。

デモプレイ

https://yunbow.github.io/react-app-countdown-timer/demo/

主要機能

タイマー機能

• 1-60分の範囲でタイマー設定
• 開始・一時停止・リセット機能
• プリセットボタン（1分、3分、5分、10分）
• MM:SS形式での時間表示
• Web Audio APIによるアラーム音

操作方法

• 数値入力: 1-60分の範囲でタイマー時間を設定
• 開始ボタン: タイマーを開始
• 一時停止ボタン: タイマーを一時停止
• リセットボタン: タイマーを初期設定時間に戻す
• プリセットボタン: 1分、3分、5分、10分の事前設定時間を選択

技術スタック

• React 18 - UIライブラリ
• TypeScript - プログラミング言語
• Storybook 7 - コンポーネント開発・ドキュメント
• CSS Modules - スタイリング
• Vite - ビルドツール

プロジェクト構造

src/
├── features/                   # 機能別モジュール
│   └── countdown-timer/        # カウントダウンタイマー機能
│       ├── components/         # 機能専用コンポーネント
│       │   ├── TimerDisplay/   # タイマー表示
│       │   ├── TimerControls/  # タイマー操作ボタン群
│       │   ├── PresetButtons/  # プリセットボタン群
│       │   └── StatusMessage/  # ステータスメッセージ
│       ├── CountdownTimer/     # 機能ルートコンポーネント
│       ├── useTimer.ts         # タイマーロジック管理フック
│       ├── types.ts            # 機能固有の型定義
│       ├── audioUtils.ts       # 音声関連ユーティリティ
│       └── timeUtils.ts        # 時間フォーマットユーティリティ
├── components/                 # 共通UIコンポーネント
│   ├── Button/                 # 操作ボタン
│   ├── Input/                  # テキスト入力
│   └── Text/                   # テキスト表示
├── stories/                    # Storybook用ストーリー
├── Config.ts                   # アプリケーション設定
├── App.tsx                     # メインアプリ
└── main.tsx                    # エントリーポイント

スクリプト

# セットアップ
npm install

# 開発サーバー起動
npm run dev

# ビルド
npm run build

# プレビュー
npm run preview

# Storybook起動
npm run storybook

# Storybook ビルド
npm run build-storybook

ライセンス

MIT License