目次
1. はじめに
今回は、チーム開発で取り組んだ内容についてまとめていきます。
2. プロダクトについて
このチーム開発のために、開始以前からメンバーと様々な案を出し合いました。世の中の役に立つアプリを作成したかったため、誰もが一度は忘れ物をしたことがあるだろうということで、「わすれん」という忘れ物チェックリストのアプリを作成することになりました。
使用した言語は以下の通りです。
| 開発領域 | 言語 |
|---|---|
| フロントエンド | HTML / CSS / JavaScript |
| バックエンド | PHP |
| データベース | MySQL |
3. チームと役割
チームメンバーの構成は、Rubyが得意なAさん、バックエンドが得意なBさん、フロントエンド歴1年の自分の3人でした。
それぞれの役割は以下の通りです。
| 担当者 | 役割 |
|---|---|
| Aさん | 要件定義、デザイン、フロントエンドの実装、プレゼン作成補助 |
| Bさん | 要件定義、ディレクトリマップ作成、データベース設計・作成、バックエンドの実装、プレゼン作成補助 |
| 自分 | 要件定義、ディレクトリマップ作成、データベース設計・作成、バックエンド補助、フロントエンド修正、プレゼン作成・発表 |
上記のような役割になったのは、Aさんの学んだ言語がPHPではなかったことと、Bさんがバックエンドが得意だったこと、自分がフロントエンドが得意だったという背景があります。話し合った結果、Aさんにはフロントに注力してもらい、自分はAさんのサポートに入りつつ、Bさんと一緒にバックエンドに取り組むことになりました。
4. 取り組みフロー
1. 要件定義
まずはメンバー全員で要件定義を行いました。アプリの大まかな利用方法を決めましたが、画面遷移などを具体的に考えたかったため、サイトマップの作成を提案しました。
作成の結果、アプリの構造を可視化でき、より具体的にアプリの構成を検討することができました。
また、コア機能はチェックリストの作成・編集・削除ですが、ユーザビリティの高いアプリにするため、カテゴリー分けとリマインド機能もつけることになりました。
2. データベース設計・作成
データベースを作成するために、Bさんと自分でテーブルを設計しました。
この設計に基づいて、Bさんと話し合いながら自分の環境でデータベースを構築しました。
3. プログラムの実装
アプリの仕組みをBさんに検討いただいた結果、フロントエンド（HTML, CSS, JavaScript）とバックエンド（PHP, MySQL）のやり取りをAPIを通して行う構造になりました。
| 機能 | 役割 |
|---|---|
| フロントエンド（HTML, CSS） | 見栄え |
| JavaScript | フロントエンドとバックエンド（API）をつなぐ。APIと通信し、データをやりとりする。 |
| PHP | API。データベースとやりとりし、APIとしてフロントエンドにデータを渡す。 |
| MySQL | データベース |
実際のディレクトリ
src/
├─ front/
│ ├─ css/
│ │ ├─ add_or_edit.css
│ │ ├─ category.css
│ │ ├─ checklist.css
│ │ ├─ item.css
│ │ ├─ login.css
│ │ └─ style.css
│ ├─ html/
│ │ ├─ add_category.html
│ │ ├─ add_checklist.html
│ │ ├─ add_item.html
│ │ ├─ category.html
│ │ ├─ checklist.html
│ │ ├─ edit_category.html
│ │ ├─ edit_checklist.html
│ │ ├─ edit_item.html
│ │ ├─ login.html
│ │ └─ signup.html
│ ├─ img/
│ │ ├─ favicon.png
│ │ └─ logo.png
│ └─ js/
│ ├─ add_category.js
│ ├─ add_checklist.js
│ ├─ add_item.js
│ ├─ auth.js
│ ├─ category.js
│ ├─ checklist.js
│ ├─ item.js
│ ├─ login.js
│ ├─ notification.js
│ ├─ script.js
│ └─ users.js
└─ public/
├─ api/
│ ├─ add_categories.php
│ ├─ categories.php
│ ├─ checklist_items.php
│ ├─ checklists.php
│ ├─ db.php
│ ├─ items.php
│ ├─ login.php
│ ├─ reminders.php
│ └─ users.php
└─ test_db.php
実際のデータベース
/* テーブル一覧 */
+-------------------+
| Tables_in_wasuren |
+-------------------+
| categories |
| checklists |
| items |
| users |
+-------------------+
/* categoriesテーブル */
+----+----------------------------------+---------+---------------------+--------------------+
| id | name | user_id | created_at | guest_id |
+----+----------------------------------+---------+---------------------+--------------------+
| 1 | 旅行 | NULL | 2025-03-14 22:10:16 | guest-ed9dfbbe8f96 |
| 2 | 料理 | NULL | 2025-03-14 23:02:37 | guest-cdf30b9d0ff9 |
/* checklistsテーブル */
+----+-----------------+---------------------------+---------------------+-------------+----------+---------------------+------+
| id | name | description | created_at | category_id | guest_id | reminder_at | seen |
+----+-----------------+---------------------------+---------------------+-------------+----------+---------------------+------+
| 27 | クリスマス | クリスマスの準備 | 2025-03-22 21:53:30 | 43 | NULL | NULL | 0 |
| 28 | お花見 | 公園にお花見に行く | 2025-03-22 21:56:31 | 43 | NULL | NULL | 0 |
/* itemsテーブル */
+----+------------------+--------------+---------+---------------------+----------+
| id | name | checklist_id | checked | created_at | guest_id |
+----+------------------+--------------+---------+---------------------+----------+
| 18 | スマホ | 26 | 0 | 2025-03-22 22:01:01 | NULL |
| 19 | 筆記用具 | 27 | 0 | 2025-03-22 22:02:33 | NULL |
+----+------------------+--------------+---------+---------------------+----------+
/* usersテーブル */
+----+-------+-------------+--------------------------------------------------------------+---------------------+
| id | name | email | password | created_at |
+----+-------+-------------+--------------------------------------------------------------+---------------------+
| 2 | ccc | c@c | $2y$10$g9BMwFZPwlN.MGCKzXSJweNuKNk2XL284ThOQpepm7f6mp8HPP8Lm | 2025-03-14 21:54:24 |
| 3 | gg | g@g | $2y$10$O/y7ijwUEUnILkwIpVQekeefnAEInZCYYLK3e9itoOx1VYuJZ81rq | 2025-03-15 13:55:40 |
- フロントエンド
フロントの作業は、AさんにFigmaの使い方を教えたりデザインのテンプレートを渡したりしました。コーディング作業も分からないことがあったら自分に聞いてもらうようにしました。デザインもコーディングもAさんが頑張ってくださったため、配色や要素の配置など、細かい修正はチーム全員で考えました。コーディングは、Aさんの分からなかったところや修正、最後の仕上げを自分が行いました。
- バックエンド
バックエンドはBさんと一緒に取り組みました。Bさんがバックエンドが得意だったため、Bさんが内容を考え、自分が手を動かしました。分からないところはBさんに教えてもらい、エラーが出たら一緒に原因を探りました。最終的にはBさんに仕上げていただきました。
また、それぞれが作成したファイルはGitHubで共有しました。
4. プレゼン
今回は自分がプレゼンを担当しました。プレゼンの構成を考えるところからスライドの作成まで行いました。スライドの細かい文言などはメンバーと一緒に考えました。
5. 「わすれん」について
「わすれん」は忘れ物チェックリストのアプリですが、カテゴリー分けの機能とリマインダー機能がアプリの特徴となっています。以下はアプリの利用手順です。
1. カテゴリー作成
1) トップページからSign Upボタンをクリック。サインアップ画面でユーザー登録をし、ログイン画面に遷移。
2) ログイン画面でユーザーログイン。トップページ(カテゴリー一覧画面)に遷移。
3) トップページのAdd Categoryボタンでカテゴリー作成。カテゴリー作成画面に遷移。
4) カテゴリー作成画面でカテゴリー作成。トップページに遷移。
2. チェックリスト作成
1) トップページから、作成したカテゴリーをクリック。チェックリスト一覧画面に遷移。
2) チェックリスト一覧画面でAdd Checklistボタンをクリック。チェックリスト作成画面に遷移。
3) チェックリスト名、概要をそれぞれの欄に記入。任意でリマインダー日時を指定し、Add Checklistボタンをクリックでチェックリスト作成。チェックリスト一覧画面に遷移。
3．アイテム作成
1) チェックリスト一覧画面からチェックリストを選択。アイテム一覧画面に遷移。
2) アイテム一覧画面でAdd Itemボタンを選択。アイテム作成画面に遷移。
3) アイテム作成画面で任意のアイテム名を記入し、Add Itemボタンをクリック。アイテムを作成し、アイテム一覧画面に遷移。
4. 編集機能
カテゴリー一覧、チェックリスト一覧、アイテム一覧画面のそれぞれに編集ボタンが付いており、選択したカテゴリー、リスト、アイテムの書き換えを行うことができます。
- 例）チェックリスト名を編集する場合
1) 編集したいチェックリストのEditボタンをクリックし、新しいチェックリスト名を入力。入力後、OKボタンをクリック。
2) チェックリストの説明も入力し、OKボタンをクリック。
3) 変更内容が反映されます。
5. 削除機能
カテゴリー一覧、チェックリスト一覧、アイテム一覧画面のそれぞれに削除ボタンが付いており、選択したカテゴリー、リスト、アイテムの削除を行うことができます。
- 例）カテゴリを削除する場合
1) 削除したいカテゴリのDeleteボタンをクリックし、ポップアップのOKボタンをクリック。
2) 変更内容が反映されます。
6. リマインダー機能
チェックリスト作成画面で、任意でリマインダーを設定することができます。好きな日時に設定することができ、指定された日時になったらアプリ内でリマインダーのポップアップ画面が表示されます。
7. ログアウト機能
画面右上のLogoutボタンからログアウトができます。
6. 振り返り
今回の取り組みの良かった点と反省点を考えてみました。
良かった点
全体的にコミュニケーションがよく取れていた
お互いの作業内容を把握できていた
打ち合わせの回数や同時に取り組む回数が多かった
機能や見栄えについて、メンバー全員で何度も意見を出し合いながらブラッシュアップをすることができた
自分の強みを活かせた
反省点
要件定義を徹底するべきだった
要件定義の内容をきちんと文書としてまとめておくべきだった
最初の認識合わせ・コミュニケーションが不足していた
担当する作業内容が偏っていた
個人的に、バックエンドにほとんど貢献できなかった
7. おわりに
今回は、チーム開発で取り組んだ内容についてまとめました。
個人的には、これまでチームで取り組むことはフロントエンドの業務上ではありましたが、バックも含めて本格的にチームで一からプロダクトを作るのは初挑戦でした。
要件定義も初めて行いましたが、このチーム開発を通して要件定義の重要性を痛感しました。
チームとしては、メンバー全員が初めてのチーム開発でしたが、コミュニケーションは比較的取れていたのではないかと思います。
それでも、最初のすり合わせの際に認識の齟齬が生じていたため、次回はより徹底しなければなりません。
また、次のチーム開発ではメンバー全員でバランスよく作業を分担できるようにしたいです。
そのためにも、自分自身がバックエンドの学習を深める必要があると思いました。
以上になります。
最後までご一読いただきありがとうございました。