🍎

チーム開発からプレゼンまでの内容・感想[プログラミング初学者]

2024/02/02に公開

CSS

はじめに

初めまして、アプレンティス3期生のつつひこです。
2023/12/11からアプレンティス(内定直結のエンジニア実習)に参加しています。
そのカリキュラムの中にチーム開発があり、今回その内容をまとめました。

アプレンティス詳細 ↓
https://apprentice.jp/

簡単な自己紹介

私は元々金融機関に勤めており、未経験からWEB制作会社にコーダーとして転職しました。そして、約1年ほどWEBサイトの制作に携わっていました。
その中で、サービスの開発をしたいと思い、仕事を退職してアプレンティスに参加したという状況です。HTML/CSS/JavaScripが少しできる程度で、WEB開発の経験はありませんでした。

チーム開発の概要

スケジュール
- 12/11〜1/28 (実装期間は最後の1週間のみ)
主な要件
- 自分たちの役に立つものを開発せよ
- HTML/CSS/JavaScript/MySQL/Ruby or PHP を使用 (フレームワーク禁止)
- ローカル（手元のPC上）で動くようにしてください

開発したアプリについて

サービス概要

アプレンティス参加者に向けたサービスで、主に学習時間の記録・管理を目的としています。
アバターの着せ替えというサブ機能も用意しました。

開発した背景

アプレンティスに参加・プログラミング学習にあたって、うまく学習が進まなかったり、モチベーションが下がるようなこともあると思います。
その中で、モチベーションが上がるような楽しい学習管理ツールがあればいいよねという話になり、今回のサービスを開発することになりました。

チーム開発期間中について

実装前について

アイデアが決まったあとは、「要件定義」→「設計」→「タスク出し」→「環境構築」のような手順で進めていきました。

要件定義

サービスで必要な機能をシステムに落とし込めるように、チームで話し合いながら要件定義を行いました。
今思えば、結果的にすべての機能は実装でなかったので、要件定義の時点で実装可能かをもう少し深掘りした方が良かったと思いました。
実装期間が1週間しか取れない&アプリを開発したことがない中で、実装可能かを判断することはなかなか難しいと思います。しかし、「デモで動かしてみる」「チームでサンプルとして何か作ってみる」などの対策はできたと思います。

画面遷移図

すべてのページとその役割をイメージするために画面遷移図を作成しました。

ワイヤーフレーム

すべてのページの機能やUIをできるだけ分かりやすくするためにワイヤーフレームを作成しました。
こちらは私が担当しましたが、もっとわかりやすく・シンプルに作成した方が良かったです。アコーディオンの中やモーダルの中の機能・UIをはっきりさせておらず、チームメンバーとの認識がずれていることがあったので、デザインよりも機能や役割をはっきりさせることが大切だと思いました。

テーブル定義

テーブル定義はチームメンバーの1人が作成してくれました。

環境構築、技術構成

環境構築は私が担当することになり、チームメンバーと話してDockerを使用することになりました。チームメンバー間で全く同じ環境を作るならDockerが便利だと思ったからです。
チーム開発をする中で、環境周りでエラーが起きて躓くことはなかったので、良かったです。

実装期間について

実装前の準備が整ったあとは、いよいよ一週間の実装期間です。
実装の進め方としては、「フロント(私が担当)」・「バックエンド(PHP)」、「データベース・SQL」という役割を分けました(チームは3人)。

実装期間の課題や解決策について

1. どのように連携してチーム開発をすればいいのかわからない

3人で役割を決めて、

「フロント」担当は各ページの静的な要素をコーディング・JSでグラフなどの描画処理を行い、
「バックエンド」担当は受け取ったデータを元に関数を作成、
「データベース・SQL」担当はテーブル定義や初期データの作成・クエリを書くといった流れで開発を進めていました。

ただ、途中からバックエンドの関数内に記述するクエリを「データベース・SQL」担当の人が書いたら、コンフリクトが起きないか？や「バックエンド」側の関数が増えてきたときに「フロント」はどの関数を受け取ってどの変数をどこで使えばいいのかなどがよくわからず、ボールがどこにあるのかよくわからないカオスな状況になっていました。正直、画期的な解決方法はその時は見出すことができずに、通話や画面共有をしながらどうにかデータの繋ぎこみを地道にして行くということしかできませんでした。

今思えば、「フロント」「バックエンド」などで役割を分けるより機能ごとに実装を進めた方が良かったと思いました。「機能ごとに役割を分けるか？フロント・バックエンドなどで分けるか？」という話になった時に、あまり深掘りせずに「コードに統一感がなくなるし、コンフリクト起きそう」などの理由で決めてしまっていました。また、機能ごとに役割を分ける方法についてもよく調べていなかったので実装前の準備がいかに大事かを痛感しました。

2. コミュニケーション不足

実装期間が開始してから各々作業を進めていたのですが、それぞれが「おそらくこういうふうに関数を作っておけばいいだろう」「とりあえずformでPOSTできればいいだろう」ぐらいの曖昧さで実装を進めていて、実際にデータを繋ぎ込む際に、うまくいかず戻りが発生したり、不要な関数を作っていたりとかなり非効率な進め方をしていました。
これだとチームで開発するメリットを享受できなくなるので、密にコミュニケーションをしなければいけないと思いました。
実装期間の後半は、ほぼ一日Discordで通話で通話しながら、わからないことがあったらすぐに聞ける状態にして開発を進めました。その結果後半は、開発もスムーズに行くことが増えたので良かったと思います。

3. タスクばらしや個々人のリソースの把握不足

タスクばらしについては個々で行い、ミーティングでは「フロントは何日までに終わらせる、データベースは何日まで」ぐらいのことしか共有をしていませんでした。
これでは、各人のタスクが遅れているのか、あとどのくらい残っているのかなどがさっぱりわからないので表形式でドキュメントにまとめたり、ガントチャートを作成するなどの対策が必要でした。

また、各人のタスクが遅れる場合の取り決めについても決めておいた方が良かったと思いました。「進捗が遅れているとわかった時点で報告する」「遅れたタスクをいつまでに終わらせるのか・ヘルプが必要かどうか報告する」などより具体的な取り決めがあったほうが良かったです。

さいごに

チーム開発・プレゼンが終わった後にアプレンティス生から投票が多かったチームに「Best Student Award」、メンターから評価が高かったチームに「Best Award」送られるのですが、結果としてどちらもいただけることはできませんでした。
しかし、今回初めてのチーム開発をしてみてチームで開発することの楽しさ・難しさ・メリットなどを自身の体験を通じて知ることができたことは大変貴重な財産だと思います。
協力していただいたチームメンバー・開催していただいたメンターの方々に感謝し、また次回のチーム開発ではより良いアプリを制作できるようにがんばります！
以上がアプレンティスでチーム開発をした内容になります！