🍅 Pomo

バニラJS（HTML / CSS / JavaScript）で作ったポモドーロタイマーです。
JavaScriptの基礎を手書きで学びながら、自分が毎日使う道具として作りました。

→ デモを見る

---

作った背景

バイブコーディング（AIが生成したコードをそのまま使う開発スタイル）に限界を感じたことがきっかけです。

AIの出力を読み解くだけでは理解が定着しない。ならば、自分の手で1行ずつ書いてみようと思いました。

このプロジェクトでは AIによるコード生成を禁止 し、見本の提示と質問への回答のみに使用しています。実際にVS Codeの設定で .js .html .css ファイルへのAI書き込みをブロックしました。

AIを否定せず、依存せず。サポートとして最大限活用しながら、コードは自分で書く。

この方針で開発を進めた結果、JavaScriptの基礎概念（イベントリスナー・関数・条件分岐・SVGアニメーションなど）を実感を持って理解できました。

---

機能

• 作業・休憩のカウントダウンタイマー
• 作業時間・休憩時間のカスタマイズ
• SVG円グラフによる残り時間の視覚化（グロー付き）
• 4セット後の長い休憩（15分）
• セッションドット表示 + 累計カウント
• 自動スタートのトグル切替
• タイマー終了時の通知音

---

技術スタック

技術	詳細
HTML5	セマンティックなマークアップ・SVG
CSS3	Flexbox・カスタムトグル・アニメーション
JavaScript	バニラJS・Web Audio API・DOM操作

フレームワーク・ライブラリ不使用。

---

学んだこと

• setInterval / clearInterval によるタイマー制御
• イベントリスナーと状態管理（isRunning / timerStatus）
• SVG の stroke-dasharray / stroke-dashoffset によるリングアニメーション
• 三項演算子・%（余り）を使った条件分岐
• リファクタリング（深いネストを関数に切り出す）
• デバッグ用UIの実装と本番環境での非表示化

---

動かし方

index.html をブラウザで開く

または GitHub Pages のデモ を開く。

---

クレジット

• 通知音：OtoLogic（CC BY 4.0）