スプリント早わかりカレンダー
今回やること
少し凝ったUIを持つwebサイトを作成してみる。
RooCode(prev. RooCline)を使ったことがないのでRooCodeを使ってみる
結局denoを使う必要なくて使えなかった...
出来たもの
https://scrapbox.io/files/67c447764770bea6aec18d3a.png
初回の生成でほぼやりたいUIと機能が完成した(ここまで$0.8位)
追加のいくつか要望を出してそのやり取りが発生した
初期実装までにかかった費用は$1.5。
その後の仕様変更やUIやロジックの追加修正で$3くらい。
Cloudflare Pagesへのデプロイはやらせるの怖くて自分でやった。GitHub Actionsは書いてもらったが。
気づき
TDDで実装を進めたいという目論見はあったけど、AIはとにかく一気に生成したがるため割り込んでマイクロタスクを実行させるのが面倒。
あとは自分で実装方針の大枠はできてるが細部にわたって実装計画が立っていない場合はTDDをどう進めるかを人間が考える時間がボトルネックになりそうで、それならある程度のどでかい単位で機能を実装させ、その機能に対してテストを実装させるという方が上手くいく感じがした
とはいえcontext windowを超過しない程度にタスクを切らないといけないのでその辺りの調整は必要
機能仕様だけでなくその機能仕様を満たす場合の実際の表示UIやデータの状態を具体例としてREADMEに記載しそれを満たすように作らせると上手くいきやすかった
初期プロンプト
code:prompt
以下の要件仕様を参考にどのような設計でどのようなコードを書こうとしているのか検討しなさい。そしてその設計計画をREADME.mdにまとめなさい。
---
# 背景
私の会社ではagile開発を取り入れています。開発からリリースまでに大体2週間かかります。現在抱えている課題としては1スプリントの中で今は何をしている期間なのか？というのが把握しづらいということです。
例えば現在我々は、開発が2025/01/14から始まったとすると翌週の月曜日(2025/01/20)にコードフリーズが行われ、その翌日の火曜日(2025/01/21)から6日間のQA確認が開始され、次の火曜日(2025/01/28)にリリースされます。まとめると2025/01/14から2025/01/20までが開発期間、2025/01/21から2025/01/27までがQA確認期間、2025/01/28がリリース日という形です。そして同時に2025/01/28からまた次のスプリントの開発期間が始まります。
# やりたいこと
開発期間とQA期間とリリース日について、それぞれのエンジニアが今はスプリントにおける何の期間なのか？次のリリース日はいつなのか？といったことが一目でわかるようなwebページが作成したいです。
# サービス名
スプリント早わかりカレンダー
# 機能
- 開発期間/QA期間/リリース日をクエリパラメーターとして設定できる
- 設定された各期間に応じてカレンダーに期間が色分けされて一目でわかるようになっている
- 今日についてもまた別の色で一目でわかるようになっている
- スプリントは長い場合もあるので月を跨ぐ可能性もあります
- レスポンシブデザインにする
# 技術的な制約
- Deno/TypeScriptを使用すること
実装のロジックが気に食わなかったので修正
code:prompt.txt
./src/配下にはREADME.mdに記述された仕様に基づいて構築したwebサイトのソースコードがあります。
しかし現在の実装はREADME.mdに記述された機能仕様に基づいていません。特にスプリント期間の計算がおかしいです。カレンダーの日付には最大にリリース日でありQA開始日であり開発開始日であるという3件のスプリントの重複までしか発生しないはずですが、現状の実装では4件以上のデータが表示されてしまっています。
まずはREADME.mdを読んで既存のコードを確認し、それらのバグの修正も含めて根本的なロジックの書き直しをしてください。UIのスタイリングや使い心地については特に問題ないのでそのままで構いません。
code:prompt.txt
以下やり取りについては日本語で行なってください。
./src/配下にはREADME.mdに記述された仕様に基づいて構築したwebサイトのソースコードがあります。
現在の実装はREADME.mdの機能要件を満たした場合の表示の具体例という要求の部分を全く満たしていません。この要求を完全に満たすように特にロジック部分を中心に全て書き直してください。
code:prompt.txt
以下やり取りについては日本語で行なってください。
./src/配下にはREADME.mdに記述された仕様に基づいて構築したwebサイトのソースコードがあります。
カレンダーの日付のスプリントにホバーした際のlegendの表示がカレンダーの内側とかぶってしまい全て表示されません。z-indexを付与するなどcssの調整やHTMLの構造の調整が必要だと思います。確認していただけますか？
code:prompt.txt
src配下のコードにformatを実行したいです。biomeを導入してformatを整えてください。