こんにちは。
私は現在、アプレンティスの5期生として日々プログラミングを学んでいます。

今回は、2回目のチーム開発で得たことをまとめました。

前回のチーム開発の詳細はこちら↓

簡単に自己紹介

2023年12月〜自分の得意を分析し、プログラミングの勉強を始める
2024年4月〜内定直結型エンジニア学習プログラム「アプレンティス」に参加
地方在住27歳社会人5年目。マインドミニマリスト。植物、テレビドラマ、コーヒーが好きです

プロダクト概要

まず、完成したアプリをご紹介します。
今回開発したのは、 逆再生恋愛シミュレーションゲーム、「evolA」 です。

このアプリは、話したいヒロインを選び、そのヒロインと会話を重ねて仲良くなっていきます。
しかし、肝心な場面でヒロインが 「逆再生」 で話しかけてくるという仕掛けが…！
その逆再生のセリフを聞き取り、適切な問いを選びながらお付き合いに発展するか、振られてしまうかを楽しむゲームです。

今回はゲームということもあり、「この機能も欲しいな〜」というような want の要素はまだまだありますが、必須である must な機能はすべて実装できたと思います。
いちユーザーとしても、体験的にワクワクするものが仕上がったのではないかと感じております。

2024-06-1418.03.04-ezgif.com-video-to-gif-converter.gif

それでは早速、一連の開発過程を振り返っていきます！

今回の開発スケジュール

期間	内容
6/17(月) - 7/7(日)	アイデア決め
7/8(月) - 7/21(日)	スライド作成、要件定義
7/22(月) - 8/11(日)	設計、タスク出し
8/12(月) - 9/1(日)	環境構築
9/2(月) - 9/8(日)	実装、プレゼン準備
9/8(日)	プレゼン

1.テーマ

今回のチーム開発は、アプレンティスの課題として経験させていただきました。
そのため、テーマも提示していただき、そのテーマが
『ワクワクするものを開発せよ』
でした。

チームメンバーは私を含めて4人で、前回と同じメンバーです。
全員、学習を始めて1年未満で、チーム開発の経験は今回で2回目。アプレンティスが始まってから、一緒に学習を進めてきた仲間たちです^^

2.アイデア決定の背景

"ワクワクするもの" というテーマをもとにチームでブレインストーミングをした結果、

新しい体験
ゲーム
この2つが共通のアイデアとして多く挙がりました。

そこから、メンバーの一人が「物語の結末が逆方向に進む」という映画作品のヒントを得て、逆再生恋愛シミュレーションゲームを作ることに決定しました。

5.使用技術

今回の開発に使用した言語・ツールは次の通りです。

フロントエンド：HTML / CSS / JavaScript
バックエンド：PHP / Laravel
データベース：MySQL
ソース管理：Git / GitHub

6.要件定義

続いて、システムとして必要な要件をまとめる、要件定義を行いました。
アクセスしたら開かれる スタート画面 、メインである 本編画面 、逆再生音声の練習である チュートリアル画面 の３つに分けて、要件定義を行いました。

P0：必須
P1：ここまで実装することを想定
P2：可能であれば実装したい

機能要件

スタート画面
- チュートリアルと本編への遷移(P0)
- BGM再生(P0)
- BGM音量調整(P0)
チュートリアル画面、本編画面共通
- BGM再生(P0)
- テキスト、選択肢、人物画像などの表示(P0)
- 逆再生音声再生(P0)
- 選択肢表示(P0)
- 逆再生音声をもう一度再生(P1)
- 画面切り替え時の暗転(P1)
チュートリアル機能
- 正誤による表示の分岐(P0)
本編
- ヒロイン選択(P2)
- 正誤によるシナリオの分岐(P0)
- そのほかの登場人物の音声(P2)
- 好感度ゲージ(P2)
- ヒント機能（逆再生文字(仮)）(P2)
- 音声なしテロップ(P0)
- チャプター毎にセーブ機能(AUTO SAVE)(P2)
- 場面ごとにBGMを変更(P2)
- セーブ、リスタート機能(P2)
その他
- 音量調整（BGMと逆再生音声）(P0)
- テキスト早送り機能(P0)

非機能要件

レスポンシブ対応はしない
新キャラ実装などの機能追加に備えて拡張性も考慮する

7.処理の流れ

大まかですが、今回のアプリの処理の流れは以下の通りです。

JavaScriptで、tutorial, start, continueのいずれのページが選択されたかを取得し、それに応じて背景画像を条件分岐で設定。他の表示データはDBからJSON形式で取得。

本編
　2. クリック操作により、DBから以下の情報を取得して画面に表示：
　テキスト（セリフや状況説明）、セリフを話すキャラクター名、キャラクターの画像、背景画像、選択肢フラグ、暗転フラグなど。
　ユーザーの選択によって、シナリオが分岐する。

チュートリアル
　2. データの取得処理は本編と同様ですが、シナリオの分岐はなく、選択肢フラグによって正解か不正解を表示し、次の問題に進む。

その他
　3. ページごとにBGMの変更、音量調整、テキストの表示速度調整などが行える。

ポイント
アプリの拡張性を考慮し、今後シナリオや登場人物が増えても容易に追加できるよう、ゲームの進行や表示切り替えの処理をオブジェクト指向を利用して設計しました。

8.実装

お待たせしました！
アイデア出しから始まり約2ヶ月半。たくさん準備を重ねてきました。
いよいよ実装です！

こちらでは、実装中に感じた良かったこと、苦労したことを記載します。

8-1.良かったこと

良かったことは、前回の反省を踏まえて行動を全て見直し、改善できたことです。
今回のチーム開発を始める前に、以下のルールを決めました。

要件定義とタスク分解を細かく行う！
開発期間中はボイスチャットを利用する！
チーム会の議事録を取る！
デザインは複数のプロダクトを参考にする！

具体的な改善点は以下の通りです。

要件定義とタスクばらしは細かく行う！（GitHubの使い方）

前回のチーム開発では、自分のリポジトリへのプッシュ経験しかなかったため、手探りで開発を進めることになり、予想以上に時間がかかってしまいました。
開発中に次第に慣れていったものの、ブランチの切り方やプルリクエストの作成・マージといった基本的な操作について、チーム内でルールを決めることもなく、「とりあえずブランチは切ろう」「ブランチ名は分かりやすくしよう」という状況でした。

そこで今回は、GitHubをフル活用することを決め、チーム内で以下のルールを設けました：

タスクや実現したい機能はIssuesに追加する。
Issues内で「must（必須）」と「want（希望）」の区別を行う。
ブランチを切るときはブランチ名の最初にIssuesの番号を記載する。
Projects内で自分のタスクを管理し、Todo、In Progress、Doneの各ステータスで進捗を徹底的に管理する。

これにより、 GitHub内だけ で誰が何をしているのか、何をどうやってくれたのかが明確になり、効率的なコミュニケーションと作業の集中が実現できました。

開発期間はボイスチャットを使う！（チーム会の頻度を上げた）

前回のチーム開発でも良い点として挙げましたが、今回は頻度をさらに増やし、毎晩チーム会を開催しました。
この会では、 チーム全員で現状の把握、認識の確認、困っている点、やりたいこと、改めてのタスク分担など を行いました。
メンバーの中には日中に仕事をしている人もいるため、夜間に開催しましたが、無駄のない効率的な会議を毎晩実施できたと思います。

チーム会の議事録を取る！

この作業はメンバーの一人にお願いし、徹底して実施してくださいました。

デザインは複数プロダクトを参考にする！

今回はノベルゲームということもあり、見た目のワクワク感、カラフルさ、豪華さ、ノベルゲームらしさが重要と考え、実際にノベルゲームを体験しながら参考にしました。
フォントの使い方、配置、画像の系統など、市場のプロダクトを参考にしました。
その結果、メンターさんから、「UIの完成度が高い」「キャラが可愛い」「見ていてワクワクした」といった高評価をいただきました！

8-2. 苦労したこと

次に、苦労した点についてです。

環境構築に抜け目があった

静的解析ツールの統一ができておらず、インデント幅の違いによって大きなコンフリクトが発生してしまいました。
これは完全に抜けでした。環境構築は、リポジトリの共有や言語のバージョンを揃えるだけでは不十分であることに気づかされました。
統一された開発環境を整える重要性を改めて感じました。

タスクに漏れがあった

設計段階でタスクを洗い出しましたが、まだ足りない部分が多くありました。
実際にノベルゲームを体験しながらタスクを挙げていたものの、開発期間中に「逆再生音声は何度も聞ける方が良い」「画面や場面が切り替わる時は暗転させた方が良い」など、UXの改善が多く出てきました。
開発初期の環境構築時に余裕があったため、もう少しUX部分を確認しておけば良かったと反省しています。

9.感想

2回目のチーム開発、お疲れ様でした！
まず、エラーなくしっかりと「ノベルゲームらしい」ものが完成したことに、チームメンバーに感謝します。
また、メンバー全員が前回のチーム開発の経験を活かし、Gitの使い方、チーム会の進め方、実務を意識した拡張性のある開発など、全員のレベルが上がっており、とても良い刺激を受けました。
今後のオリジナルプロダクトでも、今回のアプリのような高品質な見た目を取り入れていきたいと思います。

本当にありがとうございました！