2回目のチーム開発振り返り


## 🖐️はじめに
私は現在[アプレンティスシップ](https://apprentice.jp/)に参加しており、
そのカリキュラム内で2回目のチーム開発に参加したため、その振り返りをしていきます。

以下は、1回目のチーム開発参加時の振り返り記事へのリンクです。

https://qiita.com/keiswe/items/41650894382d0aa78193

### チーム開発要件について

アプレンティスシップのチーム開発では以下の要件だけが事前に決まっており、
何をどのように作っていくかはチームで決めていく必要がありました。
* 開発テーマ : 『ワクワクするものを開発せよ』
* 開発技術 : HTML/CSS/MySQL/Rails or Laravel/React or Next.js
* その他 : 
    * 制作物はSPA(シングルページアプリケーション)であること
    * ローカル環境での動作が必須であり、プレゼン時は動作の様子を動画で示すでも可
    * 開発最終日に制作物のプレゼンを3分で行うこと
    * プレゼン参加者で制作物に投票を行い、最多投票数のプロダクトはAwardが授与される

## 💻作成したアプリについて
### アプリ概要
「見知らぬ人とお茶会を開催/参加できるアプリ」

### コンセプト

イベントを開催/参加するのは少しハードルが高いと思う方が多いと思います。
そのイベントをより開催/参加しやすくすることを目的としたアプリになります。

また、"ちょっとお茶する"感覚でイベント開催/参加できればという思いから"イベント"ではなく"お茶会"としています。
「シンプルなUI」、「ワンクリックで参加表明が出せる」でユーザビリティを高めています。

### アプリの特徴
* シンプルなUI
    * シンプルなUIはユーザーのユーザビリティ向上のために重要です。全体のスタイリングを整えることはもちろんですが、ユーザーが直感で操作できるように実装しています
* ワンクリックで参加表明が出せる
    * イベント参加の一つの障壁であるイベント参加ボタン押下。簡単に押せて、キャンセルもできるようにしています

### アプリ機能
* お茶会一覧機能
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365570/3441b70c-82c4-876d-a4e9-7c095b93ad61.gif" width=100%>

* お茶会詳細機能
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365570/e0ab422f-57f8-910d-04ec-c1dcab24a5f7.png" width=100%>

* 参加/キャンセル機能
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365570/1f1c1a80-6509-3984-43da-e78b2f23b505.gif" width=100%>

* お茶会作成機能
 <img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365570/9766d099-a71f-8805-10cb-3c4506ab99ee.gif" width=100%>

* ユーザー簡易プロフィール表示機能
ユーザー名にカーソルを当てるだけでお茶会主催者の情報を簡易的に確認できる

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365570/ff805d35-6292-4591-8a6f-2b5fa05a40eb.gif" width=100%>
 
### 工夫した点
* お茶会をイメージして全体的に緑色を使用
* UIはコンポーネント化し再利用性を高める

### 技術スタック
<table>
    <tr>
      <th>カテゴリ</th>
      <th>技術スタック</th>
    </tr>
    <tr>
      <td rowspan=1>フロントエンド</td>
      <td>React(スタイリングにはCSSを使用)</td>
    </tr>
    <tr>
      <td rowspan=1>バックエンド</td>
      <td>Ruby on Rails(APIモード)</td>
    </tr>
    <tr>
      <td rowspan=1>インフラ</td>
      <td>Docker</td>
    </tr>
</table>

## 💫チーム開発の流れ

### 制作物決め
開発テーマである「ワクワクすること」を持ち合い、何を作成しようか話し合いをしました。
最終的に、ワクワクすること = 人と交流すること(イベントに参加すること)と考えイベント募集アプリを作成しようとなりました。 

### 要件定義
「こんな機能あったら便利だね」という観点で機能出しを行い、
高/低優先度に分けて高優先度のもの以外は余力があれば組み込んでいこうとなりました。

また、アプリのコンセプトである「イベント参加はハードルが高い」という課題を解決するために、
「UIをシンプルに」と「ワンクリックで参加可能」という点は最優先で実装していきました。

### 設計
要件定義で出したアイディアを下に、ワイヤーフレーム、機能設計、テーブル設計を進めていきました。

* ワイヤーフレーム
figmaを使用し作成をしていきました。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/365570/e65a997f-cd43-19df-09a0-c307145d25f7.png" width=100%>

* コンポーネント
今回はできるだけコンポーネントに分けて開発していきたかったため、
出来上がったワイヤーフレームをベースに、コンポーネントに分割していきました。
これによりフロントのタスク振りは少し負担が楽になった気がします。

### 実装
今回SPAで実装していく必要があったため、フロントエンドとバックエンドが完全に分かれていました。
そのため、作戦としてフロントエンド側(ロジックを除く見た目のみ)を完全に作成しきって、バックエンド側に着手し、フロントとバックを繋げていこうとなりました。

### プレゼン
プレゼン時間は3分のみだったため、シンプルな構成にすることを意識しました。
チームメンバーに内容を確認していただきよりブラッシュアップし、
事前練習にも付き合っていただき本番に臨むことができました。
(おかげさまでプレゼンの緊張を解くことができました！)

<iframe src="https://docs.google.com/presentation/d/1-ZPtZqZKk8v6EjIynbBAtXsKfJoYDr7C3q3Lxw5yl_U/embed?start=false&loop=false&delayms=3000" frameborder="0" width="960" height="569" allowfullscreen="true mozallowfullscreen="true" webkitallowfullscreen="true"></iframe>

## 📝振り返り

### タスクの決め方が難しかった
フロントエンドとバックエンドが分かれている状態でタスクを割り振る必要がありました。
フロント側(見た目)をメンバー全員で作った後に、フロント側(ロジック部分)とバックエンド側に取り掛かったのですが、他にやりようがあったのではないかと考えています。
タスク管理が難しい状態でチームメンバーと方針を決め作業を進められたのは良い経験になったかなと思います。
ただ、あくまでこのやり方は今回うまくいっただけなので、今回の経験は活かしつつ、次回どう管理していくか決めたいです。

### 実装する期間がキツキツだった
実装する期間が1週間のみだったため、基本的な機能を実装するだけで最終日を迎えてしまいました。
また、フロント側(ロジック)の実装部分でReact関連のエラーに悩まされ思ったより時間を取られてしまいました。
実装期間はもっとバッファを積むべきだったと反省しています。

### チームメンバーをもっと頼るべきだった
やってみたい好奇心もあり、余裕があれば自分がタスクを引き取るようにしていました。
ただ、メンバーに頼るべきだったのではと反省しています。
メンバーとタスク分配することでチームとして別の機能実装ができたかもしれません。

また、今回は自分がタスクを引き取って特に負担は感じていませんでしたが、
今後、業務上でタスクを引き取りすぎて身を滅ぼす可能性もあるなと考えています。
誰かに頼ることは重要だなと改めて感じました。

## ✍️まとめ
振り返ると楽しかったところがある反面、気をつけないといけないなぁと思う部分があるため、
今後の開発に活かして引き続き学習を進めていきたいです。