こんにちは。あがさんです！！
私は現在アプレンティスというオンラインのエンジニア学習サービスに参加させていただいております。
学習プログラムの中にチーム開発というプロジェクトがあり、私たちはYaloopとタスク管理アプリを作成しました。今回は無事チーム開発（第一弾）が終了できましたので記事にまとめていきたいと思います。(少し冗長ですがご了承ください)
結論: めちゃめちゃ楽しかった!!!!
何より新鮮で有難かったのは、独学では叶わなかったチームメンバーと一緒にゼロベースからアプリを制作する体験ができた事です。
制作したアプリ: Yaloop
先にどんなアプリを作ったのか説明させていただきます。
-
目的:
→ 日々の学習記録を可視化して、簡単に記録するアプリです。
-
コンセプト:
→見ただけで使えるシンプルタスクアプリ
-
機能&仕上がり:
→タイマー、レポート、グラフの３つの機能に絞り込み、ページ遷移なしでタスク開始から日報作成までを行えるように設計。デザイン面もmoneytreeなどの財務系、レポート系サービスを参考に作りました。
使い方
①Add your taskにタスク内容入力しStartボタンを押下
②タスクが終了したら、Stopボタンを押下。右側にタスク名と取り組んだ時間が表示される
③最後にテキストボックスでコメントも入れて、Saveを押下。DailyReportとしてDBに保存されます。
自分が担当した作業箇所
・アプリの画面レイアウトとUIデザイン
→上記の類似サービスからUIデザインやフォント、配色を参考にして一画面に収まるようレイアウトを考えました。難しかったところはシンプルデザインがテーマなので、可能な限り主張が少なめなフラットデザインでアクセントカラー以外はグレーを基本としました。他のメンバーの画面でどのよう映っているか確認しながらサイズや余白の間隔を調整しました。
・右側のレポート画面の表示
→ タスクが追加される度にレポート欄を圧迫して下部のテキストボックスなどを押し出してしまうので、タスクの数が増えるごとにCSSクラスのフォントサイズが小さくなっていくようJavaScriptファイル側で処理しました。
また視認性が上がるように、偶数番目のタスクに対しては背景色を暗いグレー、文字の色をホワイトになるようにも処理をしました。
テキストボックスはシームレスな操作を目指して、エリア内をタッチすると編集が行えて、欄外をクリックすると通常のテキスト表示に戻るように設計しました。
チーム開発の進め方
ではここからチーム開発についての振り返りをスケジュールに沿って説明させていただきます。
アプレンティスでは２週間ごとに個人課題を提出していく提出クエストと並行してチーム開発をゆっくり進めて行きます。今回の開発期間は7/8~9/7までで9/8がプレゼン当日となります。
2週間ごとスケジュール
| 期間 | 内容 |
|---|---|
| 7/8(月) - 7/21(日) | 自己紹介、アイデア決め |
| 7/22(月) - 8/4(日) | スライド作成、要件定義 |
| 8/5(月) - 8/18(日) | 設計、タスク出し |
| 8/19(月) - 9/1(日) | 環境構築 |
| 9/2(月) - 9/8(日) | 実装、プレゼン準備 |
| 9/8(日) | プレゼン |
| 9/9(月) - | ブログ記事にチーム開発のことを記載する |
自己紹介、アイデア決め
- まずメンバー同士で自己紹介をしました。今までの経歴、ライフスタイル、趣味の話をして打ち解けました
- アイデア出しはアプレンティスの学習で困ったことや快適にしたいことなど様々でしたが、今回は毎日の日報(アプレンティスコミュニティ内で自分がどんな事を何時間勉強したかを報告すること)を一部自動化するためにタスク管理アプリを作成することに決定しました。
- コンセプトは
simple is best。 見ただけで使い方がわかるアプリです。
スライド作成、要件定義
- スライド作成で意識したことはスライドの分量です。制限時間がアプリの実演を含めて5分なので、ハッカソンのプレゼン動画を参考に可能な限り要点だけに絞りました。
- 要件定義はこの後のデータベース設計にも関わる重要なポイントでした。何が必要で、何が必要ないデータなのかを精査しました。
- 私たちはシンプルなユーザーアクティビティをテーマに要件定義を進めました。
タスクを入力してStart→タスクが終わればStop→レポートのテキストボックスを編集→Saveで完了
この一連の流れが一目で見て分かるように機能配置もこの段階から考え始めました。
設計、タスク出し
- データベース設計は実際に手を動かす工数や取り扱うデータの種類に直結します。ユーザーテーブルの設計も議論に上がりましたが、最終的にデフォルトユーザーを１人に固定して動かす事を最優先したことでメイン機能の実装に集中できました。
- タスクの出しは重要です。メンバー全員がそれぞれ干渉することなく作業ができるように振り分ける必要があるからです。
環境構築
- DockerでRuby3.2.2とMySWQLの開発環境を構築。
- Ruby on Railsの使用が禁止されていた為、サーバーサイドのやり取りをするためにWEBrickとGemライブラリを導入しました。
- githubでレポジトリを共有は3人とも初めての作業でした。作業環境を統一させるためにDockerの設定やMySQLのエラーの見直しに時間がかかりました。.gitignoreファイルの設定など見直してレポジトリにアップロードする内容を精査する必要がありました。
実装、プレゼン準備
- 3人が別々の作業を進めていると、主要ファイルには毎回コンフリクトが起こっていました。慣れてくると自分も相手も同じファイルに追記してたので、あとでコンフリクト対処する必要があるなと予見できるようになりました。
- 私の担当したフロントエンドの作業は一旦ダミーデータを使って進めました。本番環境時と同じ形式のJSONデータを直書きして右側のレポート画面にタスクと時間が出力されるか確認するのに役立ちました。バックエンドと切り分けて作業を進める時におすすめです。
- プレゼンの練習は大切です。自信のあるスピーチ、端的な説明、分かりやすくスムーズな実演、本番直前まで練習しました。せっかく頑張って作ったサービスなのですから全力でプレゼンできるように準備しましょう。
チーム開発での取り組み方・コツ
-
プロジェクトリーダー
→二週間ごとにプロジェクトリーダーを持ち回りしました。ミーティング前に簡単な下調べと終わった後の議事録を作成することが主な役割でした。ミーティング中は意見交換が活発なので特にリーダーが指揮をする必要もなかったと思いました。ただ最後に議事録と次回やることを書き起こしてくれたことで、翌日以降の振り返りにすごく役立ちました。 -
good and new
→ 1on1やミーティング前にアイスブレイクとしておこうコミュニケーション手法です。ミーティング当日中におきた良い事と新しい事を発表しあいます。全くミーティングに関係ない話の方が盛り上がったりするのでホントに何でもOKです！ -
インプレッションデッキ
→10個の質問に回答していくことで自分たちが取り組むプロジェクトの目的やコンセプトをはっきりさせることができました。メンバー全員が共通認識を持つことでアイデア出しから設計、実装、プレゼンまでブレることなくプロジェクトに向き合うことができます。
良かった点
呼び名：
→ チームメンバー同士で呼び方を決めました。私が最年長(34歳)でもあったので自分から阿川ではなくあがさんと呼んで欲しいと提案しました。今ではショウタ、ハルキ、あがさんで呼び合っています。呼び名を決めたことで今回のチーム開発においては、お互いのコミュニケーションのハードルをぐっと下げることができたと思っています。その後の開発を好転させた良いターニングポイントだったと思っています！！
イメージボード：
→ Appleのイメージボードというアプリを使って、同じボードを共有しながらアイデアをどんどん出していきました。言葉だけのやり取りだとイメージのすり合わせが難しいと思い導入しました。
矢印やイラストをどんどん追加したり動かしたりしながら、思い浮かぶアイデアを目にみえるカタチで落とし込むことができました。下記の写真は当時作ったイメージ図です。イメージ段階でほぼ完成版に近い状態まで考えることができました。
周囲にもいろいろ考えを書いてあります。
開発期間中はDiscordに常駐：
→ ボイスチャットを開いて作業をしていることが多かったです。私は仕事で日中は参加することができなかったのですが、他の二人はずっと常駐して絶えず相談していました。気軽に相談できる相手がいて本当に助かりました。
困った点・次回に活かしたい点
自分自身で歯痒く感じた点がDockerを含めた環境構築とバックエンド仕組みを正確に理解できていなかった事です。
入力したデータが保存される仕組みや、保存したデータを呼び出すコードに対してなかなか手を付けられませんでした。実際の開発であれば保守・運用でリファクタリングをする事が考えられますので、自分の担当以外のコードに対しても把握してアイデアを出せるによう努めていきたいと思います。
自分の強みを見つけましょう (すごい大事)
「 チームの雰囲気をよくしてくれる 」 これが私の強みです!!
エンジニアとしてはもっと自分に技術的な強みがあると格好もつくのですが、褒めてもらえるということは本当に有難いことです。
確かにこの点については学生時代の友人や職場の方からも褒めていただくことが多く
自分の強みを再認識する良い機会になりました。
将来的にこの強みを活かしWebエンジニアとしても自己研鑽に励みながら、周囲の人たち、後輩、初学者の方をサポートできるような人物になりたいです。
なぜなら今回のYaloopのメンバー同士でサポートし合いながらアプリを作っていくことがとても楽しくて、大変で、難しくて、何より充実していたからです!! 自分が周囲の方々からたくさんサポートを頂いたように、今度は自分が誰かをサポートできるように頑張っていきたいと思います
結論: めちゃめちゃ楽しかった!!!!(2回目)
いかがでしたでしょうか。
我ながら、なかなか濃密な二ヶ月間だったと思います。
アプレンティスの学習期間中にチーム開発を経験できたので、コーディング以外の企画からプレゼンまで開発全体の見通しを持てるようになりました。
最初のうちは個人の提出課題や現職の勤務を並行しながら週２のミーティングは大変でした。ただ回を重ねるうちに集まるのが楽しくなり、メンバー2人にはプライベート相談にも乗ってもらいました。
学生時代のような体験ができて本当に感謝しております！！最高でした。
本当にありがとうございました！！！！
~Qiitaの歴史がまた1ページ~
チームメンバー：
関連リンク：