【ポモドーロタイマーを作ろうVanillaJS編①】～要件定義～
ポモドーロタイマーの作成にあたり
・どのような機能が必要か？
・表示画面に必要な項目は？
・どのような機能を持たせたいか？
などを整理しました。
いわゆる要件定義というものを行いました。
そもそもポモドーロタイマーとは？
ポモドーロテクニックといわれる、「25分（集中）・5分（休憩）・25分（集中）・5分（休憩）…」というサイクルで作業をする、仕事術・時間術で使えるタイマーのことです。
進め方はこのような感じです。
①やるべきことを決める
②25分集中して1つのタスクに取り組む
③5分休憩をとる
④このサイクルを何回か繰り返し、長めの休憩(20分～30分)とる
⑤②（もしくは①）に戻る
要件を整理する
●表示画面イメージ
イメージは以下サイトを参考
①作業中（25分） ②休憩中（5分 or 25分) ③編集画面
●要件定義
＜表示内容＞
①作業中・休憩中
・カウントダウン領域
・ゲージ（時間に合わせて減っていく：最初はなくてもOK：マテリアルUIとかなにかないかな？）
・スタートボタン、ストップ（一時停止）ボタン、リセットボタン
・現在の繰り返しステータス(etc 1/4)
②編集画面（ここは後々でもOK）
・作業、休憩（短）、休憩（長）、サイクルの4項目について
・タイトル
・設定した時間
・設定用バー
・適用ボタン
＜機能＞
・最初は25:00が表示
・スタートボタンを押すと、1秒毎にカウントダウンが始まる
・ストップで一時停止
・スタートで再開
・リセットで25:00へ戻る
・リセットボタンは現ターンの時間のみリセット。サイクルはリセットされない
※サイクルのリセットはなくても良い気がするので、後々入れる....？
・25:00から0:00になったら、画面が5:00に切り替わる
・5:00に切り替わった後、自動的にカウントダウンが始まる
・5:00から0:00になったら、画面が25:00に切り替わる
・25:00に切り替わった後、自動的にカウントダウンが始まる
・4回目の25:00のカウントダウンが終了後、画面が20:00に切り替わる
・20:00に切り替わった後、自動的にカウントダウンが始まる
・0:00になったら、最初の処理に戻る(25:00へ)
※作業及び休憩時間、繰り返しは後々編集できるようにしたい
※後々は音楽も入れたい。集中できる音楽。
休憩中は元気の出る音楽？好きな声優さんボイス？
上記内容をもりけん先生にも確認頂き
この内容で進めることになりました。
まずはVanilla JSで機能面を実装することに
最終成果物はReact/Reduxで実装する予定ですが
JavaScriptの基礎固めをしたいのと
いきなりReact/Reduxでは難しそうだったので
まずはVanilla JSで機能面の実装をすることにしました。
次回から実装編に突入です。
↓↓もりけんさん、武骨日記。問題集、要チェック
