MicroAd Developers Blog

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

トップ > Vue.js > 2021年新卒チームでコーディング試験の管理システムを作った話

2021年新卒チームでコーディング試験の管理システムを作った話

Vue.js Kotlin Spring Boot 開発研修

はじめに

こんにちは。マイクロアド2021年新卒チーム ( id:bosq, id:realyutanemoto, id:suyama_naoki, id:tsuno_ryo, id:moriya_shun ) です。

新卒研修が無事に終わりましたので、今年の研修について紹介したいと思います。

開発研修について

マイクロアドの新卒研修では、ビジネス職を含めた全体研修の後に、エンジニアの新卒メンバーのみで1つのシステムを作る『開発研修』を実施しています。

今年は、新卒メンバー5人で、新卒採用で利用されるコーディング試験の管理システムを開発しました。

過去の開発研修についてはこちらから参照できます！

developers.microad.co.jp developers.microad.co.jp developers.microad.co.jp

マイクロアドのコーディング試験

マイクロアドでは、エンジニアの新卒採用として、サーバサイドエンジニア、インフラエンジニア、機械学習エンジニアの3職種を募集しています1。 その内、サーバサイドエンジニアの採用では、プログラミング能力を評価するためにコーディング試験を実施しています。

マイクロアドでは、コーディング試験の環境を内製しています。 プログラミング環境が構築済みのDockerコンテナを用意し、受験者毎に公開するようになっています。

試験環境は、code-serverというWebブラウザで動作するVS Codeをベースにしているため、受験者はWebブラウザでアクセスするだけでコーディング試験を受けることができます。

しかし、従来のコーディング試験では、以下のような課題がありました。

  • 受験者が任意の時間で試験を開始できない
  • Dockerコンテナの起動・停止のコマンド入力は社内のエンジニアが手動で行う必要がある
  • 受験状況や採点結果を一元的に管理できるシステムが存在しない

これらの課題を解決するために開発研修では、エンジニアが試験コンテナの管理や採点をできる機能と受験者が任意の時間で試験を開始できる機能を持つ「コーディング試験管理・開始システム」を開発しました。

成果物

コーディング試験開始機能では、受験者が開始ボタンを押すと、以下のようなコーディング試験の画面に遷移します。 任意のタイミングで試験を開始できるため、受験者の都合の良い時間に受験することができ、エンジニアによる手動での開始・停止の手間がなくなりました。

コーディング試験画面

採用担当のエンジニアは、以下のような管理画面から受験状況の確認や採点ができます。 採点画面からは、受験者の試験コンテナへのアクセスや、コメント・合否の記入ができるようになっています。

コーディング試験管理画面

開発研修の流れ

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

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

まず初めに、キックオフミーティングで仕様や要件について説明を受けます。 要件定義などはあらかじめされており、それを理解することから始まります。

次に新卒メンバーで開発するシステムの設計をしていきます。 技術選定などの実装に関することは、新卒メンバーで話し合って自由に決定できます。

システム設計が終わると、受け入れテストの項目を洗い出し、先輩社員に確認してもらってOKであれば開発スタートとなります。

開発後は、受け入れテストをベースに、実際に各機能が動作するかデモンストレーションにより確認してもらいます。 そして、全ての機能を実装し、受け入れテストを通過できれば本番環境にでデプロイし、リリースとなります。

システム設計

キックオフミーティング後は、システムの設計に取り組みました。 ここで、すぐ実装レベルでの落とし込みに入る前に、まずは成果物のイメージを共有することに重点を置きました。 成果物としては、以下のようなものを作成しました。

  • UI設計
  • シーケンス図
  • クラス図
  • ER図
  • 使用するAPIなどの技術調査

コーディング試験管理画面のモックアップ

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

開発するシステムでは、受験者や採点者がアクセスする部分（試験管理・開始システム）と試験用のコンテナのホストをする部分（試験コンテナハンドラ）でマシンを分けられるように構成しました。

試験管理・開始システムは、以下のような構成です。

  • フレームワーク: Spring Boot, Vue.js
  • 言語: Kotlin, JavaScript
  • ビルドツール; Maven, npm
  • Lint: KtLint, ESLint
  • アーキテクチャ: 三層＋ドメインモデル, SPA
  • DB: MySQL

技術スタックは自由でしたが、社内で使われているものを採用しました。 理由としては、研修後に学んだことを直接業務に活かすことができる点と、すでに実務で経験を積んでいる先輩社員に質問しやすい点が挙げられます。

developers.microad.co.jp developers.microad.co.jp

試験コンテナハンドラは、試験コンテナのbuildやrun、試験終了時のテスト実行などをするためのRESTful APIとして設計しました。 試験管理・開始システムからのリクエストに応じてDockerの操作をするだけのため、DBや画面は持たないシンプルなAPIとなっています。 従来の試験コンテナの運用では、Dockerコマンドによる手動操作とPythonスクリプトが利用されていました。 そのため、それらの操作を試験コンテナハンドラとして完全にAPI化することにしました。 実装としては、フレームワークにFastAPIを利用し、試験コンテナの操作には、Docker SDK for Python2を利用しました。

  • フレームワーク: FastAPI
  • 言語: Python
  • ビルドツール: Poetry

採用したインフラ環境

開発したシステムのインフラ環境は、Google Cloud Platform（GCP）を採用しました。 マイクロアドでは広告配信にオンプレ環境を利用していますが、今回はメインサービスとリソースを分けるためにパブリッククラウドを利用することとなりました。 また、GCPの色々なリソースを試したかったことと、開発と本番の2環境を構築する必要があったため、Terraformによるコード管理を採用しました。

システム概要図

アプリはデプロイのしやすさを考慮してDockerコンテナでデプロイできる構成を考えました。 最終的に、Compute Engine に Container-Optimized OS3を利用し、OSブート後にDockerコンテナでアプリを起動するように構築しました。 また、JekinsによるCIを導入することで、Gitリポジトリへのプッシュを検知し、DockerビルドとContainer Repositoryへのプッシュまでをしてくれるように設定しました。

デプロイフロー図

さいごに

開発研修を通して、システムの設計から開発、リリースまでを経験することができました。 当初の設計通りに進まない所も多々あり、スケジュールからは遅れてしまいましたが、5人の頑張りと先輩方のサポートで無事完成させることができました。

開発研修で得た経験を生かして、今後の業務や次年度以降の開発研修にも繋げられるよう、引き続き頑張っていきたいと思います!!

関係者の皆様、ありがとうございました!!!!!

  1. https://recruit.microad.co.jp/engineer/↩

  2. https://docker-py.readthedocs.io/en/stable/index.html↩

  3. https://cloud.google.com/container-optimized-os/docs/concepts/features-and-benefits?hl=ja↩