初めてのチーム開発で学んだこと

# はじめに

ITエンジニアへの転職を目指す私が、[アプレンティス](https://apprentice.jp/)のカリキュラムの中で、初めてのチーム開発で学んだことを振り返りも兼ねて紹介します。

# チーム開発の概要

- 「自分たちの役に立つもの」をテーマに、ローカルで動作するもの
- あえてRailsを使わず「HTML/CSS/JavaScript/Ruby/MySQL」を用いて実装することで、生の言語への理解を深める
- 2ヶ月の基礎学習と並行してアプリのアイディア出しや環境構築をし、1週間を実装期間とする
- メンバーは私を含めて3人の社会人チーム

アイディア出しの結果、「前に書いたあのコードを再利用したい」という悩みがあるという問題を解決するために、「よく使うコードのスニペットを簡単に保存・コピー・検索ができる**スニペットアプリ**」を開発することに決定しました！

# できたもの

### スニペット保存アプリ「SnipNest」

![snippet-app-logo.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3080004/f5e11804-d2e5-7f4b-7f4b-5a29598ad44c.png)

![demo.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3080004/1a2b7b6d-0060-8106-c047-3a1e5b12c6da.gif)

# 要件定義

アイディアが決まってからは、どういう機能が必要であるかを話し合い、以下の機能はマストとの結論に至りました。

- CRUD機能
- 検索機能
- ワンクリックでコードをコピーできる機能

# 設計

### 業務フロー

基本的なCRUD処理が中心です。

![業務フロー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3080004/8bc32564-b4cf-8aaa-b389-d40104485ad6.png)

### ワイヤーフレーム・画面遷移図

Macの標準アプリ「フリーボード」で作りました。

![ワイヤーフレーム.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3080004/05e0c0af-d6c9-3053-fce8-bda6d6f2ad83.png)

### ER図

![snippet_er.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3080004/f0531c10-7c01-471f-8fc4-fd63fa7ef9ef.png)

### 技術アーキテクチャ

![技術アーキテクチャ図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3080004/84023988-3141-f3b0-130f-12e6edd0733a.png)

# 役割分担

フロントエンド・バックエンドで担当を分ける案もありましたが、「役割を分けるほど精通する分野のスキル差は大きくないのでは」という点や、「表から裏まですべてを実装する方が成長につながる」という考えから、「機能別・ページ別」に担当を分けることにしました。

### スニペットの詳細ページを担当

![詳細画面.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3080004/e433feb9-7ae0-0eaf-40a8-ee4987d7913a.png)

- 工夫した点
    - 想定ユーザーがプログラミング学習者であるため、使い慣れているQiitaやGitHubを参考に無彩色をベースにしたデザインを指定
    - 文字による説明は抑えた、アイコンによる直感的な理解
    - 編集ページへ正しく遷移する
    - 削除を実行すると裏でDELETE文を発行

# チーム開発を終えて

## 学んだこと

主に`WEBrick`や`mysql2`が活躍してくれましたが、わからないことだらけで本当に大変でした。いかにRailsが難しいことを隠してくれているかを痛感しました。ユーザーがURLにアクセスしてからページが表示されるまでの間の流れが以前よりイメージしやすくなったように感じます。

また、GitHubフローに従い、Issueを立てるところからプルリクエストの承認を得るところまでを実際に行えたことが貴重な体験でした。

## 貢献できたこと

### UI/UX

ワイヤーフレーム・画面遷移図の作成や、アプリのロゴ(クリスタで作成)などで貢献できました。「こんなもので大丈夫かな…」とも思いましたが、「実際に図になることですごく実装イメージが湧いた」との言葉をもらったのが嬉しかったです。
**どう動けばいいかわからない時、「絵や図にしてみる」** というのは良いアプローチだと感じました。

### 問題の整理

チームでのビデオ通話時、ちょっとした問題や懸念が発生した際、それぞれが憶測混じりで話すことによって結局のところ何を話しているのかがよくわからない状態に陥ることがありました。
そのような場面で「今の状況は〇〇で、〇〇という問題が発生する可能性があるが、必ず発生すると決まったわけではない。発生するかどうかを試すためには〇〇機能の完成が必要であるため、〇〇機能を優先的に仕上げる必要がある、という認識で合っていますか？」というように、**チームの認識や考えにズレが発生しないように自分なりの言葉で現状をまとめる**行いを心がけました。

## 反省点

### 行動の反省点→コンフリクトの解消

自分の担当する機能が完成したので意気揚々とプッシュしたところ、コンフリクトが発生。チーム内にチーム開発の経験者がいたのでコンフリクトの解消を助けてもらうことに。GitHubフローは知っているつもりでいましたが、コンフリクトのことを失念していました。**作業ブランチでの開発時、こまめにリモートの更新を取り込むことで巨大なコンフリクトに苦しまないようにしよう**と思いました。

### アプリの反省点→機能とデザイン

メンターさんの講評で指摘されたことは以下の点です。

- スニペットアプリにユーザーが求めるのは検索機能だと思うが、その機能が弱い
- デザインにバラつきがある

検索機能はあくまでオマケのようなものと捉えていましたが、**ユーザーの利用シーンを考える**と、しっかり時間をかけて充実させるべきであり、また、曖昧な記憶をたよりに目当てのスニペットに辿り着くための「あいまい検索」といった機能は欲しいと感じました。
また、デザインについては実装の初期段階で**デザインガイドライン**を設けてチームでアプリの統一感を損なわないようにする工夫が必要と思いました。

### チームの反省点→進捗共有

進捗の共有も改善の余地があると考えます。ビデオ通話の頻度を上げたり、こまめにテキストを投げるなどしてどの程度進んでいるかを共有する仕組みやツールを用意する必要があるように感じました。

# さいごに

大変でしたが、振り返ると楽しかった思い出が強いです。夜にPCを開いて通話をつなぎ、気がついたら朝になっていたくらいには作業に没頭する瞬間があり、やはり動くものが仕上がるのは格別だと思いました。まだまだ技術的な部分でチームメンバーに後れを取る場面があるため、「〇〇なら任せて！」と言えるようにガッツリと学習・開発に励みます。