KiroでPomodoroタイマーを爆速実装した話

概要

"Kiro" という流行りのIDEをインストールし、その流れでChatGPTと一緒に Pomodoro タイマーの展示画面を構築しました。

Reactでの簡単な画面作成から機能実装まで、Kiroのインストールから完成までわずか1時間。
実際に使ってみて非常におすすめだったので、その魅力を共有したいと思います！

ポイント:

• 完全無料
• コードの9割はAIが書いてくれる

---

Kiroに実装してもらったこと

• サイドバーに"Kiro"ボタンを追加
• その画面で Pomodoro タイマーを表示
• スタート / ストップ / リセット 機能を実装
• レトロデザイン (neon green + black background)

---

作業時間の内訳

内容	時間	備考
IDE のインストール	10min	Qiita記事参考
言語化して指示	5min	Claude4.0への文章作成
実装を待つ	25min	その間夜ごはん食べてた
CSS 修正 / 再調整	10min	漠然とイメージを伝える

インストールには以下の記事を参考にさせていただきました。
（使い方等記載されておりとても分かりやすかったです！）

---

実際のやり取り

画像でイメージを伝えた後解説します。

1. 画面遷移・UI設計に関する質問

• 「Kiroという名前のボタンをサイドバーに追加して、その画面に遷移したい」

• 「その画面にPomodoroタイマーを表示して、Start / Stop / Resetボタンをつけてほしい」

• 「ボタンの状態で見た目が切り替わるようにしたい（Start→Stopなど）」

2. タイマー機能のロジックに関する質問

• 「25分のカウントダウンをして、0になったらアラートを出して」

• 「スタート中はストップに切り替わり、リセットで初期状態に戻すように」

• 「実装がバグってるっぽい。画面が真っ黒になった。ルーティングがおかしい？」

3. デザイン・CSSに関する質問

• 「黒背景にネオングリーンのテキストで、かっこよくしてほしい」

• 「他の画面とデザインを合わせたい」

• 「夜っぽいデザイン希望」

4. エラー対応・修正依頼

• 「画面が表示されない。ルーティング設定見直して」

• 「コンポーネントが壊れてるっぽい。再構築して」

• 「希望したデザインがスクショと違う。」

5. 最終調整・まとめの依頼

• 「画面の見た目をほかのページと揃えて」

• 「最終的なタイマー機能だけを綺麗にまとめて」

つまり

✔️ 質問する
✔️ コード生成を待つ（その間におやつ）
✔️ 画面を確認してまた質問する

この工程を5回繰り返すだけで簡単に画面遷移・希望の画面・機能の実装をすることが出来ました！

---

最終的に完成した機能

• ◻ 25分タイマー デフォルト

• ◻ スタート ボタン （動作中はストップに切替）

• ◻ リセット ボタン

• ◻ レトロでグローなスタイル:

  • 背景: #000
  • フォント: Courier New
  • テキスト: Neon Green #39ff14
  • ボタン: Green / Pink / Blue

---

💬 感想

• Claude4.0 にやらせてる間、本人は高みの見物を見ていた
• 全部無料。エンジニアの価値を疑う

自分的には「されるがままに進んだだけ」でしたが、それでもここまで完成できたという事実がすごい。
AIツールの利便性が飛躍的に高まりもはや開発力≒情報収集力とも思えた瞬間でした。
これ以上取り残されないよう努力していきたいと思います！

とりあえず今伝えたいことは「Kiroを使ってみてほしい」の一点です！
便利な機能が分かり次第この記事を更新していきたいと思います！