😎

React × Redux × MUIで作る「ポモドーロタイマー」開発記録

に公開
React
個人開発
frontend
学習記録
web開発
idea

今回は、集中力を保ちながら作業するためのポモドーロタイマーを自作したので、その開発記録や工夫ポイントをまとめてみました。

URL
https://pomodr-timer.netlify.app/
GitHub
https://github.com/yoscodes/pomodoro-timer/

なぜ作ったのか？

「集中したいけど、続かない」「休憩をとり忘れて疲れる」といった悩みを抱えていた自分は、ポモドーロ・テクニックに出会いました。

25分作業 + 5分休憩 というシンプルな仕組みながら、驚くほど効果的。

「これを自分好みにカスタマイズしたツールがあれば最強なのでは？」と思い立ち、React を使ってポモドーロタイマーを自作することにしました。

アプリの主な機能

  • ⏱️ 作業・休憩時間を自由に設定可能なタイマー
  • 🔔 作業/休憩の終了時に通知＋アラーム音
  • 🎯 円形プログレスバーで残り時間を視覚表示
  • 📊 セット数の自動カウント
  • 📱 モバイル対応済みのレスポンシブUI
  • ⚙️ ワンクリックでアクセスできる設定画面

作業中の画面

作業時間中は、画面にカウントダウンと現在の状態が表示されます。

休憩中の画面

作業が終わると、自動で休憩に切り替わります。切り替わったことも一目で分かるようにしています。

時間設定画面

最初に作業時間と休憩時間を設定できます。自分に合ったサイクルを見つけましょう。

使用技術

  • React 19
  • Redux Toolkit（状態管理）
  • Material UI (MUI)（UIコンポーネント）
  • React Redux
  • React Favicon（ブラウザタブの状態変化）

開発スピードと保守性を両立できる構成を意識しました。

UIと操作感にこだわったポイント

視覚的に残り時間がわかるプログレスバー

ReactとCanvasを組み合わせて、円形のプログレスバーを描画。直感的に「あとどれくらいか」がわかることで、集中が途切れにくくなります。

ブラウザ通知とアラーム音で集中をサポート

作業や休憩の終了を通知＋音でしっかりお知らせ。
別タブで作業中でも見逃すことがありません。

初回起動時に通知の許可を求める設計にし、ユーザーの同意を得てから利用されるようにしています。

モダンでシンプルなUI

Material UIをベースに、必要な要素だけを厳選したUI。
設定もワンクリックでアクセスでき、ストレスのない操作性を目指しました。

Reduxを使った状態管理

このアプリでは、以下の状態を Redux で一元管理しています：

  • timer：残り時間、稼働中かどうか、セット数など
  • setting：作業時間、休憩時間のユーザー設定
  • form：設定画面での一時的な入力状態

Redux Toolkit を使うことで boilerplate を減らし、可読性を高めました。

プロジェクト構成（抜粋）

src/
├── actions/         # Reduxアクション
├── reducers/        # Reduxリデューサー
├── Settings.js      # 設定コンポーネント
├── notification.js  # 通知機能
└── App.js           # メインUI

今後追加したい機能

  • 作業ログの記録と分析

  • 集中時間ランキング（ゲーミフィケーション）

  • 音声通知

  • スマホ対応のUI改善

最後に

このアプリを作ってから、25分集中 + 5分休憩というリズムが自然と身につきました。
まだまだ改良の余地はありますが、使えば使うほど「自分専用のツール」になっていくのが楽しいです！

もし興味があれば、ぜひ試してみてください！

💬 感想やフィードバック、お待ちしてます！

#React #個人開発 #frontend #学習記録 #web開発

Discussion