23卒の開発研修でスプリント計画アプリを開発した話

はじめまして！　23卒新卒チーム（天野、木村、澤田、高橋、藤田）です。

この度私たちは新卒開発研修にてスプリント計画アプリ「OtasK」を作成しました。今回の技術ブログではスプリント計画アプリ「OtasK」完成までの軌跡を紹介していきます。

開発研修について
マイクロアドシステム部のスプリント計画について
なぜスプリント計画アプリ「OtasK」の開発に至ったか
成果物
開発の流れ
システム設計
開発環境・アーキテクチャ
苦労したこと
面白かったこと
最後に

開発研修について

まずはマイクロアドの新卒研修制度についてお伝えします。マイクロアドでは4月にビジネス職・エンジニア職合同での全体研修を終えた後、エンジニア職の新卒社員は開発研修に移ります。 4月末から6月末の約二ヶ月間にかけて行われるこの研修ではエンジニア職の新卒社員で1つのプロダクトを作成するものとなっており、要件定義から開発、テストまで自分たちで進めていきます。

マイクロアドシステム部のスプリント計画について

マイクロアドシステム部では全プロジェクトを「スプリント」という一ヶ月ごとの単位で管理しています。そして毎月、ユニットごとに今スプリントで取り組むプロジェクトを決めることがスプリント計画です。スプリント計画では、各プロジェクトの想定される工数や優先度とユニットのマンパワーを考慮して、今月行われるタスクを決定します。

なぜスプリント計画アプリ「OtasK」の開発に至ったか

前述の通り、スプリント計画では各プロジェクトの情報やユニットの労働力を常に把握することが必要不可欠になります。しかしながら、前月に残っているタスクやその優先度など様々な要因によりタスク管理が複雑になってしまう場合が度々あります。従来のタスク管理には、スプレッドシートを用いてましたが、より簡潔で分かりやすいシステムが必要という声が上がるようになり、今回のスプリント計画アプリ「OtasK」を開発するに至りました。

成果物

約2ヶ月の開発期間を終えて、スプリント計画アプリ「OtasK」が完成しました。呼び名は「オタスケ」で、「タスク管理を助ける」という意味が込められています。

OtasKでは2つのメイン画面から構成され、全案件管理マスタ画面では全プロジェクトの優先度を決定でき、各ユニットが今スプリントで取り組むべきタスクを優先度順に表示できます。スプリント計画画面では各ユニットが今スプリントで取り組むタスクの選別と閲覧が行えます。各プロジェクトの工数と各ユニットのマンパワーはポイントで管理されており、取り組むプロジェクトを選択するだけでポイントの計算を自動的に行います。また各画面では検索・フィルタ機能やユーザごとの編集権限機能を備えているため誤操作やプロジェクトの見間違いを防止できる仕様になっています。

開発の流れ

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

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

まず始めに、キックオフミーティングにて作成物の仕様や要件について説明を受けました。要件定義はあらかじめ設定されており、それを理解することでこれから開発するものへの解像度を上げていく時間になります。

次に、新卒メンバー内でシステムの設計を進めていきました。技術選定や設計の詳細については新卒メンバー内で自由に決定できるため、どの技術を用いて何を設計すればよいかを相談しながら決定していくことになります。

システム設計がある程度煮詰まったら、機能毎に仕様書の作成と受け入れテスト項目の洗い出しを行いました。作成した仕様書とテスト項目について過不足がないかどうかを先輩社員の方に確認していただきます。これらの内容に問題がないことを確認いただいたのち、実際に開発を進めていきます。

開発が完了したら、事前にリストアップしたテスト項目をもとに、開発したシステムの機能が正しく動作するかどうかを実際にデモンストレーションすることで確認してもらいます。全ての機能を実装を行い、受け入れテストによる動作の確認が完了したら、晴れて本番環境へデプロイ、リリースとなります。

システム設計

キックオフミーティング後は、システムの設計へ取り組みました。新卒メンバー内で「スプリント計画」という概念がほとんどなく、開発物のイメージが付きにくいという問題がありました。そこで、設計するにあたり必要な機能についての洗い出しから進めることにしました。そのうえで、挙がった機能を組み合わせていくことでイメージを少しでも具体化することに注力しました。設計する上での成果物として、以下のようなものを作成しました。

UI設計
画面遷移図
データベース一覧
ER図
使用する技術についての調査
UI設計図（全案件管理マスター画面）

画面推移図（画面の推移と権限回りの確認に使用）

設計の中で要求されている仕様を満たすためのデータベース、API、UIについて議論を重ねたり、長く運用が可能なシステムにするため修正を重ねたりと、試行錯誤を必要とするやりがいのある工程でした。

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

今回開発したシステムの構成は以下の通りになります。

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

また、バックエンド側でデータを扱いやすくするためにMySQLを、フロントエンド側でUIを設計しやすくするためのライブラリとしてVuetifyを採用しました。これらのライブラリを支えるためのサーバー構築にDockerを使用しました。フロントエンドは、Vue3での実装に挑戦をすることから、開発をより簡潔にできそうな環境を目指して環境設定をしました。一方、バックエンドは、社内での知見がもともと多いこともあり、過去のプロダクトの読み込みや先輩方と相談や議論を円滑に行えるよう、社内で活発に使用されている技術を選択しました。

苦労したこと

開発時に苦労した点は以下です。

仕様のすり合わせ
工数見積もり
実装

仕様のすり合わせでは、実装しようとした機能と使用者が欲しい機能について認識の齟齬があり仕様を大きく変更する場面が何度かありました。これは、スプリント計画について私たちの理解が浅く画面上に表示する情報や必要な機能について判断つきにくかったことが原因として挙げられます。作成するアプリがどのような使われ方をするか使用者と密にヒアリングを行うことが大切だと学びました。

工数見積もりと実装に関しても反省すべき点が多いです。実装に関してはSpring BootやVueなど全く知らないフレームワークを全く知らない言語で行わないといけないという難しさがあり、1行1行を何度も考えながらコードを書いていました。そのため工数見積もりも困難を極め、1日でできるだろうと見積もった機能実装が1週間かかることも多々あり、開発期間を延期してしまう場面がありました。

面白かったこと

開発の中で面白かった点は以下の通りです。

システム設計の議論
実装
発表資料作成

システム設計は、前述の通り仕様についての認識のずれで困ることが多かったです。その一方で、仕様を満たすための設計については新卒メンバー側で考えられることもありました。そのため設計内容について、メンバー同士で議論をしたり、先輩方と相談を何度も重ねました。その中で、少しずつ設計するべきプロダクトについての認識や共有ができるようになり、徐々に内容の深堀ができるようになりました。共有ができたうえで、仕様を満たすにはどのような設計が必要かを考えるのは面白い部分でもありました。

実装は苦労したことも多かったですが、言葉だけでしかなかった仕様を実際に作る部分でもあり、ワクワクすることも多かったです。システム設計で取り上げた内容を実装するにあたり、言語内でサポートされているフレームワークを組み合わせる方法を調査したり、実装にて発生した問題を解決する方法を考えたりと頭と手を動かすことが多かったです。そのうえで、難しいと思っていた実装を行えた時は大きな達成感があり面白い工程でもありました。

開発後、開発したプロダクトを紹介することになるのですが、ここでは開発にて起きた様々なことについてのエピソードが上がりました。開発中は、期限を守ることを優先していたためあまりエピソードについて話すことはありませんでしたが、ここでは開発がほぼ完了していることもあり「実はこんなことがあった」という話が色々と出てきました。開発が終わった今だからこそ話せるようなエピソードもあり、充実かつ濃厚な2か月だったことを改めて認識するとともに、もうすでに懐かしい話のようにも思えた時間でもありました。

最後に

開発当初はアプリの仕様も開発の進め方も実装に使う技術も全く分からないという状況からスタートしたため、本当にアプリを完成させることができるのか不安になることが多々ありました。しかし開発が進んでいくにつれ理解が深まり、アプリ作成を楽しく進めることができるようになりました。そして無事「OtasK」を完成できたことを非常に嬉しく感じます。

今回の開発研修を通して得た学びを以下にまとめます。