React x Ruby on Rails を使用したチーム開発記録

## はじめに
私は、株式会社ユーブルが提供している「APPRENTICE」というエンジニア内定直結のサービスを受講しています。

二回目のチーム開発を行いました。その体験がまたまた非常に貴重なものになりましたので、記憶が鮮明なうちに記録します！

## 二回目のチーム開発
4人1チームとなり、今まで学習したプログラミング言語を使用しテーマに沿ったアプリケーションを実装する。
Rails, Laravel, React, typescript,Next.js などのフレームワークを使用し、アプリケーション開発を行います。（尚、使用する技術は決められておらず、それぞれ考えたアプリにあった技術を使用します。）

そして今回は二回目のチーム開発なので、前回の後悔を絶対残さないぞ！という気持ちで取り組みました。

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

そして今回も・・・！

 受講生からの評価が最も高いチームに Best Student Award を授与！
メンターからの評価が最も高いチームに Best Award を授与！
今度こそ目指せ！つかみ取れ！Award受賞！！

## 開発テーマは『わくわくするものを開発せよ』
各チームごとに、「わくわくするもの」とは何か？を考え
1ヶ月ほどの期間でアイデア決め、スライド作成、要件定義、設計、タスク出し、環境構築、実装、プレゼン準備、プレゼンを行います。

私たちのチームでは、同じ趣味や趣向を持っている方々が気軽にイベントに参加したり、開催出来るアプリ **『お茶会アプリ』** を作成することに決定しました！！

- **開発に至った背景や動機**
まず「わくわくするもの」とはなんだろうか？ココの定義を決めるのに時間が一番かかったような気がしてます。
「同じ趣味、趣向を持った方々が交流すること」がわくわくに繋がるのではないか！？と考えました。
**気軽に同じ趣味、趣向を持った方々が交流できるアプリを作成すれば世界にもっとわくわくを提供できる！**　と考えました。

## チームの構成と役割分担
チームは私とSさんHさんIさんの4人チーム


- **協力やコミュニケーションの方法**
Discordを使用し、適宜チーム会を行い進捗確認やすり合わせを行いました。

## 今回使用した技術やツール
環境の一貫性と再現性：Docker
アイデア決め、スライド作成、要件定義、機能設計：Figma
タスク管理：Notion
コード管理：Git,Github
フロントエンド言語：React
バックエンド言語：Ruby on Rails
データベース：MySQL
## 遭遇した課題や問題、それをどのように解決したか
**課題と問題点**
①既存イベント系アプリとの差別化
②どうすれば気軽に使ってもらえそうか
③実装期間は一週間 どこまでの機能をアプリに取り込むのか
④各メンバーとの関係性とコミュニケーションの取り方
　
**どのように解決したのか**
①まずは競合アプリを実際に使用してみた。UIがしっかりとしているがイベントに参加するまでの導線が長く途中で断念してしまいそうだった。
私たちの作成する「お茶会」では気軽に募集や参加することが出来ることをアピールし差別化を図りました。

②UIに拘りました。直観的な操作でイベントに参加することが出来る。
登録するとすぐ既存のイベントが表示されワンクリックでイベントに参加することが出来る。

③ここだけは無限に出てくるので、まずはチーム内で優先順位を決めました。
例）
・イベント詳細ページ（優先順位：高）
・アカウントのフォロー機能（優先順位：中）
・イベント毎のコミュニケーション機能実装（優先順位：低）
上記を決め、実装期間中にイベントアプリとして最低限機能するようにしました。

④同じ環境で学習を進めているチームメンバーですが、学習環境や年齢、バックボーンも一人一人異なりますので、会話が弾まない。上辺スリスリだけのコミュニケーションでは本音も出てこない。
最年長の私から開発以外のことなども、自発でよく話すように心がけ、メンバーが本音で話せる環境づくりとより建設的な開発になる様に、適宜取りまとめを行いました。
結果、いい緊張感をもって開発に取り組めたかと思います。

## 完成したアプリケーションの機能や特徴
- **機能や特徴**
 気軽にイベントに参加することが出来る。
 直観的な操作でアプリケーションを使うことが出来る。
 タイムライン形式でイベントが表示される。
 イメージカラーを統一に、UIを作り込みました。
- **アプリケーション紹介**
イベント一覧ページ
![otyakaidemo1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578393/d95b4ea0-7155-7952-525d-a625578bce12.gif)
参加/キャンセル機能
![otyakaidemo2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578393/e7357825-aab6-a275-888b-f6923d528ea9.gif)
新規お茶会(イベント)作成
![otyakaidemo3.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578393/18aac2bf-ade4-86d5-53fc-610b0630490a.gif)
ユーザー簡易プロフィール作成
![otyakaidemo4.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578393/0b7a28dc-2e18-7fe6-402c-fe953b802438.gif)


- **画面遷移図**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578393/ae24077d-c37d-f744-af8f-68eed295b947.png)

- **テーブル設計**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3578393/6cc2a7d0-4bd8-d252-4157-05d7efe3bae9.png)

## プロジェクトを通じて学んだことや個人的な成長
- **チームとしての経験から得られた教訓**
今回二回目のチーム開発！
結論、一回目の経験よりも良いよいものとなりました。
チーム開発が始まった時から、前回の失敗だけは繰り返さない！という気持ちを常に持ちながら進めていました。
前回の失敗は、コードを書く技術がなく実装のほとんどをチームメンバーに任せてしまった点
今回は自分からオーバータスク気味ぐらいで、実装作業引き受けました。
ゴールが明確な分いつもの学習より集中して取り組めたので、任された部分（ヘッダー、Signup画面、Login画面）は実装することが出来て自信に繋がりました。
最後に新規イベント作成画面をFloat表示させようと奮闘しましたが、時間と技術スキルが足りず断念しました。もっと技術力高めたい。

- **プロジェクトの成果とフィードバック**
Award受賞の夢は叶いませんでした。
他のチームのアプリがどれも素晴らしいものばかりで、発表当日は驚きの連続でした。
TwichのAPI連携を使用しログインしクリップを保存することが出来るアプリや、AIにタスクを食べさせて育てるアプリなど・・・
到底自分ではとても考えつかないようなものばかりで、モノづくりの核心を突かれたような、そんな気持ちになりとても良い刺激になりました。

## チームメンバーの方々へ
ノリの良いチームで開発期間中とても楽しい時間を過ごすことが出来ました！
本当にありがとうございました！
これからオリジナルプロダクト開発に進んでいきますが、定期的に集まり進捗など話し合いましょう！！

- まとめ
納期が決まっている中、チーム最大限のアウトプットを出力するにはどうするのかを考えた期間でした。
目の前の問題をどうクリアしていくのか？何がベストなのか？
チーム一丸となって解決を目指す。チーム開発の本質に触れられとても良い経験でした。