はじめに
はじめまして！25 卒新入社員(入野、森田)です！
私たちは新卒開発研修にて日程調整アプリ「525」を開発しました！ 今回の技術ブログでは、日程調整アプリ「525」についてご紹介していきます。
開発研修について
マイクロアドの新卒エンジニアは、4 月にビジネス職・エンジニア職合同での全体研修を終えた後、エンジニア職の講義研修を経て開発研修に移ります。
今年度の開発研修は 5 月上旬から 7 月上旬までの約 2 か月間、新卒 2 人で 1 つのチームとなり、アプリケーション開発に取り組みました。
この開発研修では、キックオフミーティングでテーマや要望を聞き、仕様作成、開発、テスト、リリースまで先輩社員の力を借りながら自分たちで進めていきます。
日程調整アプリの開発の背景
これまでマイクロアドでは社内イベント開催時に、一般公開されている無料アプリケーションを使用してメンバーの参加管理をしていましたが、煩雑な作業が伴っていました。
特に、大人数が参加するイベントを作成するときのメンバー招待や、
Google カレンダーの予定作成、場合によっては Slack チャンネルを作成しての連絡などです。
そこで今回の開発研修では、これらの課題を解決するようなマイクロアド版の日程調整アプリケーションを作成することになりました。
成果物
約 2 か月の開発期間を終えて、日程調整アプリ「525」が完成しました！
読み方は「ゴツゴー」で、「ご都合」の語呂合わせで命名しました。
525 は以下の 4 つの画面で構成されています。
- イベント一覧画面
- イベント作成画面
- 日程調整画面
- イベント編集画面
イベント一覧画面
自分が参加しているイベントを一覧で確認できます。また、イベントが確定しているのか・自分が出欠を提出したのかを一目で確認できるステータスが表示されています。
さらに、イベント名や幹事名、開催地などに対して部分一致での検索も可能で、イベント一覧画面にたくさんのイベントが表示されていても、確認したいイベントをすぐ見つけることができます。
イベント作成画面
イベント名、招待メンバー、開催日の 3 つを記入することでイベントを作成できます。
招待メンバー追加時に表示される画面では、氏名とメールアドレスの部分一致検索ができます。さらに、部署とユニットを選択できるボタンでスムーズにメンバーを追加できます。
イベント作成後、招待メンバー全員が該当イベント名の Slack チャンネルに招待され、イベント作成時に入力した候補日等の情報と日程調整画面の URL が共有されます。
イベント編集画面
既に作成されたイベントの内容を編集・削除できる画面です。なお、編集画面でイベント編集や更新、削除ができるのは幹事だけなので招待メンバーが間違ってイベントを削除してしまうことはありません。
イベント内容が変更されると、そのイベントの Slack チャンネルで自動アナウンスされるので、開催地などの変更見落としを防止できます。
日程調整画面
メンバーそれぞれの出欠を提出する機能が提供されており、全員の出欠回答状況を ⚪︎・△・×・？の記号で確認することができます。
また、幹事には幹事ボタンが表示され、イベント開催日の確定やイベント情報の編集ができます。
イベント開催日を確定すると Google カレンダーのスケジュール作成画面に遷移し、保存ボタンを押すだけで予定を追加することができます。
さらに、Slack チャンネルで開催日が確定したことも知らせてくれるので、イベント作成からアナウンスまで楽に行うことができます！
開発の流れ
開発研修は以下のような流れで進みました。
- キックオフミーティング
- 仕様書及びテストケースの作成
- 基本設計
- 実装
- テスト
- 本番環境にデプロイ（リリース）
まず始めに、キックオフミーティングで自分たちが作るプロダクトの概要と要望、今後のスケジュールについての説明を受けました。
次に、仕様書を作成し、あらかじめ用意されていた要件定義をもとに二人で分担して画面ごとの仕様をまとめました。
メインの出欠を確認して日程調整をする機能だけではなく、様々な追加機能の仕様を話し合いました。
具体的には、アプリ内でイベントを作成すると Slack のプライベートチャンネルが自動で作成される機能、招待メンバーが追加される機能、イベント確定日の Google カレンダー予定追加機能です。
また、使いやすい画面にするための検討も進めました。
画面のイメージがしやすいように図や絵を用いて視覚的にわかりやすく仕様書を作成したため、フロントエンドの実装をスムーズに行うことができました。
次に、仕様を満たしていることを確認できるテストケースを作成し、先輩社員と認識の齟齬がないかを確認する MTG を行った後、実装へと進みました。
研修としてアプリケーションを作るからには、全ての工程に関わりたい！という思いから、フロントエンドとバックエンドの両方を二人で半分ずつ分担して実装することになりました。
共通コンポーネントの作成 → それぞれの画面の作成 →API の作成の順でスケジュールを立てて進めていました。
しかし、新卒の経験値の差を鑑みて、どのように進めれば期間内にリリースまでできるのかを相談した結果、途中でフロントエンドとバックエンドに分担して開発を進める方針に変更しました。
実装後にテストを行った結果、致命的な不具合から、アプリケーションが提供する機能としては問題ないがユーザー目線で使いにくいと思われる不具合など様々な不具合が見つかりました。
そして、リリース直前まで修正とテストを繰り返し、なんとか 1st リリースをすることができました！
画面設計
まずは仕様書と受け入れテスト項目を元にして、表示するべき項目・必要な入力欄やボタンが何なのかを洗い出しました。
その後、整理した情報をもとにページごとのデザインのイメージ図を作成しました。
以下は、デザインの一部です。
ER 図
画面設計後、画面に表示/入力される情報がどんなものか、どうやってテーブルに分けたらうまく管理できるのかということを実装を見据えながら考えて設計しました。
主要技術
今回開発したアプリは以下の構成で作成しました。
| バックエンド | フロントエンド | |
|---|---|---|
| 言語 | Kotlin | TypeScript |
| フレームワーク | Spring Boot | Vue.js 3 |
| ビルドツール | Maven | Vite |
| Linter | KtLint | ESLint |
| アーキテクチャ | 三層+ドメインモデル | SPA |
その他、DB は MySQL を、フロントエンドでは UI の設計工数の削減とデザインを揃えるために Vuetify を利用しました。
また、環境構築をコードベースで管理できるという利点からバックエンド・フロントエンド・MySQL ごとに Docker コンテナで切り分けて開発しました。
最後に技術選定の最大の理由は、どの技術も実際にマイクロアドで利用されていることです。
過去のプロダクトを参考にして自分たちで考えやすい・ナレッジが蓄積しており先輩からのフィードバックを受けやすい・研修終了後にスムーズに業務に移れるといった点でメリットがあります。
こだわりの機能
イベント一覧画面のイベントの横に表示されるステータスがこだわりの機能です。
日程調整画面を確認しなくても、イベントが確定しているのかや自分が出欠を提出したのかを一目で判断できるのがポイントです。
また、色ごとにステータスが分かれているため、視覚的にもわかりやすいと思っています。
苦労した点
Spring Boot や Vue など、今回使用した技術はこれまで使用したことがなく、1 から勉強して慣れることからのスタートだったので苦労しました。
そのため、想定していたよりも時間がかかってしまった場面が多く、スケジュール通りに進まない場面が度々ありました。フロントエンドの開発に不慣れだったため、初期の段階では Vue のコンポーネントの分割が不十分でした。
その結果、コンポーネントが肥大化してしまい、バグ修正や新卒間でのコードの引き継ぎにおいて問題が発生しました。イベント作成・編集画面のメンバーリストやカレンダー、また出欠確認画面の実装では、保持すべき状態が多く、さらにそれらが相互に関連し合っていたため、実装が複雑になり苦労しました。
設計の経験が浅かったため、API と画面を接続する段階で手戻りが発生してしまいました。
テスト用に、OAuth を使った認証システムやテスト用のデータベースをコンテナで準備する必要があり、環境構築に手間取りました。
終わってから気が付いたこと
フロントエンドの開発において、コンポーネントを切り分ける・カスタムフックを利用する・適切に関数化するなどして副作用を排除し、可読性を高めるべきだったと思いました。
今回のようなある程度の規模感の開発は初めてでしたが、知識として知っていた設計のベストプラクティスなどを実際に適用できるかは別ということ、 なぜそれがベストプラクティスとして提唱されているのか、どうやって適用していくべきかといったことを理解することができました。スケジュール通りに進めることの難しさを実感しました。
スケジュールを計画していた当初は各作業を余裕を持って進めることができると考えていました。
しかし実際に研修を進めていくと、時間が足りず毎日少しずつスケジュールが遅れてしまい、最終的には研修期間も延長せざるをえない状況になってしまいました。
ここから、少しでもわからないことはすぐに聞いたほうが良いということ、そしてスケジュールが遅れていることに気がついた時点で相談した方が良い方向に進むことを学びました。
終わりに
開発当初は新卒が 2 人ということもあり、2 か月間で本当にアプリが完成するのかといった不安もありましたがなんとか無事にリリースすることができました。
しかし、リリース後に不具合が発生してしまいまだまだ気が抜けない状況なので、安定稼働するまで責任を持って作業に取り組みます。
今回の開発研修での経験を活かして、配属後の業務に取り組んでいきます。
最後に、この開発研修で先輩のアドバイスを聞かない日はないといっても過言ではないほど、先輩方には沢山のサポートをしていただきました。
サポートがなければ 525 を完成させることはできませんでした。本当にありがとうございました。
