[Portfolio] TIMER（REACT + TypeScript）

React + TypeScriptを使用して、カウントアップ・カウントダウンに対応したシンプルなタイマーアプリを作成しました。

時間を計測する基本的なタイマー機能に加え、経過状況を確認できる進捗バーと、カウントダウン完了時に知らせるデスクトップ通知を実装しています。

React・TypeScriptの実装を中心に制作しているため、デザインは必要最低限とし、タイマー処理や状態管理などの機能面を重視しています。

主な機能・特徴

• カウントアップタイマー
• カウントダウンタイマー
• 時間の進行状況を確認できる進捗バー
• カウントダウン完了時のデスクトップ通知
• Reactによる画面・タイマー状態の管理
• TypeScriptを利用した型を意識した実装

デスクトップ通知は、現在の仕様ではページを開いている間のみ動作します。

活用例

• 作業時間の計測
• 休憩時間の管理
• ポモドーロなどの時間管理
• 勉強やトレーニング時間の計測
• 制限時間を設けた作業の管理
• React・TypeScriptを利用したWebアプリの構築例

単純に時間を表示するだけでなく、進捗バーや通知を組み合わせることで、残り時間や終了タイミングを把握しやすい構成にしています。

実装の仕組み

Reactでタイマーの状態を管理し、時間の変化に合わせて画面表示と進捗バーを更新します。

カウントアップとカウントダウンを切り替えて利用できる構成とし、それぞれの時間変化に合わせて表示を更新しています。

工夫・改善した点

• カウントアップとカウントダウンを1つのアプリで利用できるようにしました。
• 数字だけでなく進捗バーを表示し、時間の経過を視覚的に確認できるようにしました。
• カウントダウン完了時にデスクトップ通知を表示できるようにしました。
• Reactの状態管理を利用し、時間の変化に合わせて画面を更新する構成にしています。
• TypeScriptを使用し、タイマー処理のデータや状態を扱う構成を実装しました。

ReactとTypeScriptの学習・実装を目的としているため、CSSでの装飾は必要最低限とし、タイマーの動作や状態管理を中心に制作しています。

使用技術

デモ

GitHub Pagesで実際の動作を確認できるサンプルを公開しています。

［デモを見る］