初学者だけのチームでWebアプリを作った話

## 目次

[1. はじめに](#1-はじめに)
[2. 制作したアプリについて](#2-制作したアプリについて)
[3. 良かった点](#3-良かった点)
[4. 担当した箇所](#4-担当した箇所)
[5. 課題と実践したこと](#5-課題と実践したこと)
[6. 反省点](#6-反省点)
[7. まとめ](#7-まとめ)

## 1. はじめに

私は現在[アプレンティス](https://apprentice.jp/)というエンジニア実習サービスに参加して、プログラミングの学習をしています。アプレンティスでは、受講生同士で3～4人のチームになりアプリを開発するという課題があります。  
10カ月ほど独学をしていた私がアプレンティスで一番やりたかったことが、このチーム開発でした！  

私もチームの方たちも複数人での開発は初めてで、とても学びが多く濃い体験になりました。そして先日ついにチーム開発の発表会を終えたので、学んだことをまとめておきます。  

## 2. 制作したアプリについて

制作したアプリは、**軽い！速い！簡単！なスケジュールアプリの『スケミ』** です。  
**複数人で予定を合わせるために、皆の共通の空いている時間を見つける**という目的に絞ったアプリです。  

### 開発背景

このアプリは、今回のチーム開発のお題である **『自分たちの役に立つものを開発せよ』** というテーマに沿って考えました。  
アプレンティスでは、各チーム週2回以上のチームミーティングを行うことが推奨されています。ですが**チーム全員の予定を合わせるのって結構難しい...。**  

私たちが感じた問題点は、以下のようなことでした。  

- フルタイムで働いている人、仕事の曜日が決まっていない人、急な予定が入ることがある人など、それぞれの事情がありなかなか予定が合わない
- 話し合いながら全員が空いている日時を絞っていくのは意外と時間を取られる
- チーム開発だけではなくメインの個人課題も進めなければならないため、スケジュール調整に時間をかけたくない
- 既存のスケジュールアプリは、ユーザー登録や日時をキーボードで入力する作業が面倒

そこで、これらの問題を解決してくれるアプリを作ろう！ということになりました。  

### アプリのコンセプト

アプリの目的は、できるだけ素早く皆の共通の空いている時間を見つけることです。  
そのためアプリの仕様を以下のように決めました。  

- 会員登録、ログインなどはなし！
- キーボードを使った日時の入力はしない！マウスでドラッグしてスケジュールをさっと簡単に入力できる！
- 空いている時間はぱっと一目で分かる！

コンセプトは明快で語感も良い、 **『軽い！速い！簡単！』** です！  

### アプリの機能

アプリの機能はとってもシンプルです。  
画面は、スケジュールの表示画面とスケジュール入力画面の2つです。  

#### 1. スケジュール表示画面でニックネームを入力

1. ニックネームを入力すると、右側のボタンに追加されていきます。
2. 開始日を選びます。
3. ニックネームのボタンを押すと、その人のスケジュール入力画面に遷移します。

![sukemi_top.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3137271/9b3e48e4-5051-b0d4-6864-581e4817fea5.png)

#### 2. スケジュール入力画面でスケジュールを入力

スケジュール変更画面に遷移し、空いているスケジュールのセルをクリックやドラッグで選びます。  
これを各ユーザーがそれぞれ行います。  

![sukemi_schedule.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3137271/0ca6a7ea-c4f2-9460-c945-ede46ce86853.png)

#### 3. スケジュール表示画面でスケジュールを確認

スケジュールを選んで保存すると、スケジュール表示画面に戻ります。  
スケジュールは各ユーザーのカラーで表示され、**全員が空いている日時はハイライトされて一目で分かります！**  

![sukemi_show.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3137271/e22e43d0-a147-1afd-246e-42258a514dbf.png)

## 3. 良かった点

チーム開発の発表会では、受講生からの評価が最も高いチームに Best Student Award 、メンターからの評価が最も高いチームに Best Award が授与されることになっていました。  
ありがたいことに、スケミは全7チームの中から Best Student Award に選ばれました。  
びっくりしましたが、めちゃくちゃ嬉しかったです！！  

スケミの機能はシンプルだし、スケジュールアプリという世の中によくあるサービスでもあります。それでも賞をいただけたことで感じたのは、  

**「アプリのコンセプトが明確でさらに人から共感してもらえたら、評価につながる！」**  

ということです。  

最初に決めたスケミのコンセプト **『軽い！速い！簡単！』** ですが、開発途中で実装の難しさや時間の無さから何度かブレそうになりました。ですがそこで諦めずに、コンセプトに近づけられるように開発を進めたことが良かったのだなと思います。**コンセプト、大事！！**  

## 4. 担当した箇所

私はフロントエンドの実装を担当しました。バックエンドの機能をチームの方が作ってくれている間に、別ブランチでフロントのコーディングを進めていました。その後作ってもらったバックエンドのコードをもらって、作っていたフロントに適用していきました。この作業がすごく勉強になりました！  
自分以外の人が書いたコードを読んだ経験がほとんどなかったため、初め見たときはわけわからなかったです。でも少しずつ解読していくのが楽しくて、自分の作っていたコードに適用できたときはとても嬉しかったです！  

## 5. 課題と実践したこと

チーム開発を進める上でぶつかった課題と、それを解決するためにどう考えて行動したかについてまとめます。  

### 作れるかどうかが分からない！

今回のチーム開発の縛りとして、**Railsなどのフレームワークの使用は禁止**というものがありました。  
チーム開発が始まった時点では、**フレームワークを使わずにどうやってWebアプリを作るのか**、チームの誰も想像できていない状態でした。  

- どうやってフロントエンド、バックエンド、データベースをつなげればいいの？
- SQL は学んだけど、ブラウザで入力された値をどうやってデータベースに保存するの？
- 検索しても、Rails を使った開発のやり方しか出てこない！
- ChatGPT に聞いても、すぐ Rails や Sinatra を使わせようとしてくる！フレームワークは使わないと言っているのに！

という感じでした。  

私含めチームの方たちは、今までそれぞれプログラミング言語を学んできました。ですが**学んできたことをどう使って連携して実際のアプリを作るのか**が分かっていませんでした。  

**作りたいアプリは決めたけど、本当に作れるのか？？** と、私もチームの方たちも不安を感じていました。  

#### 解決するために実践したこと：

作ろうとしているアプリが今の技術で実現可能なのかどうかは、早い段階で判断することが重要だと考えました。  要件定義やテーブル定義、役割分担をして...と進めていっても、結局技術的に無理だった！となったら最悪です。  

私は、**まずは小さくで良いので、作りたい動きが実現可能かどうかコードを書いて試してみよう**と思いました。　　

- Ruby のライブラリを使ってローカルサーバを立ててみる
- RubyからMySQLを操作するコードを書いてみる
- スケジュールをドラッグで入力する見た目の動作を実装してみる

これらはとりあえずできそうだということが分かり、チームの方たちに共有しました。  
試しではありますが動くものができたことで、少しでも前に進めたかなと思います。  

### チーム開発のやり方が分からない！

開発中は GitHub でコードを共有してはいましたが、その**ルールを明確に決めていなかった**ため、各自がそれぞれのコードで実装を進めているような状態になってしまっていました。  
そして進めるにつれどうにもお互いのコードを統合することができなくなり、チームの一人が一生懸命書いてくれていたコードの多くを消すことになってしまいました...。本当に申し訳なかったです。

#### 解決するために実践したこと：

そこからは GitHub でアプリ開発をしたことがあるチームの方から指導いただき、それぞれが GitHub の使い方を見直しました。
分かりやすい単位でコミットをし、コミットメッセージとプルリクのコメントは、変更点が相手に伝わるようにしっかり書く。コードも自分が分かればよいということではなく、相手に変更点が分かりやすいような実装を心がけるようにしました。  
チーム開発ではとにかく**チームのことを考えて実装を進めること、相手に分かりやすく伝えること、お互いを思いやること**が大切だということを学びました。  

## 6. 反省点

### 役割とルールを決めよう！！

今回のチーム開発での一番の反省点です。私たちのチームは中盤まで、役割もルールも決めずふわふわと作業を進めていました。  
途中でチームの一人がマネジメントを申し出てくれて、**スケジュール管理をして背中を押してくれるようになったことで、チームの流れが変わりました。** 本当にありがたかったです。　　

次回は最初からマネジメント担当を決めること、GitHub フローやコーディングルールを決めることを必ずしようと思いました。  

## 7. まとめ

初めてのチーム開発では、一人ではできない大切なことをたくさん学びました。  
チームに貢献できるように考えて行動することは、とてもやりがいがあり楽しい経験でした。  

初めの誰も何も分からない状態から、よくここまでできたなと感慨深いです。  
分からないことだらけで途中トラブルもありましたが、チームで協力して一つのアプリを作れたことで、これから学習を続けていく自信にもなりました。 

チームの方たちには感謝の気持ちでいっぱいです！  
アプレンティスではまた別のメンバーでもう一度チーム開発ができます。今回の良かった点や反省を活かして次も頑張ります！