MicroAd Developers Blog

マイクロアドのエンジニアブログです。インフラ、開発、分析について発信していきます。

22卒の開発研修でMVP投票システムを作った話

初めに

初めまして、マイクロアドの2022年新卒チーム(高橋id: tkhs_t, 渡部id: S8s8Max)です。

この度私たちは、新卒開発研修で「MVP投票システム」を作成しました。 今回の技術ブログでは、上記の2人でMVP投票システムを作り上げた過程を紹介していきます!

開発研修について

まずは、マイクロアドの研修制度について説明します。 マイクロアドのエンジニア職の新卒研修には、講義研修と開発研修があります。

講義研修では、先輩社員の講義を聞いて課題をこなしていく研修で、開発研修は新卒社員のみでプロダクトを開発していく研修です。 開発研修の期間はおよそ2ヶ月です。 サーバの用意など先輩社員に助けていただく箇所はありますが、基本的に要件定義から開発までを自分たちで進めていきます。

マイクロアドのMVP投票制度について

次に、マイクロアドのシステム開発部におけるMVP投票制度について説明します。

マイクロアドのシステム開発部では、月に1回投票によりその月のMVPを選出しています。 正社員から1~3位の3名、業務委託から1名が表彰されます。 従来は、マネージャー数人で投票フォーム作成と投票集計を行っていました。 しかし、多くの投票データを手動で計算するのは手間がかかります。

そこで、新卒社員2人の開発研修でMVP投票システムを作ることになりました。

成果物

約2ヶ月の開発期間を終えて、MVP投票システム「アッパレ!」が完成しました。

「アッパレ!」には、様々な観点から成果を出していると思われる人を褒め称える文化を醸成するために、 互いに褒め合うためのシステムになって欲しいという思いを込めています。

MVP投票は毎月末に実施していて、投票日が近づくと管理者ユーザが投票フォームを作成します。 今回作成した投票システムでは投票フォームへのリンクをSlackに自動送信できるので、社内のメンバーはSlackからスムーズに投票画面へと移動できます。

一般ユーザは、分かりやすいUIでサクッと投票でき、締め切りまで内容を修正できます。 管理者ユーザは、ボタンを数回押すだけで投票結果を公開できます。

開発研修の流れ

開発研修は以下のような流れでした。

  1. キックオフミーティング
  2. システム設計
  3. 受け入れテストの項目確認
  4. 開発
  5. 受け入れテスト
  6. 本番環境にデプロイ(リリース)

まず初めに、キックオフミーティングで仕様や要件について説明を受けました。 要件定義などはあらかじめされており、その理解や認識のすり合わせなどを行いました。 具体的にはMVP投票システムを作成すること・想定される使われ方とそこで必要となる機能やそれらの優先順位などの説明を受けました。 次に新卒メンバーでシステムの設計をしていきます。 技術選定や画面設計などは新卒メンバーで自由に決定できます。 詳細は後述します。

システム設計の次は各機能の仕様書の作成と受け入れテストの項目の洗い出しを行いました。 作成した仕様書・リストアップしたテスト項目が十分かを先輩社員に確認してもらって、問題なければ開発に移ります。 開発後は、各機能が正常に動作するかを受け入れテストや実際にデモンストレーションすることで確認してもらいます。 必須となっている機能全ての実装と受け入れテストを終えたら、本番環境にデプロイしリリースとなります。

システム設計

キックオフミーティング後は、システムの設計に取り組みました。 この工程では新卒メンバーで実装の方針・最終的な完成品のイメージを共有することを重視しました。 この段階では以下のものを作成しました。

  • UI設計
  • 画面遷移図
  • データベース設計
  • ER図
  • API設計
  • 技術選定・調査

Webアプリ開発についてはほぼ未経験の新卒メンバーだったので、 仕様を満たすためにはどのようなデータベース設計にすればいいのか、どのようなUIなら使いやすいのかなどかなり悩みました。 一方でUIからデータベースまでのあらゆる設計を実際に行うことができて、非常に学びの多い工程でした。

開発環境・アーキテクチャ

MVP投票システムは以下の構成で作成しました。

バックエンド フロントエンド
言語 Kotlin Javascript
フレームワーク Spring Boot Vue.js
ビルドツール Maven npm
Linter KtLint ESLint
アーキテクチャ 三層+ドメインモデル SPA

アプリはデプロイのしやすさを考慮してDockerコンテナで起動するように構築しました。 また、データベースとしてはMySQLを使用しました。 使用する技術は自由でしたが、主に社内で使われているものを採用しました。 この理由としては、以下のものが挙げられます。

  • 業務で経験を積んでいる先輩社員に質問をしやすい
  • 研修で培った能力を実際の業務にも活かしやすい
  • 設計段階で考えていた動作・見た目が技術的に実現できそうだった

使用する言語・フレームワークをフロントエンドとバックエンドでそれぞれ選択できるため組み合わせの自由度が高く、何を選択するかという難しさと面白さがありました。 実現可能性を考慮しつつ自由に技術構成を選択できるので、調査をする中で多くの技術を触れるいい機会になりました。

苦労したこと

開発研修の中で苦労したこととして挙がったのは以下のものです。

  • フロントとバックの接続
  • Vue.jsのコンポーネント設計
  • API設計
  • DB設計
  • 環境構築

Vue.jsのコンポーネント設計は、コンポーネント分割の粒度に統一感がなく改修・メンテナンスの難しいコードとなってしまいました。 原因としては事前にコンポーネント分割の粒度の意識合わせをしていなかったこと・データ受け渡しについてあまり考慮しない設計となっていたこと・機能追加を考えずに設計していたことなどが挙げられます。

環境構築についても少し手こずりました。 新卒社員の内1人がIntel Macを、もう1人がM1 Macを使用していたために、Intel MacとM1 Macのどちらでも動く必要があり、サーバ上でも動く必要がありました。 Dockerを使用してもバージョン選択などにとても苦労したので、これでDockerがなかったらと考えると恐ろしいです。 Dockerのありがたみを心の底から感じられる開発研修でした。

面白かったこと

開発研修の中で面白かったこととして挙がったのは以下のものです。

  • Webアプリを構成する技術に一通り触れられたこと
  • 思い通りの動作が実現できたこと
  • リッチなUIが簡単に実装できたこと
  • 実際に使ってもらえていること

新卒メンバーは2名ともサーバーサイドエンジニアで、実際の業務でフロントエンドに触れる機会はほとんどありません。 そんな中でUIの設計から実装まで自分たちでするのは難しかったですがいい経験になりました。 ただ作るだけの研修ではなくその後も運用されていくことを意識すると、使いやすさを考えたUIやメンテナンスしやすいような設計を考えることにも繋がるなと感じました。

最後に

最初は、開発メンバーが2人だけということに対する不安もありました。 しかし、2人だからこそ密にコミュニケーションを取ることが可能でした。 さらに先輩方の手厚いサポートもあって無事完成しました。

1からサービスを作り上げて、実際に使ってもらうという体験は非常に貴重で、以下の学びがありました。

  • 後から改修が入れやすいように設計すること
  • エンドユーザの目線でUI/UXを考えること
  • 社内で使われているコードを再利用して開発効率を高めること
  • 開発内容を人に説明するといった、開発以外の能力も重要ということ

この経験を活かして配属先でも頑張っていきます!

この研修を実施してくださった先輩方、ありがとうございました!