はじめに
私は今年の7月よりアプレンティスシップ生10期として、日々エンジニアになることを目指して独学を頑張っています。今回は一通りカリキュラム内容を終えたうえで、初めてのチーム開発を1週間という期間の中で取り組んだ内容についてお話いたします。
チーム開発の概要
今回のチーム開発で課されたテーマが自分たちの役に立つものを開発せよというものでした。フレームワークを使わず、ローカル上で動くアプリを作成します。
チーム開発の流れ
まずは、お互いに「こんなものがあったら便利だな」や「今困っていること」について意見を出し合い、アプリ化できそうなアイデアをざっと挙げました。
そこから、アプリを利用するターゲット像を整理し、要件を文章にまとめ、機能や画面のイメージを考えました。
その後、担当のタスクを分担して、必要な言語やタスクを細分化する作業を行いました。
環境構築では私のみWindowsだったため、Dockerを用いて環境を統一しました。
ここまでは1週間に1回のチーム会で実装前に済ませておきました。
| 期間 | 内容 | チーム会/週 |
|---|---|---|
| 2w | アイデア決め | 1回 |
| 2w | スライド作成・要件定義 | 1回 |
| 2w | 設計・タスク出し | 1回 |
| 2w | 環境構築 | 1回 |
| 1w | 実装・プレゼン準備 | 3回 |
| 1day | プレゼン実装最終日 | - |
開発アプリの内容
今回作成したのは献立記録＆提案アプリです。
「仕事や学業が忙しく、献立を考える暇がない。」
「健康や外見を気にかけたいが知識がない。」
という現代の若者向けに
栄養バランスを意識した献立を簡単に手に入れることができるアプリを制作しました。
ターゲットは開発メンバーにも実際にいる20代男性として、自炊をしているため毎日の献立を立てるのが大変だということが分かったり、筋トレをこれから始めたいという意見や、筋肉を増やして脂肪は落としたいという現代の若者男性の課題がありました。
またゲーム性を取り入れることで記録の継続が楽しくなり、他のアプリとの差別化にもなるという声があったため、その要素を採用しました。
アプリ機能
- ログイン
- 新規登録
- ユーザー登録変更ページ
（変更データ：体重、身長、体脂肪、筋肉量、パスワード、メールアドレス、ユーザー名、体格） - ユーザーホームページ
- 食事記録管理ページ
- 献立提案ページ
- こつこつ記録バー
技術選定
-
フロントエンド
HTML/CSS
JavaScript -
バックエンド
PHP
MY SQL -
その他
Git/Github
定期開催のチーム会で心がけたこと
約２か月ほどのチーム会では、積極的に意見を出すこととチーム内での認識がぶれないように毎度議事録作成を担当しました。
また機能面でオンラインを通した言葉のやり取りだとイメージができなかったこともあり、
事前にFigmaを用いて画面遷移図を作成し、ページ間の流れや必要な機能は適切か?などのチーム会で使用する参考資料を積極的に作成しました。
そのおかげでページごとで使用する必要なデータベースが分かりやすくなり、機能要件の可視化ができるようになったと感謝されました。
またチームメンバーで毎週PMをローテーションで行いましたが、以下２点がとても苦労するポイントでした。
1. 意見の集約とアドバイスの難しさ
- 各メンバーが異なる視点や価値観を持っているため、意見をまとめるのに時間がかかり、なおかつ相手の立場や考えを尊重しながら伝える必要があり、言葉選びに慎重になった
2.音声のみのコミュニケーションによる誤解
- 会話が音声中心だったため、表情やジェスチャーが伝わらず、意図が誤解されることがあった
- 特に、考え込んで沈黙する場面では「納得していないのか」「ただ考えているのか」が分かりづらく、対応に迷うこともあった
そのため毎度チーム会に参加するにあたり、以下の3点を心がけました。
- 話し合いの前に、目的やゴールを明確に共有するようにした
- 音声だけでなく、チャットやドキュメントを併用して、認識のズレを減らすよう努めた
- メンバーの反応をよく観察し、必要に応じて確認の言葉を挟むようにした
いざ開発期間に突入！ゼロからのチーム開発で起きたこと
フロントエンドの実装
それぞれ役割タスクを分担しました。私は今回、HTMLとCSS・JavaScriptを利用してフロントエンドの実装を今回行いました。まずは素材集めということで使えそうなボタンのアクションや、こつこつバーの元となる素材を探しました。そして自分ともう一人でフロントエンドを担当していましたが、実際に作業を進めてみると、タスクの配分に偏りがあることに気づきました。
そこで、負担のバランスを取るために、1ページ分の実装を自分が巻き取って対応しました。
GitHubでのプルリクとマージ
チーム開発に取り組む中で、避けては通れないであろう、GitHubの使い方に苦戦しました。
まず、各メンバーがそれぞれのブランチを作成し、作業を終えたらmainブランチにマージするという一連の流れを理解するのに時間がかかりました。
一つのアプリを複数人で同時に編集・更新していくという作業は、初めての経験で戸惑いも多く、上書きや競合の扱いなど、慣れるまでに苦労しました。
初めてコンフリクトが発生して、「エラーが表示されない、コンフリクトが起きてる」とだけ表示されたときは２時間ぐらい格闘しました。
タスク分担が甘かった
また実装2日目ぐらいにはタスクの抜け漏れに気づき、ある機能の実装に担当者が割り当てられていないことが判明しました。
幸いにも、すでに割り振った機能を実装済みのメンバーがいたため、状況を確認したうえで、正式にそのタスクを巻き取ってもらえるよう声をかけました。
事前にNotionでタスクばらしを行っていましたが、メンバー同士のタスクを書き出す粒度がばらばらだったことにも原因があると気が付きました。
require_oneのファイルが読み込まれない
これはプレゼン直前に分かったことですが、Ubuntu環境でローカルディレクトリを作成していたため、ファイル名の大文字・小文字が区別されることに気づかず、ルーティングで指定したファイルが正しく読み込まれないという問題が発生しました。
バックエンドが動作しない原因がなかなか分からず苦戦しましたが、最終的にローカル開発場所によるファイル名の違いが原因だと判明し、無事にアプリを手元で動かすことができました。
フロントエンドでこだわったところ
今回フロントエンドでは、献立記録と献立提案ページの2つを担当しました。
献立記録ページでは、ユーザーの継続的な利用を促すための工夫として「コツコツバー」を実装しました。
献立を1件入力するごとにゲージが1ポイント上昇し、登録件数が20件に達するとゲージの色が変化することで、達成感を視覚的に演出しています。また、ページを更新するたびにゲージが左右に揺れるようなアニメーションを加えることで、成長の動きを感じられるようにしました。
さらに、献立提案ページでは、ユーザーがボタンを選択することで献立が提示される仕組みを導入し、毎日アプリを継続させる工夫を施すことができました。
これにより、献立入力や提案のプロセスが単調にならず、楽しみながら操作できるよう工夫しました。
※ログインからスタート
次回のチーム開発で生かしたいこと
結果、今回１回目のチーム開発を通してしっかりとバグが起きずに機能するアプリが作れた！やった！と一安心でした。
第2回目に向けたチーム開発で行うべきこと
毎週チーム会を開催して、会話をしていたつもりですが、各々の事前準備の不足さが分かりました。前もっと確認すべきことをチームみんなで共通認識を確かめておくことが大事だと改めて痛感しました。
しかしチームメンバー全員が初めての開発でしたので、見積をするすべもなく手探り状態でよくたどり着いたなと完成したときは随分感激しました。
完成したときは反省というよりも、次に生かせるための事柄が多く出てきて、実際の開発現場に入る前に知れてよかったな～という気持ちが強かったです。
また次回２回目のチーム開発に向けて以下のことを提案してみるつもりです。
・データベースへの接続確認をメンバー全員が事前に行う
・GitHubの利用ルールを明確にしておく
・UIページを一番最初に決めておく
・タスク漏れがないように画面ごとの機能で細分化する
・みんなの進捗を確認できるようにする
・メンバー全員のバックグラウンドが違うため、チームで動ける時間を前もって確保しておく※期日や進捗確認日などを設定しておく
ある程度のルールは必要だと思いますが、この内容がチームメンバーの締め付けや不要だと思う内容も含まれていると思いますので、しっかりと構想は練っていくつもりです。
まとめ
怒涛の1週間の中で、最初は「MVCモデルで本当にアプリが作れるのか？」と半信半疑でした。
ですが、チームメンバーと協力して実装をやり遂げたことで、その不安は自信へと変わりました。
4人の知恵が集まると、こんなにも力強いんだと実感しました。
バックエンドは未着手でしたが、バックエンド側で複雑な処理を実現したメンバーの貢献は非常に大きく、プロジェクトの推進力となりました。
これまで一人で課題に取り組むことが多かった私ですが、仲間と力を合わせることで、もっと大きなものを生み出せる可能性を感じました。
ぜひ2回目も学びのあるチーム開発をしていきたいと思います。
チームメンバーの皆様、本当にお疲れ様でした。そしてありがとうございました！！
新規登録からスタート
