チーム開発で学んだアプリ開発

## 1. はじめに
私は2024年10月より内定直結型エンジニア学習プログラム「[アプレンティス](https://apprentice.jp/)」の7期生として参加しております。
そのカリキュラムの一環としてチーム開発を行いました。チーム開発で経験したことの振り返りを今回記事にしました。

## 2. チーム開発の概要
### プロダクトの紹介
#### なぜこのアプリを作ろうと思ったのか？
私たちのチームは **「役に立つ」** をコンセプトにしアイデアを出し合いました。その背景として **「学習者が直面するコード管理の課題」** を取り上げました。

**プログラミング学習者が直面する現状として**
* 学んだコードやスニペットを整理せずに放置すると、後で見返すのが難しい
* 他の学習者やエンジニアのコードを参考にすることで、新しいアイデアを学びたい

**既存のツールの限界**
* プロのエンジニア向けのツールは複雑で学習者にとっては使いづらい
* シンプルで直感的に使えるツールがない

このような課題を取り上げプログラミング学習者が学んだスニペットを簡単に保存・整理し、復習や再利用しやすいアプリ、その名も **「SnipNest」** を開発しました。

**SnipNest**
![snippetデモ.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2879698/118ada01-1d0f-e90f-afd0-2b0296467a82.gif)

### 開発スケジュール
| 期間 | 内容 |
| ---- | ---- |
| 10/7(月) - 10/20(日) | アイデア決め |
| 10/21(月) - 11/3(日) | スライド作成、要件定義、設計 |
| 11/4(月) - 11/17(日) | タスク出し、環境構築 |
| 11/18(月) - 12/1(日) | 今まで未完了のタスクを完了させる |
| 12/2(月) - 12/8(日) | 実装、プレゼン準備 |
| 12/8(日) 20:00 - 22:00 | プレゼン |

開発スケジュールとは別にカリキュラムも同時進行に学習していました。また、週1〜2回チーム会を行いチーム開発の内容について議論しました。
実装期間が1週間という制限もあり如何に用意周到な計画を準備期間に整えられるかバッファを持たせながら進めていきました。

### 要件定義
* コード保管機能(CRED処理)の実装
* 検索機能の実装
* ワンクリックでコピー機能の実装

### 技術スタック
* フロントエンド
    * HTML
    * CSS
    * JavaScript
    * ESLint
    * Prettier
* バックエンド
    * Ruby(Webrick/mysql2)
    * RuboCop
* インフラ
    * MySQL
    * Docker/Docker Compose
* CI/CD
    * GitHub Actions
* ソース管理
    * Git/GitHub

### 設計
#### 業務フロー図
![業務フロー.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2879698/2c90d8d1-2fc8-5ba1-580e-d0bd3672674f.png)

業務フロー図をチームメンバーが作成してくださりました。アプリに必要な操作、機能を明確に可視化してくださりました。ありがとうございます！

---

#### デザイン・画面遷移図
![snippet画面遷移図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2879698/f0d6daa6-bd5a-1d6c-7b23-5d1d04e3cb2e.png)

デザイン・画面遷移図はチームメンバーが作成してくださりました。シンプルで直感的なデザインとなっており開発の際スムーズに実装することができました。ありがとうございます！

---

#### ER図
![snippet_er.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2879698/e334b1dd-a964-d01b-6f77-71e7150ac16d.png)

ER図により各テーブルのリレーションを明確にしました。

---

#### テーブル定義書
![snippetテーブル定義書図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2879698/43f4f17d-20f1-0682-40ba-e10509f1a561.png)

テーブル定義書はチームメンバーと一緒に作成しました。これにより各テーブルに必要なカラムとデータ型を明確にしました。

---

#### 技術アーキテクチャ図
![技術アーキテクチャ図.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2879698/a020b4b1-de9a-4516-a912-4b0fc30aa495.png)

技術アーキテクチャ図を作成することによりフロントエンド・バックエンド間のやり取りを明確にしコーディングの際に前もってイメージすることができていたのでスムーズに取り組むことができました。

### 担当タスク
* 設計
    * ER図の作成
    * テーブル定義書の作成
    * 技術アーキテクチャ図の作成
    * GitHubフローの作成

* 環境構築
    * Dockerの導入
    * ESLint & Prettierの導入
    * RuboCopの導入
    * GitHub Actionsの導入

* 実装
    * Create機能の実装
    * Edit機能の実装

## 3. チーム開発で感じたこと・学んだこと
### よかった点
* GitHubフローを取り得れることによりチーム全体で実装ルールを遵守することができ開発を進めることができた。また、今回オリジナルのGitHubフローを作成して自分自身もGitHubフローについて理解を深めることができた
* メンバーが実装したコードレビューすることによりコーディングの意図を知ることができ実際のチーム開発に近い形で行えたのではないかと思う
* フロントエンドとバックエンドを分けなかったためチーム全員が両方のコアな部分を実装することができた。Rubyでサーバーの起動やルーティング、MySQLとのデータベースのやり取りからUIも実装でき、動きをつけアプリケーション開発を一通り実装できたこと
* チームメンバーの得意分野や特色が顕著に現れ自分では気づかないところに目を向けることができ新たに発見することができた。特にアイデア出しやデザイン、ユーザーが求めていること、スライド作成に重要なことなど学ぶ部分が多く勉強になった

### 反省点
* 各メンバー毎にフロントエンド、バックエンドを実装したためUIに関してはページ毎にデザインの統一感がなくもう少し明確に意見を出し合う時間を設けるべきした
* コア機能を実装する際、計画通りにいかなく、もっとバッファを持たせて計画するべきでした

## 5. 今後の課題と目標
* 開発期間中はもっと密に進捗状況の報告をし合いコミュニケーションの活性化を図り、自分から他のメンバーへ積極的にアプローチして開発状況の把握をする
* 自分の知らない技術などが浮き彫りになったチーム開発であったため次回のチーム開発ではそういった技術のスキルアップを補う
* give思考を意識しながら周囲に価値貢献するマインドを持つ

## 6. まとめ
結論から申し上げるとめちゃくちゃ楽しいチーム開発でした！1週間という短い期間でアプリを作り上げ完成したことに達成感を覚え今後の大きな励みになりました。また、プレゼン5分前に完成したときは本当に震えました！このチームだったからこそ成し遂げられた成果だと思います。メンバーには感謝しかないです。本当にありがとうございました！
この経験が次のチーム開発で活かせるよう技術の向上はもちろんのこと一致団結しチーム全体でレベルアップ出来ればいいなと感じました。
フレームワークを使わない開発の大変さを味わったのと同時にアプリケーションがどう動いているのか？各インターフェースのやり取りなど今まで何となくという部分を少し深掘りし理解できたのではないかと思います。
今後も、さらに知識や技術を高められるようひたむきに学び続け少しでも自分の理想とするエンジニアに近づくことができればいいなと感じました。