人生初のチーム開発。。。Best Award受賞！

目次

1.はじめに
2.チーム開発概要
3.メンバー構成
4.初チームMTG
5.課題の明確化
6.要件定義
7.インセプションデッキ
8.スライド作成、設計、アーキテクチャの明確化
9.ワイヤーフレームの作成
10.データベース
11.環境構築
12.タスクばらし
13.実装
14.振り返り
15.おわりに

1. はじめに

私は、内定直結のエンジニア実習『アプレンティスシップ』に参加しています。
2023年3月から独学でプログラミングを学び始め、チーム開発や実務を経験したいという課題をもっていました。そのときにたまたまアプレンティスシップを知り、山浦さんの紹介動画を視聴して即参加を希望しました。現在は参加させていただいて、アプレンティスシップ生同士のコミニティーもあり非常に多くの学びを得られています。
そのカリキュラムの中で初めて経験したチーム開発について、自身の振り返りやチーム開発未経験の方にとって一助になれば幸いです。

2. チーム開発概要

・3人1チームとなり、チーム開発以前のカリキュラムで学んだ技術(HTML, CSS(SCSS), PHP or Ruby, JavaScript, MySQL)を使用し、フレームワークは使わない。

・チーム開発期間
12/25(月) - 1/7(日) スライド作成、要件定義
1/8(月) - 1/21(日) 設計、タスク出し、環境構築
1/22(月) - 1/28(日) 実装、プレゼン準備
1/28(日) 19:00 - 21:00 プレゼン（各チーム３分）

・プレゼンは Zoom の画面共有で、スライドとデモを使用し、デモはローカル上で制作物を実際に動かして見せる。その後メンターからのフィードバックがある。

・受講生からの評価が最も高いチームに Best Student Award を授与
メンターからの評価が最も高いチームに Best Award を授与

・開発テーマは『自分たちの役に立つものを開発せよ』
各チームごとにアイデア決め、スライド作成、要件定義、設計、タスク出し、環境構築、実装、プレゼン準備、プレゼンを行う。

・開発テーマ　『自分たちの役に立つものを開発せよ』

3. メンバー構成

・モダンフロント技術を使用したフロントエンド開発経験者の方
・web制作経験者(webデザイン含む)の方
・グラフィックデザイン、web制作経験者...私

4. 初チームMTG

初のMTGを迎える前にチームメンバーの方が、2期生の方のチーム開発ブログを共有がありました。その中には、チーム開発のフローや困ったこと、などが記述されていました。
チームメンバー全員がそのブログ記事を元にして、MTGの議題を設けて実施し、以下の項目を決めました。

・実装期間直前の理想状態
2~3日程度前倒しで実装期間を迎えられる。
実装期間に入った瞬間からコードの記述を始めることができる状態にする

・進捗管理ツール　Notion
Notionを利用されている方がいて、ブログ記事でもチーム開発に適しているということから採用。
Notionの利用目的として

1. 項目ごとチームメンバーの案をまとめて、全員共有を可能にする
2. 実施項目の進捗管理　（ガントチャート、タスク管理）
3. MTGの議事録を取り、MTG内容の明確化と重複議題を避ける。次回のMTG議題やMTG事前課題の明確化

・Dockerの利用の有無
私ともう1人の方が利用経験もないことから一旦は利用しない方針へ。しかしのちに変更し、取り入れることに。

次回MTGでアイデアだし（課題の明確化）！

5. 課題の明確化

私が普段感じていたことから
・タスク管理していても計画通りに終わらないことの方が圧倒的に多い
・タスク実施時間が不明確で、感覚的な計画をしている
このような課題があったため、チームMTGで提案しました。

私たちのチームは全員共通してタスク管理について課題を持っていました。
そして全員の意見から優先順位をつけて以下の課題解決ができるアプリを作成することにしました。

1. タスク管理を行なっていて、基本的には終わらない。
2. 学習時間の管理、別のExcelで行なっているので面倒
3. 累計を見て達成感を感じたい
4. 学習に関する日報をdiscordに投稿することが必須で面倒
5. Twitterの要約が面倒

このような課題を解決するための要件定義に移ります。

6. 要件定義

・日別のタスク管理ができる
・タスク実行時にタイマー計測
・タスク管理に過去実績の定量情報を加える
・タスクの実行実績を可視化する
・このアプリに振り返りを入れて、そのままSNSに投稿できる
・振り返りをchatGPTに振り返り要約してSNSに投稿できる（実装が間に合えば）

上記が決まり、次回のMTGの議題はチームのインセプションデッキの作成！！

7. インセプションデッキ

アジャイル開発で用いられるインセプションデッキも作成しました。
インセプションデッキがあることで、チーム開発をする上で全員が共通認識を持つことができるため作成しました。

作成したインセプションデッキの詳細はこちら

インセプションデッキ

我われはなぜここにいるのか

＜目的＞プロジェクト（QUEST）を円滑に進めるタスク管理アプリを作る

①プロジェクト（QUEST）が遅れるのは、タスクの見積もりの甘さ（バイアス）に原因がある。

②実際のタスクを定量化し見せることで「実際にかかる量」にバイアスを矯正する

③タスクの見積もりが正確になりプロジェクト（QUEST）が円滑にすすむ

エレベーターピッチ

タスク管理の肝は「ちょうどいい見積り」。

タスク管理がうまくいかない理由。それは「見積時間が間違っていること」が原因です。

このアプリはそのタスクにかかる「正しい時間」を提案します。

「終わらないタスク」「遅れるプロジェクト（QUEST）」に悩むすべての仕事人に送る「正しい時間見積り」ができるようになるタスク管理アプリです。

パッケージデザイン

使用しやすいようにシンプルなデザインでまとめる。

やらないことリスト

• やることリスト

  • タスク登録
  • 実績登録（タスクごとの振り返り）
  • タイマー
  • 実績タスク項目・時間蓄積　＋　可視化
  • 投稿機能（Discord）投稿
  • ログイン機能（ユーザー登録機能）

• やらないことリスト

  • 人との共有

• やるか、やらないか、後で決めるリスト

  • アラート機能
  • 通知機能
  • ChatGPT 140文字要約・誤字脱字 自動修正
  • タスク実行状況に応じたアニメーション

ご近所さんを探せ

• パートナー
  • チームメンバー
• 顧客
  • アプレンティス生
  • 学習中の方
  • ルーチン業務をしている方
• ステークホルダー
  • メンター

解決案を描く

**プログラム言語：**HTML, CSS, JavaScript, PHP, SQL（MySQL）

ライブラリ

• グラフ
  • JpGraph
  • pChart
  • chartjs
• ツール
  • Git / GitHub
  • Figma （デザインツール）
  • ローカルサーバー（未定）
  • Docker（ちょっと迷い中）

夜も眠れない問題

• スキル

期間を見極める

• 1月27日（土）

トレードオフスライダー(優先順位)

	優先順位
機能を全部揃える（スコープ遵守）	★★★★★
予算内に収める（予算遵守）	★（予算なし）
期日を死守する（納期遵守）	★★★★★
バグを出さない（品質遵守）	★★

何がどれだけ必要なのか

期日：1月27日（土）

スキル：学習範囲内のプログラムスキル、ライブラリ・API利用知識

こちらは実際に開発を進める中でも、仕様の確認や決定にも大きな指針となりよかったと思いました。

8. スライド作成、設計、アーキテクチャの明確化

ここで役割分担を分けました。
・スライド作成
・設計
・アーキテクチャ図の作成
私は、設計を担当させていただきました。
要件定義やインセプションデッキをもとに、詳細にユーザー視点と管理者側の使用フローを考えた設計をしました。そのときの設計内容は以下のように考えました。

考えて提案した設計の詳細はこちら

設計

タスクを実行時間が考慮された上で管理することができる。

タスクの振り分けが明確になり、計画的にタスクを遂行できる。

タスクごとの実行時間を比較することで、時間配分を考慮して効率的な管理を実現できる。

実行時間を意識することで工夫が生まれて、成長に結びつく

• アカウント登録・ログイン機能

  【PHP, SQL】

  アカウントIDとパスワードを利用

  ログインするとアカウントIDを表示させる。

• タスク登録

  【PHP, SQL, カレンダーをつけるならJavaScript,】

  タスクを登録すると、登録タスクの1日平均実行時間が表示される

  登録したタスクは、以降はプルダウンで選択できるようになる。

  プルダウンのタスク登録は、過去実績に累計されていく。

  ※1日平均実行時間累計12時間以上のタスク登録がされたときに、大丈夫？を伝えるbackground-colorに変更する？

  ※カレンダーで未来のタスク登録を実行する？

  計画的にタスクを遂行できるという目的があるのであれば、必要になる？

  入れ込む

  （課題　タスクに対してすべてのCRUD操作を可能にする？本質的には必要）

• タイマー管理

  【PHP, JavaScript, SQL】

  実行するタスクを選択してスタートボタンで開始。

  進行中の時間推移が表示される。

  タスク終了時にストップボタンで終了。

• 1日の振り返り

  【PHP, SQL】

  実行タスク、時間がテキストエリアに出力され、振り返りを記入できる。

  この振り返りを蓄積して確認できるようにする？

• SNSに投稿する　アプリとして実装完了後につける

  【PHP, SQL, Discord API】

  上記振り返りを投稿できるようにする。

• 実績が可視化（グラフ）されて確認することができる

  【PHP, JavaScript, SQL, グラフ化ライブラリ】

  • 1日のタスク平均時間TOP5を表示する

    以下の実績確認ができれば必要ない？

    1日の実行時間が長くても、期間内の実行回数が少なければ平均時間は変わってくるから意味はある

  • 1週間のタスク

    期間によって変動するタスクがあるため、必要

  • 1ヶ月のタスク

    期間によって変動するタスクがあるため、必要

チームメンバーの方が作成していただいたアーキテクチャ図はこちら

各自タスクを担当して、チームMTGですり合わせをして内容を確定していきました。

9. ワイヤーフレームの作成

経験するためにもということで、それぞれ全員でワイヤーフレームを作成しました。
しかし全員がワイヤーフレームを作成することで、仕様について詳細に認識を合わせられました。
言葉として認識ができていたとしてもビジュアルとして、考えていくと認識のずれがより具体的になったからだと思います。またそれぞれの良いデザインを取り入れることができました。
完成したワイヤーフレームがこちら

10. データベース(エンティティ定義)

こちらに関してもカリキュラムでデータベースを進めている段階だったので、理解力をあげられるようにと全員で取り組みました。エンティティ定義をすり合わせ、チームメンバーの方がテーブル定義書にまとめていただきました。
最終的なテーブル定義は以下のようになりました。

11. 環境構築

以前まではDockerの利用はしない方針でしたが、進捗が順調に進んでいました。またDockerを使った開発経験をもつチームの方がいました。
せっかくのチーム開発なのだからということで挑戦をさせてもらうことになりました。
そのため開発経験を持たれていた方に、Dockerの環境構築をお願いしました。その間にDockerについても学ぶことができました。

12. タスクばらし

環境構築をお願いしている間に、私はタスクばらしをさせていただきました。
フロントエンドからバックエンドまでのデータの流れを明確にイメージしながら、作成することができたので実装のときにはかなり頭の中が整理できた状態で迎えることができました。
そのときの流れをまとめたものが以下の内容です。

こちらを元にして、タスクの担当を割り振っていきました。

13. 実装

私はタスク登録のコンポーネントを担当させていただきました。
日別のタスク登録・表示、登録タスク名の編集、タスクの削除のCRUD操作を実装しました。
ログインユーザーごとに管理していく必要がありました。そのためユーザー情報を利用するためにuser idが必要。そうなるとログイン画面を担当している方に、セッションに情報を保持してもらう必要がありました。
このときに良かったなと感じたのが、実装期間は毎日MTGを行うと決めていたこと。MTGで相談すれば良いこととすぐに改善したい、共有したいことはチャットを利用してコミニュケーションをとるという選択をしやすかったです。
また毎日のMTGで各自の進捗状況をコード、表示の部分を踏まえて共有していました。そのため各自実装で困っている部分があれば、どちらも実装がしやすい手段を選択していくことができました。

14. 振り返り

チーム全体として良かったこと
・プレゼン当日を意識した計画を、綿密に立てることができていたこと。
開発の実装期間に入る前から、今すぐにできることがなにかを明確にしていました。そのためタスクが明確になり、取り組み続けることができていました。
アプリ全体の主な機能の実装をプレゼン前日には終えることができ、当日には細かい修正や追加のタスクを実行することもできました。

・各自の強みも弱みも理解して、チーム開発以降のことを考えてタスクを分担していったこと。
強みを生かすことでアプリの基準があがる部分は、その人にお願いをしました。
経験が今後に活かせる部分に関しては、可能な限りタスクに取り組めるようにしていくというタスクを分割していました。

・全員がお互いを尊重し合いながら、意見を伝え合えたところ
一人一人がチーム開発を成功させるためにはどうするか、ということを考えられていたからだと思います。
チームのことを考えてすべての言動があり、お互いに感謝の気持ちをもって受け入れることができていました。
そして成功させたいからこそ、よりよくしたいという気持ちから伝えるべきことは伝える。
これがチームとしてもっとも強みだったのかもしれません。

今回のチーム開発で取り組みたかったこと
・各自の強みを活かした知識の共有の深掘り
各自の経験から活かせる知識の共有があり、アプリ開発に反映することができていました。
その知識に対してより深い理解ができるように、もくもく会や知識の伝達を主にしたMTGなども取り組めば良かったと感じました。
そうすることでさらにアプリ開発の基準をあげることもできたと感じました。
・チーム開発に必要な知識の不足が発生していた。
GitHubやDockerについてチーム開発するには知識が不足している部分がありました。あらかじめ開発に必須なツールの利用方法を確認しておくことで開発に集中できたかと思います。

15. おわりに

今回のチーム開発で技術的な知識がまだまだ不足していると感じる部分も多くありました。
しかし1番実感したことは、チーム開発の力は本当に強いということです。
1人で開発しているよりもチームで一つのことを成し遂げようとすることで、責任感も生まれ開発に対する集中力があがります。そしていろいろな視点からの意見を取り入れることができるので、1人では出てこない発想を組み込むこともできます。
あとはチーム一丸となって開発できたアプリは、本当に嬉しかったです。すごく恵まれたチームで開発できたことが良かったです。

これからまた新たなカリキュラムで独学も進めていき、次回のチーム開発のときにはもっと技術を身につけた上で全力で臨みたいと思います。そして今回の経験を活かして次のチーム開発にも活かしていきたいと思います。