【チーム開発Vol.2】コーヒー店舗の売り切れ口コミサイト「まだある？なび」をつくったよ

はじめに

私は今年の7月よりアプレンティスシップ生10期として、日々エンジニアになることを目指して独学を頑張っています。今回は第2回目となるチーム開発で「生成AIツールのフル活用」をテーマに掲げ、1週間の集中開発に取り組みました。そのプロセスと学びをまとめます。

目次

vol.2 チーム開発の概要
チーム開発の流れ
「まだある？なび」アプリの内容
定例チーム会議で心がけたこと
まだある？ナビでのAIツール活用箇所
まとめ

vol.2 チーム開発の概要

今回のチーム開発で課されたテーマがワクワクするものを開発せよというものでした。
生成 AI, AI エージェントの使用が許可され、リッチな Web アプリを開発します。
設計や要件定義～実装までを同じアプレンティスシップ生とともに作りあげていきます。

アプリ名：まだある？ナビ

チーム開発の流れ

１回目のチーム開発の経験を活かし、予定より前倒しで要件定義と設計を詰めました。
また不測の事態でチームメンバーが4名から2名に減少するという課題に直面しましたが、既に要件が明確化されていたこととタスクの洗い出しがしっかりできていたので「やるしかない」と腹を括り、機能を一部割愛する判断を行い、2人体制での完成を目指しました。

期間	内容	チーム会/週
2w	アイデア決め	1回
2w	スライド作成、要件定義	1回
2w	設計、タスク出し	1回
2w	環境構築	1回
2w	※実装、プレゼン準備	1回
1day	プレゼン実装最終日	1回

→GitHub上のスケジュールが知らない間に更新されており、
実装、プレゼン準備期間は１週間に変更されました。

※実装を開始した２日後にいきなりの変更で事前に聞かせれておらず、
メンバーと私で？？となりましたが、
アプレンティスシップではあるあるなのでしょうか？

「まだある？なび」アプリの内容

「新作を、もう逃さない。在庫がわかる、口コミが救う —— まだある？なび」

「どうしても今日飲みたい」
「売り切れ前には手に入れたい」

そんなスタバファンの熱量に寄り添うアプリが誕生しました。
公式情報だけでは把握しきれない「リアルタイムの在庫状況」を、店舗利用者のリアルな口コミで可視化でき、「まだある？なび」を使えば、無駄な移動をなくし、欲しいドリンクやフードを確実に手に入れることができます。

アプリ機能

• ログイン・ログアウト
• 新規登録
• ユーザー登録変更ページ(ユーザー名・メールアドレス・パスワード)
• Google Maps APIでスタバ店舗にピンが立つ
  • 店舗選択または検索機能
• 最新の投稿一覧（時間順）１週間以内まで表示・１～４日前まで切り替え可能
• 口コミにいいねを押せる

登録ユーザーのみ

• 口コミ投稿・編集・削除()
• 口コミ投稿履歴一覧表示(登録ユーザーのみ)

技術選定

• フロントエンド
  • HTML/CSS
  • JavaScript
• バックエンド
  • Laravel
  • MySQL
• その他
  • Docker
  • Git/Github
  • GitHub Actions

定例チーム会議で心がけたこと

高い熱量と徹底した事前準備で臨んだチーム開発
2回目の開発ということもあり、チーム全体に 「ユーザー視点を突き詰め、本当に使われるアプリを作りたい」 という強い想いメンバー全体にあるように感じました。
各メンバーが自発的にデザインカンプの提案書を作成したり、使用するAPIを事前に調査してきたりと、個々が質の高い事前準備を整えて開発に臨みました。

「情報の具体化」による実装不安の解消
「こうすればいいのでは？」という抽象的な提案に対しては、
「具体的にどう実現するか？」「懸念点はどこか？」と深掘りする問いかけを徹底しました。
情報を解像度高く具体化し、リソースの現状や技術的課題を全員が等しく把握することで、「いざ実装に踏み込んだ時の不透明な不安」を解消し、確信を持って開発に着手できる環境を整えました。

開発体制の再構築
体制が2名となり一人ひとりの責任範囲が広がる中、リソースを集中させるため機能の割愛と限定を決断しました。サービスの核である「新作在庫がリアルタイムでわかる」価値を維持するため、あえて分割していたテーブル定義を一つに統合しました。
また「いいね機能」もユーザー情報を保持せずクリックのみで完結する仕様にするなど、実装の複雑さを削ぎ落とし可能な限り、動かない部分が出ないような設計に変更しました。

まだある？ナビでのAIツール活用箇所

ゲスト：口コミ閲覧・いいねボタン

ユーザー：ログインから投稿まで

ユーザー：自分の投稿を変更する

実装中の取り組み
今回の実装では、バックエンド(Laravel)を担当しました。
チームメンバーが Ruby on Rails を使用していたため、フロントエンドの実装はメンバーが担当し、私は Laravel側との統合作業を行いました。
特にLaravel未経験のメンバーにとっては難易度が高くなることも想定されたため、API設計やデータ連携の仕様を丁寧に、逐一共有し合うことを心掛けました。

AIとのペアプログラミングで実現したこと
今回無料枠でGeminiとChatGPT、GitHubCopilotを使用しました。、

項目	内容
テーブル定義の変更	AIと対話しながら、要件に応じたカラムの追加・変更を実施。
Google Maps連携	店舗情報を取得し、マップ上にピンを立てるJavaScriptの実装を支援。
ポップアップレイアウト	マップ上の情報ウィンドウのHTML/CSS構造をAIと調整。
投稿日時の絞り込み	日付ベースでの投稿フィルタ機能をAIと設計・実装。
HTMLとCSSの調整	buttonとformの挙動差異によるレイアウト崩れをAIの提案で修正。
命名の提案	オブジェクト名や関数名の候補をAIから提案を受け、可読性を向上。
コード修正の提案	実装中のエラーや非効率なコードに対して、改善案を提示してもらった。
自動テストの整備	ユニットテストや機能テストを導入。
CI環境の構築	継続的インテグレーション（CI）を導入し、コード変更時の自動テスト・デプロイを実現。
プレゼン台本の作成	開発内容や成果をわかりやすく伝えるため、発表用の台本を作成し、誰でも説明できる構成に。

メンターからのフィードバック
メンターからは、ユーザー体験に関する以下のフィードバックをいただきました。
まず、検索機能においては店舗名以外（例：カテゴリや住所など）でも検索できるようにすると、目的の店舗をより見つけやすくなるとの指摘がありました。
また、地図上に表示される店舗アイコンについて、投稿がある店舗とそうでない店舗とで表示を変えることで、視覚的に情報の有無が一目で分かるようになるという提案もいただきました。

まとめ

今回のチーム開発では、短期間・少人数という制約の中で、要件定義や優先順位付けの大切さを改めて実感しました。
特に、機能を「盛る」のではなく、「本当に必要な価値は何か」を考え抜いたことは、今後の開発でも活かせる大きな学びだと思います。
この経験を次の開発にもつなげ、より使われるプロダクトを作れるエンジニアを目指していきたいと思います。