最近、Copilotを使っていると、AIの力強さを肌で感じ、感嘆することが多くなっています
(탄복 感心しているで翻訳できるらしいですが、ニュアンスが違う気がする)
その中で、「何も分からない状態から、果たしてどこまで作れるのか」ということが気になり、約1時間（正確には1時間半）かけて、軽いポモドーロタイマーを作ってみました。
1. プロジェクト概要
今回開発したアプリは、ポモドーロタイマーと「今日のやること（ToDoリスト）」を1つの画面で管理できるものです。
主な機能は以下の通りです。
- 集中セッションの記録
- タスクごとの集中時間集計
- 直感的に操作できるUI
短時間の集中サイクル管理とタスク管理を同時に行うことで、学習や開発作業の効率化を目指しました。
2. 開発環境の準備
-
npmなどは事前にセットアップ済み
-
ViteでReactプロジェクトを作成しました。
npm create vite@latest -
Copilot拡張機能をインストールし、基本的な使い方を確認しました。有料版使っています！
-
cssの知識はなかったため、modernスタイルで依頼+気になる色をいくつか設定して依頼しました。
3. 主な機能設計
- ポモドーロタイマー
- 集中時間・休憩時間を自由に設定可能
- セッション履歴の記録とラウンド管理
- ToDoリスト
- 今日のやることを追加／チェック／削除
- 「現在」ボタンで集中対象タスクを指定可能
- 集中セッションとタスクの連動 からうまくできなくて(セッションにいつ情報を保存するかタイミングの設計が不足しているよう)
- セッション終了時に「現在のタスク」と紐付けて記録
- 単純にコード作成ではなく、デバッグやbash上で確認したい内容のコマンド作成をしてくれる
※dir tree構造のコマンドが分かりたい場合の例
4. Copilot活用ポイント
- 繰り返し利用するコンポーネントやカスタムフック、スタイルを自動生成
-
useState、useEffect、localStorage連携など、よく使うパターンを即時提案 - CSS変数やコンポーネントのスタイリングも候補として提示
- コメントで意図を説明すると、構造から実装まで提案してくれる
\---src
| App.css
| App.jsx
| index.css
| main.jsx
|
+---assets
| react.svg
|
+---components
| Footer.css
| Footer.jsx
| Header.css
| Header.jsx
| Settings.css
| Settings.jsx
| Timer.css
| Timer.jsx
| TodoList.css
| TodoList.jsx
|
\---hooks
useKeyboard.js
usePomodoro.js
useTimer.js
5. 主なコード例
- タイマーとToDoリストのコンポーネント構造
- セッション記録とタスク別集中時間の集計ロジック
- Copilotが提案したコードスニペット（スクリーンショット掲載推奨）
6. UI/UX改善
- 左右分割レイアウト＋レスポンシブデザイン対応
- タスクごとの集中時間表示
- 現在のタスクを強調表示し、集中対象を一目で確認可能に
7. 感想と今後の展望
Copilotのおかげで繰り返し作業が減り、短時間でプロトタイプを完成させることができました。
Vite + React の組み合わせは開発体験が軽快で、ホットリロードも非常に高速です。
最近は実装のパフォーマンス向上について耳にする機会が多く、確かに以前よりかなり高速化されていると感じています。
ただし、筆者はまだHookの概念をあまり理解していないですが、立派に作られて、「どこが間違っているのか」「なぜ意図した通りに動かないのか」といった点で試行錯誤しました。
今後は、まず作りたい技術面をしっかり学習した上で、このようなアプリの設計・実装を行うことで、より効率的に開発できるようになるでしょう。
💡 アニメーション任せるのは本当によかったです！
■実際作ってみたもの
