シンプルなストップウォッチアプリ

概要

JavaScript、CSS、HTML を使用して作成されたシンプルなストップウォッチアプリケーションです。今後 TypeScript や React にスケールするための準備段階として開発されています。

目的

TypeScript/React 学習プロジェクトの一環として作成

機能

• 時間計測: 時:分:秒.10 ミリ秒 (HH:MM:SS.MS) 形式での精密な時間計測
• スタート機能: タイマーの開始
• ストップ機能: タイマーの一時停止（再開可能）
• リセット機能: タイマーを 00:00:00.00 にリセット
• レスポンシブデザイン: デバイスサイズに対応した表示

使用技術

• HTML5: マークアップ構造
• CSS3: スタイリング（アニメーション、ホバーエフェクト含む）
• JavaScript (ES6): タイマー機能とユーザーインタラクション

ファイル構成

project/
├── index.html          # メインHTMLファイル
├── style.css          # スタイルシート
└── script.js          # JavaScript機能

セットアップ方法

1. すべてのファイル（HTML、CSS、JavaScript）を同じディレクトリに配置
2. Web ブラウザで index.html ファイルを開く
3. アプリケーションが自動的に読み込まれます

使用方法

基本操作

1. スタート: 「スタート」ボタンをクリックして計測開始
2. ストップ: 「ストップ」ボタンをクリックして計測一時停止
3. リセット: 「リセット」ボタンをクリックして時間を 00:00:00.00 に戻す

ボタンの状態管理

• 初期状態: スタートボタンのみ有効
• 計測中: ストップとリセットボタンが有効、スタートボタンは無効
• 一時停止中: すべてのボタンが有効

技術的な特徴

JavaScript 機能

• Date.now()を使用した高精度時間計測
• setInterval()による 10 ミリ秒間隔での表示更新
• 再開機能付きの一時停止システム
• 時間フォーマット関数による可読性の高い時間表示

CSS デザイン

• ダークテーマ: #34495eの背景色でモダンな外観
• デジタルフォント: Share Tech Mono フォントファミリーを使用
• ボタンエフェクト: ホバー時のアニメーション（上昇効果、影の変化）
• レスポンシブ: Flexbox レイアウトによる中央配置
• 装飾的要素: タイトル部分に独自のボーダーアニメーション

時間表示フォーマット

• 時間: 00-99 時間
• 分: 00-59 分
• 秒: 00-59 秒
• ミリ秒: 00-99（10 ミリ秒単位）

例: 01:23:45.67 = 1 時間 23 分 45 秒 67 ミリ秒

ブラウザ対応

モダンブラウザ（Chrome、Firefox、Safari、Edge）で動作確認済み

今後の拡張予定

このプロジェクトは TypeScript と React への移行を前提として設計されており、以下の拡張が予定されています：

• TypeScript による型安全性の向上