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

## 1.はじめに
こんにちは、プログラミングを学び始めたばかりの新米エンジニアです！！
現在参加しているアプレンティスのプログラムの一環として、初めてのチーム開発に取り組みました。
今回のチーム開発で経験したことや学んだことを共有したいと思います。


↓私が参加しているアプレンティスの詳細についてはこちらです。
https://apprentice.jp/


## 2.開発テーマと要件
### 開発テーマ
開発テーマ：『自分たちの役に立つものを開発せよ』



### チーム開発の要件
- 使用する技術：HTML、CSS、JavaScript、MySQL、RubyまたはPHP。
- フレームワークの使用禁止：Rails、Laravel、Reactなどのフレームワークは使わず、
　　　　　　　　　　　　　生の言語のみを使用。
- 実行環境：ローカル（自分のPC上）で動作するアプリケーションを作成。
- 最終発表：各チームが制作物を5分間プレゼン。
　　　　　Zoomの画面共有を使用し、スライドとデモを交えて行う。
     　　　　　デモが難しい場合は動画やスクリーンショットを利用。
- 質疑応答：プレゼン後、各チームに対してメンターから5分間の質疑応答。
- プレゼン形式：プレゼンはチームの代表者が行い、質疑応答はチームメンバーが対応。
- 投票：プレゼン終了後、メンターと受講生全員で投票を行う。


## 3.チーム開発スケジュール
アプレンティス開始：10/16(月)～　　　
チーム開発期間：10/16(月)～12/3(日)
プレゼン発表：12/3(日)19:00~21:00

アプレンティスのプログラム開始と同時にチームが振り分けられ、チーム開発が始まりました！
チーム開発期間は1ヶ月半ありましたが、アプレンティスの２週間ごとの提出課題に取り組みながら行うため、実際に開発に専念できる期間は11/27(月)～12/3(日)の1週間のみでした。当初は本当にこれだけで動くアプリを作れるのかと不安な気持ちでいっぱいでした...

### 具体的なステップ
10/18(水)：アイスブレイク
　　　　　チーム会の日程決め（全体）
     
10/21(土)：アイデア出し（全体）

10/25(水)〜31(水)：アイデア出し(各自考える)

11/3(土)：開発するプロダクトの決定（全体）
　　　　   担当者決め（全体）
      　　　　 →①プレゼン発表者　②プロジェクトマネージャー　③画面遷移図・ワイヤーフレーム設計
           
11/4(月)〜11/7(火)：プレゼン資料用スライド作成（①担当者）
　　　　　　　                    　   Githubリモートリポジトリの用意（②担当者）
                               
11/8(水)：プレゼン資料用スライド確認（全体） 
　　　　  Githubリモートリポジトリへの接続確認（全体）
      
11/9(木)〜11/10(金)：画面遷移図作成（③担当者）

11/11(土)：画面遷移図確認（全体）
　　　　　要件定義（全体）
　　　　　タスク切り出し（全体）
　　　　　担当者割り振り（全体）
　　　　　→担当者単位でタスク時間見積もり
     
11/15(水)：ガントチャートの作成と確認(②担当者→全体)

11/18(土)：ワイヤーフレームの作成と確認(③担当者→全体)

11/22(水)：予備日

11/25(土)：悩み・疑問点の解消（全体）

11/27(月)〜12/3(日)：プログラミング（全体）
　　　　　　　　　    プレゼン資料作成（①担当者）
             
12/2(土)〜12/3(日)：プレゼン資料最終確認と発表練習（全体）         

12/3(日)：プレゼン発表（①担当者）

#### 
自分はプレゼン資料作成・発表担当に任命されました！！
チーム会ではチーム開発に向けた話し合いだけでなく、個人課題の進捗や最近ハマっているアニメなどの趣味の話をしたりと和気あいあいとしたチームで本当に楽しかったです！勉強が辛いときでもチームメンバーとの会話を通じて元気をもらい、前向きな気持ちになることができました！


## 4.開発したアプリについて
私たちのチームが開発したWebアプリケーションは「オフラインWebページマネージャー」です！
なんだか難しそうとイメージされるかと思われますが、至ってシンプル！
オフライン環境でもwebページが閲覧できる便利なアプリです。

### アプリの作成背景
大前提として、
既に便利なツールは存在している
ありきたりなアプリを作るとただのコピーで面白くない！
自分達がオリジナリティを出せるアプリは何か



それを踏まえた上で、
私たちの身の回りでどんな課題があり、役に立つものは何なのかチーム内で話しました。

#### 課題
- 私たちアプレンティス生は常に課題に追われ、外出中でも課題のことを考えている
- 外出時に電波が悪く、Githubのアプレンティス専用ページが見れず困った。
- 家の電波が悪く、目的のwebページ(技術ブログ、勉強サイト)にアクセスできない…

そこで！
電波環境が悪いオフラインの時でもGithubのプライベートリポジトリのwebページ、技術ブログ(Zenn、Qiita)のwebページが閲覧できるアプリを作ろう！と決めました。
そもそも世の中にオフラインwebページマネージャーといったアプリは少なかったのとGithubのプライベートリポジトリのwebページにアクセスできれば他と差別化できるということで決めました

#### アプリのコンセプト
いつでも、どこでも、アプレンティス課題に取り組める！
オフラインでも勉強できる環境を提供する！

## 5.使用技術
#### 言語
- フロントエンド：HTML／CSS／Javascript
- バックエンド：Ruby(スクレイピング使用)

#### ライブラリ
- webrick - フロントエンドとバックエンドのデータ移送用
- csv - データ保存用
- json - JavaScriptの変数で受け取る用
- kramdown - MarkdownをHTMLに変換する用
- fileutils - ディレクトリ削除用

#### その他
- アイデア出し、要件定義、ガントチャート：Notion
- 画面遷移図：miro
- コード管理：Github
- プレゼン発表用スライド作成：Googleスライド


## 6.完成したアプリ
一旦完成したアプリをご紹介します。
*Githubのwebページはプライベートリポジトリのため以下のデモに含めておりませんが
ブログ記事と同じようなwebページが表示されます。
例として、以前書いた自分のQiita記事でデモしております。

![オフラインwebページマネージャー製作物デモ2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568465/34208f6a-3539-b33f-87fe-a6d39d8aa703.gif)

ユーザーの使い方
①Home画面でWebページダウンロードまたは保存済みページリストを選択
②URL入力画面で記事URLを入力。
③追加ボタンでリストに記事を保存
④保存記事のリンクで本文表示
⑤削除ボタンで記事削除


## 7.作業内容
### 7-1.画面遷移図
![画面遷移図.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568465/8874d8c2-85d5-47dc-0c9f-5de9424ecd85.jpeg)



### 7-2.要件定義
![スクリーンショット 2023-12-11 19.19.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568465/88857867-2b0a-5b47-b409-4989665b7f42.png)
![スクリーンショット 2023-12-11 19.20.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3568465/ccd82954-8bfe-d8a5-fe66-c93eae0c2514.png)

### 7-3.担当したところ(↓要件定義、タスク切り出しから)
#### Welcomeページ
- WelcomeページのHTML作成
- リンクの追加をクリックすると、URL入力画面に遷移する
- 保存済みのリンクをクリックすると、ページ管理画面に遷移する
#### URL入力画面(Webページのダウンロード)
- URL入力画面のHTML作成
#### 全ページ
- 全体のCSS作成
#### プレゼン資料作成と発表
- プレゼン資料作成(確認)
- プレゼン資料作成(最終確認)

## 8.課題と対応方法
#### チーム全体の課題
サーバー環境の構築
- 課題：
開発要件でRuby on Railsなどのフレームワーク使用が禁止されており、ローカルサーバー立ち上げの方法が課題でした。
- 対応：
ネットで調べると、Rubyのライブラリを使ってローカルサーバを立てることができるとわかりました。Rubyの標準ライブラリ「WEBrick」の存在を発見し、これを使用することに決定しました。主催者の確認を経て、WEBrickを使用して環境を準備し、無事に技術的制約をクリアしました。


RubyスクレイピングとNokogiriの利用
- 課題：
Webページの複雑なHTML構造の解析が困難で、特に深くネストされた要素へのアクセスに苦労しました。また、抽出したデータの精度と整合性を保つことが難しいポイントでした。
- 対応：
異なるWebページ間の構造の違いに対応するため、Nokogiriの詳細な文書を参照し、適切なセレクタとXPathを使用してデータの精度と整合性を保つ方法を考えました。
今回は静的コンテンツの表示を目的とし、動的コンテンツの処理は不要であったため、この点では課題は少なかったです。

#### 個人的な課題
技術力・知識不足
- 課題：
WEBrickを使用して簡易的なサーバーを立てる必要性や、一般的なWebサーバーの動作原理についての理解が不足していました。これにより、バックエンドとフロントエンドの連携やHTMLとCSSの設計がより難しく感じました。
- 対応：
ウェブサーバーの基本的な概念やRubyプログラミングに関する知識を深めるために、チームメンバーとの話し合いを通じて、疑問を一つ一つ解消していきました。実際の開発コードを読んで理解を深め、バックエンドとフロントエンドの連携についての理解を進めました。

## 9.良かった点
#### チーム全体
- チーム会で本日の議題と次回までの宿題を明確にしたことで、アプレンティスの個人課題だけでなくチーム開発にも意識が向き、自分の任されたところはやり切るぞという気持ちになれました。
- Notionを使用した議事録やスライド、画面遷移図、ガントチャートの管理により、チーム内での情報共有がスムーズで効率的でした。
- ガントチャートに基づく要件定義とタスクの細分化により、開発までの段取りがとても円滑に行うことができました。
#### 個人
- プレゼンテーション担当者として、他のメンバーの設計や技術について理解を深めることができました。これにより、幅広い知識を身につけるとともに、自分の技術力の不足を認識しました。
- webサーバーの知識、Githubの使い方など書籍を読んで何となく理解していた知識が、実際に経験してみることで、理解が一層深まりました。

## 10.反省点
#### チーム全体
Github
- 共通リポジトリの初利用でコンフリクトが発生し、プルリクエストに時間を要しました。
→プルリクエスト等のGithubルールを早めに決めて、実践的な練習をしておくべきでした
- コーディングルール(コメントの残し方、スペース)がバラバラだった
→コーディングルールをもっと擦り合わせておくべきだった。解析ツールの使用を徹底するべきでした


全体のCSS設計
- 全体のデザインのアイデアをチームメンバーと共有していなかった。
- アプリのコンセプトに合わせたデザインになっていないことに開発終盤に気づき、設計した部分を修正することになってしまった。
→タスク割り出しの際に、しっかりと方向性を明確にするべきでした。

#### 個人
- 開発していく中で行き詰まったところ、悩んでいるところをうやむやにしてしまった
→解決するまで原因を深掘りすること！解決できなければ、積極的にチームメンバーに相談しアドバイスをもらうこと！
- 環境開発やバックエンドはほぼチームメンバー任せになってしまった。技術力がなく、肝となるRubyスクレイピングの処理等のバックエンド側の開発のお手伝いをできなかった。
→他人任せにせず、自分もチーム開発に携わっていること意識を持つこと。
- 個人課題に必死で予定よりチーム開発のプログラミング開発が遅れてしまった。
→時間がないを言い訳にしない！都度スケジュール管理をしっかり見直すこと！
- 任されたタスクをやらなければと使命感が募り、進捗が悪いのにも関わらずリカバリーをチームメンバーに相談できなかった。
→期間や納期は絶対守ること！もし間に合いそうになければ早めの相談をすること！
- その他のチームメンバーが開発したコードを理解していなかったため、プレゼン前日に焦って質問をしていた。
→担当のフロントエンドだけではなく、バックエンドからの受け渡しがどのように行われているのか意識すること



## 11.今後のアップデート
今回はGithub、技術ブログ(Zenn、Qiita)の記事に絞ってwebページを表示できるようにしましたが、ユーザーが自由にカスタマイズできるような機能を追加していきたいと考えています。

## 12.まとめ
みんなで一つのものを作りあげる楽しさ、難しさをこんなにも感じられたのは人生で初めての経験でした。
プレゼン担当者としてチームメンバーが開発してくださった素敵なものを台無しにしたくないと思い、チームメンバーの書いたコード、どんな設計思想を持って書いたのか必死で理解しようとしました。そのおかげで、少しずつバックエンドの知識がついてきたと感じています
自分の悩んでいること、困っていることを親身になって聞いてくださり、またアドバイスしてくれたチームメンバーの方々には本当に感謝しきれません！本当にありがとうございました！！
これからも、仲良くなったメンバーとのコミュニケーションを大切にし、さらなる交流を深めていきたいと思います。
最後に、チーム開発を通じて、自分の技術力がまだまだ足りないと強く思いました、、、自分だけ簡単な作業しかお手伝いできなかったため、とても悔しかったです😂
次回のチーム開発では積極的に開発に携われるよう自分の実力を身につけていきたいと思います。前を向いて、一歩ずつ成長できるよう勉強を継続していきます。