はじめに
こんにちは、react-router 好きの @guppy0356 です。
Vibe Coding で作成したプランニングポーカーアプリについてご紹介します。
Vibe Coding を初めてやってみて新しい気付きがあったので共有できたらと思います 
なぜ Vibe Coding をやりたかったのか
「Vibe Coding すごいぞ！なんでもできるぞ！」と煽る記事がある中でどこまで出来るか自分の目で確認したいのが理由です。作成するアプリは第三者に見られたとしても問題ないテーマを選びたくプランニングポーカーを選びました。
プランニングポーカーとは
プランニングポーカーは、アジャイル開発で使われる、チーム全員でタスクの規模（工数や複雑さ）を合意形成するための見積もり手法です。フィボナッチ数（0, 1, 2, 3, 5, 8, 13...）などが書かれたカードを使い、ゲーム感覚で進められるのが大きな特徴です。
技術スタック
- React Router v7
- Firestore Database
- Render.com
- Claude Code
機能一覧
ルームの作成
Create New Room からルームを作成することができます。ルームはコードをで識別しています。コードを共有してチームメンバーを招待することもできます。
ロビー
ルームに参加するとロビーで待機します。ロビーでは名前を入力します。
プランニング
プランニングはタスクごとに行います。Start Voting をクリックするとポイント見積もりの開始です。チームメンバーはカードを選びます。見積もり中は自分の選んだカードは見ることができますが、他のチームメンバーが選んだポイントは見られず 
を表示します。Reveal Votes をクリックするとチームメンバーが選んだポイントを表示します。
Reveal Votes はチームメンバー全員が選択済に押したいのでリアルタイムで選択済かわかるように Firestore Database を選択しました。
Vibe Coding をやってみた気づき
やりたいことは明確に
始めに入力したプロンプトの成果物は精度がいいが、やり取りを続けていくうちに精度が悪くなっていきます。これを解消するために Plan mode で計画を立てることにしました。プロンプトで作りたい機能をひとつずつ機能を入力するのではなく全体像をイメージしやすくするため機能の一覧を入力にしました。
プランニングポーカーをするサービスをつくります。できることは次の通り。
1. ルームを作成できる
- 作成したルームはユニークキーをもつ
- 参加者はユニークキーをフォームに入力してロビーに入ることができる
- URL をブラウザに貼り付けてもロビーに入ることができる
2. ロビーから入室することができる
- ユニークキーをつかってロビーに入ったあとに名前を入力して入場することができる
3. 同じルームにいるユーザーはお互いに選んだストーリーポイントを確認することができる
- ストリーポイントはカードで表示しており、それをクリックして選択する
4. 投票は「投票開始」を押すとカードを選択することができる
5. 「投票終了」を押すとユーザーが選んだストーリーポイントをお互いに確認することができる。
デザインは Tailwind CSS を使うこと、FireStore をつかって実現すること。ログインをつかった認可はしない。フレームワークは react router v7 を使っている。
インフラの設定は UI でしない
初めて Firebase Database を作ったのですが環境変数がどこかわからず、Claude に聞いてみたのですが存在しないメニューを案内されてかなり苦労しました。Claude は CLI の実行結果から Try & Error を繰り返すのは得意なので Terraform で環境構築するほうが楽だったかもしれません。
アプリケーションの振る舞いは完璧！でも・・・？
コーディングを確認してみると useEffect でデータフェッチをしていたり良くないとされているコードが散見されました。これは経験則ですが、細かい実装まで指示をするとコンポーネントの分割が分かりづらいものになる気がするので保守性の高いコーディングは課題なのかもしれません。
ここまで読んでくださった方へ
Vibe Coding でアプリが簡単に作れるようになりました。いわゆる「プログラマー不要」が色濃く出たように見えます。ただ、指示して成果物に責任を持つのは人間であるため、レビューは必須です。AI ツールに開発をまかせると一度に大量のコードを生産するので、人間がレビューするのは困難になりそうです。人間がレビューしやすいように Pull request を小さな変更差分で進めるようプロンプトを工夫したり、テストは人間が開発して品質を担保するようになると考えます。
「プログラマー不要」ではなくプログラマーに求められる知識が変わったのではないでしょうか。
今後のアクション
Claude にはサブエージェントがあり、今回だとインフラに特化したサブエージェントとアプリ開発のサブエージェントが協力することでより精度の高い成果物を目指します。
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてください！
▼▼▼