生成AIでプランニングポーカーWebアプリを作ってみた

こんにちは！
ポーラ・オルビスホールディングスのITプロダクト開発チームでスクラムマスターをしている川田です。

昨年のアドベントカレンダーで、オンラインで利用できるプランニングポーカーについて紹介する記事を書きました。

その後も作者のみなさまに感謝しながら利用していましたが、気づいたらサービスが終了していたり、ポーカーを開始してもすぐに接続が切れたりといった事象が起き、スプリントプランニングの効率が落ちてしまうことがありました
新しいプランニングポーカーのサービスを探すしかないか・・・と思っていたのですが、弊社ではDevinやGitHub Copilotなどの生成AIを活用しているので、せっかくなのでAIの力を借りて自作してみようと思いついて実践しました。
今回の記事では作成したサービスについて、およびバックエンドやデスクトップアプリの開発経験はあってもWebフロント開発の経験が少ない私が、どのようにAIを活用してWebアプリ開発を進めたかについて書こうと思います！

作成したもの

最終的にできあがったものはこちらになります！
この記事にあわせて一般公開していますので、ぜひ使ってみてください！

• 予告なくサービスを非公開・終了させる可能性があります
• 本サービスの利用によって生じた損害について、一切の責任を負いません

今回作成したプランニングポーカーの主な機能は以下の通りです。

• Room 機能
  • Room の作成: 新たな Room を作成し、ランダムな 5 桁の数字を払い出し
  • Room への入室: 5 桁の数字を入力して Room に入室
  • URL 共有: Room URL をコピーしてメンバーを招待
  • プレイヤー管理: 各プレイヤーにランダムな絵文字を割り当て（※完全ランダムではありません）
• ポーカー機能
  • カード選択: 「0.5, 1, 2, 3, 5, 8, 13, ?, 」のカードから選択
  • 自動オープン: 全メンバーが選択完了時に自動でカードを公開
  • 平均値計算: 数値カードの平均値を自動計算
• 参照モード
  • モード切り替え: 投票モードと参照モードの切り替え
  • 観察専用: 参照モードでは投票に参加せず、状況のみ観察
• オーナー機能
  • Room 作成者特権: Room を作成したプレイヤーが自動的にオーナーになる
  • リセット権限: オーナーのみがカード選択をリセット可能
  • 強制オープン権限: オーナーのみが選択済みカードを強制公開可能
  • オーナー譲渡: オーナーは Room 内の他のプレイヤーに権限を譲渡可能

どうやって作ったか

入力したプロンプト

今回はGitHub Copilot + Claude Sonnet 4.5を利用して作成しました。最初に入力したプロンプトは以下の通りですが、できあがったものを動かしながら機能追加・修正を何度か行って現在の形になっています。例えばオーナーの譲渡機能は後から追加した機能です。

以下の要件を満たす、プランニングポーカーを行うwebアプリを作成してください。

- Room機能
  - アプリにアクセスすると、「Roomの作成」と「Roomに入室」の2つのボタンがある
  - Roomの作成を選んだ場合、新たにRoomを作成してランダムな5桁の数字を払い出す
    - 作成したRoomには {baseurl}/room/12345 といったURLでアクセスできる
    - URLをコピーできるUIがある
  - Roomに入室を選ぶ際は、事前にRoomの作成で払い出された数字の入力を必要とする
    - 同じ番号のRoomに複数人が入室することができる
  - Roomの削除機能は不要
  - Roomに入室したら、各プレイヤーにランダムな絵文字を割り当てる
    - 絵文字はあらかじめ20種類準備し、その中からランダムに選択する
    - 他のプレイヤーと同じ絵文字になってもよい
- ポーカー機能
  - Roomの作成、または入室すると、数値や絵が描かれたカードが表示される
    - カードの種類は「0.5, 1, 2, 3, 5, 8, 13, ?, コーヒーの絵文字」
    - どれか一つだけを選択することができる
    - 選択したカードは、Roomに入室している全メンバーの選択が完了するまでは自由に変更できる
    - 選択したカードは他のメンバーには見えないが、選択したことはわかるようにしたい
    - カードが未選択の場合はカードの枠だけ表示し、その数でRoomに何名いるかわかるようにしたい
  - Roomに入室した全メンバーがカードを選択したら、自動的にカードがオープンされる
    - 入室している全メンバーがカードの内容を見られる
    - カードに書かれている数字の平均値を表示する
    - 誰か一人でも ? や コーヒーの絵文字 のカードを選択していた場合、平均値は「?」とする
  - リセットボタンを押すことで、全メンバーのカードの選択をリセットできる
  - 強制オープンボタンを押すことで、選択済の分のカードのみをオープンする
    - その後、未選択のメンバーがカードの選択を行った場合は結果を更新する
  - リセットと強制オープンはRoomを作成した人（オーナー）のみが実施できる
- 参照モード
  - 入室後、参照モードに変更ボタンを押すと参照モードになり、ボタン名称が投票モードに変わる
  - 参照モードではカードの選択はできないが、選択状況を見ることができる
  - 投票モードボタンを押すと、通常通りカードの選択ができる投票モードになり、ボタン名称が参照モードに戻る
  - 入室直後は投票モードとする
  - 参照モードの場合、ポーカーのカード選択部分は表示しない
  - 参照モードのユーザーは選択したカードの表示部分には表示されない
- その他
  - デプロイ用のスクリプトも作成すること
  - gitignoreファイルを準備し、不要なファイルはコミットされないように設定すること
  - フロントエンド側に表示されるアプリ名は「プランニングポーカー」とすること
  - Roomの情報などをサーバー側に保持する必要がある場合で、TTLの設定を行う場合のTTLは8時間とすること
  - プロンプトで指示されている以外のライブラリを導入する場合は、事前に確認を取ること
    - 確認の際は、導入理由・メリットとデメリット・導入しない場合の代替案、を提示すること

作ってみて気づいたこと

実際に作ってみて気づいたことをあげてみます。

• 作りたいもの・機能はできる限り詳細に指示する

プランニングポーカー自体は一般的に知られている手法なので、「いい感じのプランニングポーカーを作って」という指示でもある程度のものは作れると思います。ですが、こういう機能がほしい、ここはこだわりたい、といったポイントは明確に示しておかないと、期待に沿った出力になる可能性は低いと思います。（ここはAIに限らずですね）
今回の場合は、ユーザーがシステムにアクセス、Roomを作成、メンバーを招待、メンバーが入室、見積もりとポーカーを（繰り返し）実施するといった一連のカスタマージャーニーをイメージしながら、最初のプロンプトを作成しました。

• やらないことも指示する

機能追加や削除を繰り返していると、コードが複雑化する可能性が高まります。まれにAIが既存の実装を壊すこともあり、今回もそれが原因で1回作り直しています・・・
その可能性を少しでも減らすために、作りたい機能を指示するのはもちろん、作らない機能を指示することも大事と感じました。今回の例では、作成したRoomにはTTLを設定することで自動的に消える仕様とすることで、手動によるRoom削除機能は作らないように明示的に指示しました。
ちなみに、TTLを8時間としたのはスクラムガイドでスプリントの長さは1か月以内、スプリントプランニングのタイムボックスは1か月スプリントで8時間とされているためです

• 迷ったら、いきなり実装を指示するのではなく一緒に考えてもらう

新しい機能を追加したいと思ったときに、実現したい要件はわかっているけど具体的なイメージがわかないこともあると思います。そのとき、いきなり「〇〇作って」とお願いして、出てきたものがイメージと違って修正・・・とすると効率悪いですし、前述の通りコードが複雑になる可能性があります。
そのような場合は、「〇〇という機能を作りたいので、最初に実装のイメージを提案して」と指示するようにしました。そうするとアイデアとそのメリデメを提示してくれるので、あらかじめイメージをすり合わせながら効率的に進めることができます。

さいごに

GitHub Copilotでプランニングポーカーを作ってみたというお話でした。Webフロントの経験があまりない私でも、生成AIを活用することで手軽にアプリを作れるのは改めて驚きました。
プランニングポーカーについて、要望や不具合がありましたらやさしく教えてください！