🍓

チーム開発からプレゼン発表まで [BEST AWARD受賞]

2024/04/02に公開

Next.js

はじめに

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

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

チーム開発の概要

スケジュール
- 2/5〜3/31 (実装期間は最後の1週間のみ)
主な要件
- 「ワクワクするものを開発せよ」
- ベースとなる技術は HTML/CSS/MySQL/Rails or Laravel/React or Next.js(必ずしも全ての技術を使う必要はない)
- ローカル（手元のPC上）で動くようにしてください

開発したアプリについて

サービス概要

あなたの気分にぴったりの音楽を届ける「MOOD TUNE」というアプリを作成しました。
キャッチコピーは「ワクワクを最速で」です。

はじめに、なりたい「気分」を選択します。
そして、「ジャンル」を選択すると、その時の気分にあった音楽をレコメンドしてくれます。
また、曲再生時の背景は、アルバムの画像の色を抽出してアニメーションが動きます。そのため、曲と親和性のある背景で音楽を楽しめます。

下記は実際にローカルで動かしているデモになります。

開発背景

まずチームメンバーから「その時の気分に応じた曲をおすすめしてくれるアプリはどうか？」という案が上がりました。確かにいつも使っている音楽アプリにも「Get Up」や「Chill Mix」といった気分に応じた再生リストというものはあります。しかし、更新も1週間に一回だし、さまざまな気分に対応できていないので、もっと柔軟かつサクッと使えるようなレコメンド機能が欲しい！とメンバーとも話しました。
そこで、今回のアプリを開発するに至りました。

開発準備

アイデア決め
インセプションデッキ
要件定義
スライド作成
設計
技術アーキテクチャ
デザイン検討
タスクばらし
環境構築

上記のような流れで開発の準備は進めました。
開発準備期間はチーム会を週に2回開催して、計画的に進めることができました。

またチーム会では毎回「Good&NEW」を実施するようにしました。「Good&NEW」とは24時間以内にあった良かったことや新しく発見したこと(ジャンル問わず)を発表する施策のことです。
チームメンバーとの雑談を増やすことでメンバーの考え方などを知ることができてコミュニケーションが密になったと思うので実践して大変良かったです。

開発準備期間の課題や解決策について

要件通りに実装できるのかわからない
　当初はopenAIのAPIを使って、ユーザーとチャットをしてもらって感情を聞き出し、感情を数値化してspotifyのAPIのGetRecommendation(特定の音楽基準や好みを指定して曲を取得できるエンドポイント)に渡す予定でした。
　しかし、この機能を1週間で実装できるかどうかさっぱりわからないので、当たりをつけるためにチームメンバー個々人で3日間ほど調査をしました。実際に調べたりAPIを叩いてみたりしたところ、openAIを使って感情を数値化して、GetRecommendationに渡す方法がわからずその機能は断念することにしました。
代替案として、「元気」や「泣ける」などの感情ボタンを作って、事前にGetRecommendationに渡す値を決めることにしました。
結果として実装期間中は実装方法で迷わずに進めることができたので、いい判断ができました。

実装期間

いよいよ1週間の実装期間が始まりました。
実装期間は、毎日朝会(9:00〜)と夜会(21:00〜)を開催しました。
朝会で今日一日何をどこまでするのか宣言をして夜会でその報告をすることで、開発の具体性を持たせることができました。また、コミュニケーションも円滑になったので、朝会夜会を実施して大変良かったです。

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

GitやDockerでエラーが発生
　チームメンバーの開発環境にてGitやDocker周りで何度かエラーが発生して解消に時間がかかる場面がありました。実装期間前にGitについてはGitHubフローに従って開発をしましょうという話になり、画面共有をしてGitの使い方を実践しました。ただ、さらっと流した程度だったのでドキュメントにどのような流れでGitの操作をするのかもっと具体的にしておいた方が良かったと思いました。
　また環境構築は私がしたのですが、Dockerについても少し理解が足りなかったと感じました。yarnでパッケージ管理しているプロジェクトで、node_modulesを共有していない場合（通常しないと思いますが）、既存プロジェクトをcloneなどで取得してきた場合、docker初回起動時に、「next: not found」のようなエラーが出力されます。
yarnやnpmでパッケージ管理しているプロジェクトをチーム開発することは初めてだったので、そのような事象が発生するとは思っていませんでした。
結果的に、docker-compose up -dする前に、docker-compose runコマンドを実行して、依存パッケージをインストールすることで解消できました。
チーム開発をしてみないとわからないことも多くあるので大変勉強になりました。
認証機能を実装するのかどうか
　spotifyのAPIではOAuth 2.0ベースの認証機能を使っており、リフレッシュトークンを作成してトークンを更新する機能を作るのかどうか迷いました。チームメンバー3人ともOAuthの認証は実装したことがなく、コア機能の実装を優先したかったので結果的にはOAuth認証は切り捨てました。
spotifyのAPIを叩くときは公式ドキュメントからアクセストークンをコピペして、リクエスト時のAuthorizationに貼り付けるようにしました。(1時間に1回手作業で更新が必要ですが笑)
結果的に、コアのレコメンド機能に時間をかけることができたのでいい判断だったと思います。
曲のレコメンドリスト、ガタつき問題
　spotifyのAPIを叩いて曲のレコメンドリストを表示する際に時間がかかってしまい、曲のリストとそのほかの要素で表示されるタイミングが異なるため画面がガタついてみにくい事象がありました。
そこでLoading画面を作成することを提案して、解消することができたので良かったです。
また、プレゼン後もユーザービリティを考慮した実装ですね。とお褒めの言葉を頂けたことは大変嬉しかったです。

最後に

今回は、アプレンティスでの2回目のチーム開発となりました！
前回のチーム開発で課題だった「コミュニケーション不足」や「タスクの管理不足」などを解消してより良いチーム開発となりました。また、今回も新たに課題が出ましたが、それはそれで良い経験となったのでオリジナルプロダクトの作成など今度に生かしていきます！👍

アプレンティス生から投票が多かったチームに「Best Student Award」、
メンターから評価が高かったチームに「Best Award」送られるのですが、
今回は「Best Award」をいただくことができました🎉🎉🎉🎉
本当に一緒に開発をしてくれたメンバーには感謝したいと思います！！ありがとうございました！