はじめに

はじめまして、私は現在アプレティスシップ三期生として、エンジニアを目指して学習させて頂いているMatsudaです。

今回はアプレンティスシップの学習の一環として『自分たちの役に立つもの』をテーマにチーム開発が行われました。
プロダクトをチームで６週間かけて考え、１週間で実装をし、その後に３分間のプレゼンを行う、といった内容です。

私たちのチームは全員が開発未経験で、プログラミングの学習も数カ月の３人だけです。
今回の記事は、そんな何もわからない状態でのチーム開発の経験を振り返り、まとめたものです。
初めてのチーム会から、順を追って記載していこうと思います。

1.アイデア決め

プロダクトマネージャー

まずチーム開発の三人組が決まってからは最低週２回以上のチーム会が行われます。

そのチーム会での決定を期限内にまとめる役として、持ち回りでプロダクトマネージャーを決めるようにとのことだったので、初めの２週間に行われるアイデア決めのプロダクトマネージャーは私が受け持つことになりました。

初めてのチーム会はプロダクトマネージャーを決めた後で、次のチーム会までに各々が『解決したい課題』や『課題を解決するプロダクト』を持ち寄る。といったことを決めました。

その後は雑談や自己紹介をして初めてのチーム会を終えました。

Notion導入

私は次のチーム会までに議事録として使えるものが欲しい。と思い、検索をしたところNotionを導入することを決めました。(Notionにした決め手はリアルタイムで互いの編集を画面共有できる所です)

チームメンバーの方に登録のお願いと、使用したメールアドレスを教えてもらい、自分が作成した開発用のNotionに招待をし、共有しました。

結果的に早い段階でNotionを導入し、情報共有ができたのはチーム開発をする上でとても有効だったと思います。

アイデアの決定

次のチーム会には様々なアイデアが出されました。
多数決により、最終的に残った二つはどちらも学習の課題を解決するもので、

プログラミング関係の学習ができるタイピングゲーム(できればクイズも入れたい)
ChatGPTによる問題生成で毎日学習ができるアプリ

となりました。

この二つが自分たちで実装できるかどうか、その判断が経験のない自分たちには非常に難しかったのですが、以前自分がアプレンティスシップを運営している山浦さんに会った時に聞いた方法である、

『要件を細かく分けて、一つ一つを実現可能か判断する。』

を実践した結果、作成するのは

プログラミング学習のタイピング型クイズゲームに決定しました。

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　(※画像は完成した物です)

インセプションデッキ(コンセプトと価値提供)

アイデア決めの最後の日には、決定したアイデアのイメージをチーム内で共有するためにインセプションデッキを行いました。
その中の一つ、エレベーターピッチ(一文で伝えられるコンセプト)から抜粋します。

コンセプト

プログラミング×タイピング×クイズ
このアプリは全てのプログラミング学習者に向けて作られたものでその学習者のレベルに合わせた難易度の問題が出題される

ユーザーへの価値提供

既存のアプリとの差別化として隙間時間に学べる手軽なアプリ
楽しんでプログラミング学習・遊んで学習

2.スライド作成、設計

プロダクト名決定

プロダクト名は『Function×Quizふぁん×くいず』となりました。

スライド作成

何を作るかは決定したのですが、どんな画面で、どういった流れでゲームが進むのか、など細かいところではチーム内でイメージを共有できていません。

そのイメージを共有するために新しくプロダクトマネージャーとなったチームメンバーがスライドのたたき台を作成してくれました。
デモストーリー内のプレゼンでゲームの流れがわかるようになっています。

私たちはその内容についてこうすると良いのではないか、この機能は必要か、解説は後で表示した方がいいのではないか、などを話し合って修正していきました。

設計、タスク出し

ここから制作に向けての具体的な内容となっていきます。
制作の中で不安があったのは大きく分けて

画面をどうやって遷移するか
制作をどうやって分担するか

といったことがありました。

画面をどうやって遷移するか
全員が初めてのことなので普通はどうするのかがわからず、私は試しにAjaxのHTTPリクエストを使用して画面を変更することを試したのですが、上手くいきませんでした。
シングルページアプリケーションとはなりませんが、HTMLのaタグの値渡しを使用することを提案し、とりあえずそれで一旦ゲームを通そう。ということになりました。
制作をどうやって分担するか
タスクを洗い出すと、この部分とこの部分は同じ人が担当した方が効率がよい。といった仕事があることに気づき、また学習のためにも一通りを自分でやってみる、という意見もあったので、大まかにページごとで仕事の担当を割り振ることとしました。

私はゲーム部分の担当をやらせてもらうことになりました。

3.試作品、デザインカンプ

試作品作成

ゲーム部分の担当と決まった後で、実際にどうすればクイズを動かすことができるかを試し、またチームの認識を共通のものとするために個人的に試作品を作成しました。

音楽や効果音など、話していた機能を最低限つけたクイズゲームです。
次のチーム会でメンバーの方に見てもらいました。

デザインカンプ

試作品を見てもらおうと思っていたチーム会で、チームメンバーの方がデザインカンプを作成してくれており、共有してくれました！

具体的な形として見ることでイメージがハッキリとし、モチベーションも上がりました。

その後、Notionを使ってそれぞれのタスクをガントチャートとして作成をしました。
実際の開発でどのような壁があるかわかりませんでしたが、できる限り万全の状態で開発に臨むことができたと思います。

4.実装

チーム会、もしくは黙々会(会話をしたいときだけミュートを外しながら作業するチーム会)を毎日夜に行うことを決めて、実装を始めました。

画面部分

私はまず画面つくりから始めました。
試作品を一度作ったことと、デザインカンプのおかげで基本的な画面は一日で作成できました。
背景の画面は一度は画像サイズそのままで作成をしたのですが、小さく感じたので画像を横に引き伸ばしたゲーム画面をチームメンバーに見比べてもらいました。
結果、画像を少し横に引き伸ばした画面構成に変更をしました。

音声部分

BGMのアイコンクリックでの切り替えは他のチームメンバーが作成してくれたものを共有させてもらいました。
効果音やクリアの際の音楽は自身で関数を作成しました。

クイズ部分

問題はチームメンバーが作成するデータベースから引き出して表示をする予定でしたが、とりあえず作動確認のために自分で作成した問題、答えの配列をJavaScript上で使用していきました。
試作品で使用したものとほぼ同じなのでこちらもスムーズに作成できたのですが、後のアニメーションを導入する度、真っ先に表示されなくなる部分でした。

制限時間部分

制限時間自体を作るのも簡単でした。
しかしこちらもアニメーションを入れると時間が動かなくなったりとエラーの影響が出やすかったです。
また時間切れとなると問題が２問進んでしまうなどの挙動をしてしまう問題がありました。
デバッグを使用し、原因を突き止めると、タイマーが０秒でも作動しており、if文を２回通ってしまうことが原因だったので、タイマーを停止してから関数を呼び出すことで修正しました。

アニメーション部分

背景画面全体と制限時間を表す導火線が常に動いており、そのアニメーション一つだけならば簡単に動かせるのですが、他のレイアウトとの兼ね合いなどで実装をすると必ず問題が起こりました。
奥移動と横移動のアニメーション自体はチームメンバーの方に作って頂いたのですが、実装をする度に何が問題なのか特定するのに時間がかかりました。

修正、連携、追加作業など

これらの間にチーム間で互いの画面を見せ合い、話し合い、修正を加えていきました。
私の部分では制限時間を少し長くする。導火線を長く、ロゴを小さくする。などの指摘を頂き修正。

また値渡しによる連携を使って問題文の切り替えや、結果発表で使用される正誤を表す文字列などもメンバーのおかげで問題なく連携できました。

作っているうちに自分でこうした方がいいのではないかと思い、背景が切り替わるのを問題に正解した時だけにする、全問正解の時だけレベルアップの文字が表示される。などを実装した試作品を共有し、許可をもらってからマージしていました。

プレゼンテーション

六日目にはほとんどの機能が完成し、他のチームメンバーが作成したページとの連携も問題なくとることができました。
最後の一日はプレゼンテーションに時間を当てることができました。
何度もチームメンバーにプレゼンの確認をしてもらい、見せ方を研究したのですが、私が使用しているGoogleスライドではプレゼン資料のフォントが反映されていないことにチームメンバーが気づいてくれました。

しかし、チームメンバーの一人は資料のフォントを修正し、一人はトップページのデザインをより良くする修正をしてくれたおかげで、私自身はプレゼンテーションの練習に専念させてもらえることになりました。
本当にメンバーの方には感謝しかありません。

5.結果

直前までプレゼン練習を続けているとZoomが始まり、画面をトップ画面に戻しておくのを忘れたまま本番に挑むという痛恨のミスをしてしまいました。本当に申し訳ありません。

プロダクト紹介としては問題なく説明することはでき、
受講生の投票で決まる"Best Student Award"を授与させて頂きました。

6.まとめ

よかった点

SPAなどの実装を諦めたため、実装自体は余裕を持って行うことができたと思います。
実現の仕方は当初の予定と異なりますが、チーム会で決めた搭載機能はほとんど搭載できました。
チームメンバーと小まめに連絡を取り合い、互いに改良、修正を行い続けることができました。

課題点

コードは評価されずに、プレゼンのみで評価を決めるということでしたので、もし実装ができたらしたいと思っていたSPAの実装。データベースの実装をせずに、デザインやアニメーションなどに力を入れました。
残りの期間を考えたうえでの判断でしたが、学習として考えると、新しい技術をどんどん取り入れていくべきだったかとも思います。
アニメーションを導入するたびに問題が起こっていたのですが、自分のHTMLやJavaScriptの仕組みが悪いのではないか、もっと問題が起きにくいコードにできたのではないかと思いました。
プレゼンテーションにおいて、プレゼンする直前の時間というのは重要だと身に染みて理解しました。

得られたもの

実際にチームで開発をするという貴重な経験を得ることができました。
チームメンバーからスライドの使い方やCDNサイトなど様々なことを教わりました。
チームの目標であった賞の授与を達成できたことは本当に嬉しかったです。

7.終わりに

ここまで読んでいただきありがとうございます。

今回、はじめてのチーム開発をして、様々な経験をさせていただきました。
チームでの利点はもちろん、チームだからこそアイデアやイメージの共有に工夫が必要だったり、私がコンフリクトを起こして迷惑をかけてしまったこともありました。
しかしチームが、互いにより良くしようと話し合える環境ならば、一人で作るよりもずっと良いものが作れるようになると、チーム開発を行って実感しました。

また、この記事を書いていて、あの時は本当に何もわからなくて不安だったと思い出し、自身も確かに成長していると思いました。

次のチーム開発では、今回の、『納期を気にし過ぎていて新しいことに挑戦できていなかった』という反省点を活かして、新しい技術に挑戦しながら納期を守れるようにしたいと思っています。