ID:45293さん

自社のプロダクト開発・運用
派遣等の求人や面接の管理システム

プロダクト概要

　労働人口減少や人材不足により採用難が続いているが、派遣業界は新規採用重視であるため年々採用コストが上昇。
派遣業界に採用CRMを導入することで採用コストを抑え、採用スピードを加速させ採用数の最大化を目指したプロダクト。
React/Next.jsを中心としたフロントエンド開発に従事。

【チーム全体】

• PdM : 4人
• エンジニア : 12人
  • フロントエンド : 6人
  • バックエンド : 6人
• UIデザイナー : 1人
• QAエンジニア : 6人

これらを3つのチームに分けそれぞれわけ、私が所属していたチームは7人規模となりました

• PdM : 1名
• フロントエンド : 2名(私含む)
• バックエンド : 2名
• QAエンジニア : 2名

業務内容

概要

• 人材派遣管理の新規機能実装
• 技術負債となっている箇所のリプレイス
• ユーザー満足度が低い画面や機能をリプレイス

担当業務：
フロントエンド領域, 仕様書ドキュメント作成、Issueチケット切り、PdMやUIデザイナーとの協議、チームレトロ、チーム内での機能探索会の実施

使用技術:
Vue.js, React.js, Next.js, Node.js, アジャイル/スクラム, GitHub

Vue2からReactへのリプレイス

＜課題＞
　ジョイン時点で画面/機能の部分はVue2で作られており、Vue2はその時点でEOLを迎えていた。
派遣業界の採用CRMはすでに本番リリースされており、採用数最大化に向けて開発要望が多く出ていた状況だった。
機能開発において、下記の影響が出ていた。
1つの画面/機能のUIからロジックまでを、すべて1つから2つ程度のコンポーネントに集約されており、1つのファイルのコード数が500行から700行程度まであった。
ロジックとUIが機能毎に適切に分割されていないので、テストコードを実装されていなかった。
ジョイン時点ではテストコードが実装されていないので、品質担保はQAエンジニアが作成した手動テスト実行のみで行われていた。
手動テストは開発部28名全員で3日から4日程度かかっており行い、その間の新規開発は停止していた。
Vueの開発者の採用が難しい状況である一方、Reactの開発者の採用はできる状況だった。

機能要望を受けてからリリースできるまでの開発期間短縮ができるよう、採用CRMをReactで書きかえるプロジェクトに取り組んだ。
また、Reactへのリプレイスは本プロジェクトマネージャーの方針だった。

＜対応内容＞
[課題]
描画とロジックのプログラムが同じファイルに混在し、修正に時間がかかっていた。
テストコードが存在しなかった。
テストを手動で行っていたので、機能追加とともにテスト実行に工数が膨れ上がっていた。

[仮説・考察]
描画とロジックを分離すれば修正にかかる時間が減るのではないかと考えた。
また、描画とロジックを分離すれば対象に対してテストコードも書くことができると考えた。

[技術的な解決策]
テストコードを実装するため、データテーブル、モーダル要素など、関心毎にComponentディレクトリ層下に分割し実装を行う。
候補者とスタッフでエンドポイントが違うため、UIやアクション要素の部分を共通化するために、WrapperComponentでAPIと疎通させる責務を分離させる設計とした。
UIやアクションの要素に近い場所で疎通させるのではなく、WrapperComponentでAPIのHookと疎通させることで、ドメイン毎で仕様が違う部分を吸収させる。
このように、エンドポイントの違いの対応を吸収させることで、描画要素に対するテストはコンポーネントのみをコンポーネントテストのみを実装させることでテストの対象責務を限定し、
リクエストやロジックに対するテストはWrapperComponentかHook自体をMSWを使いモックをすることでテストの単体テストの実施を可能とした。

＜結果＞
開発全員26名ほどで行っていたQAをQAエンジニが5名で行って品質を担保出来るレベルまでにした。
手動テストケースも開発でのテストコード担保へ振り分けたことにより、実行件数も3分の1へ減らす事ができ、QAエンジニアのテスト実行日数も5日から3日へ効率化を行えた。
フロント側でテストコード実装をする前とのインシデント数は、以前は1バージョンリリースで2個か3個出ていたが、リプレイス後の開発テストコード実装で0個～1個の間に抑えることができた。
手動テストの時に実行していたテストケースを、開発コード実装などによりピークの3分の1まで手動テストケース実行を減らすことが出来た。
VueとReact両方のコードをリーディングすることで、どちらの実装にも詳しくなれた。
Vueでは責務ごとに整理されていなかった要素やロジックを、Reactでその責務ごとに整理をするリファクタリングの経験を行った。Vueの既存のコードを読むことで採用CRMの全容を理解できた。

新機能画面の新規実装

【課題】
1ヶ月毎の開発期間毎に次期開発計画として新規機能開発を行う。
新規機能開発を選出するベース。

• プロダクトをより洗練していく中で必要な機能
• ユーザーの満足度が低い及びユーザーから改善の要望があった機能

その中で私が携わった箇所の2つの機能の課題があった。

• 求職者への求人配信や復職の働きかけなどの結果の統計がExcelで非常に見にくく、件数が多いと負荷が高く閲覧に支障を来していた
• 配信や復職の働きかけなどを行わない除外対象とする画面で、設定ミスが発生しうるUIであったので改修が急務であった
  • 新たな機能としては除外対象としてメールアドレスのドメインを指定する場面が出てきたので対応する

【実装】
当初はメンターの方とペアプロしながら作業を行ったが、チームでの新規実装1Storyをすべて携わる事となり、PdMとデザイナーとの仕様定義から実装、週に1度のスプリントレビューでの開発内情報共有なども行った。
実装していく中で開発をスムーズに行う上で以下の事を工夫して行った。

• 実装に入る前にUIデザイナーが作成してくださったFigmaを元に、どのような実装をするかDesignDocを作成
• DesignDocをテックリードやチームのフロントエンドエンジニアにレビューをして頂き、設計を固める

【成果】
実装上での成果としては、初期はメンターエンジニアとの伴走から疑問点をペアプロで解決していただいた時が多かったが、最終的には新規実装のエピックなどは、私個人1人で新規実装を行えるようになった。
開発を行った結果、ユーザー様からは以前より使いやすく見やすくなったとの声を頂きました。
・エクセルで見ていた統計をブラウザ上で見ることができ、フィルターなどが非常に使いやすかった
・統計画面の実装をお聞きしており、非常に期待し待っていたとのユーザー様の声をいただいた

チーム内での質疑応答会

【課題】
仕様確定後に手戻りが発生し、2週間の開発の遅れが発生した。
UIが大きく変わり、フロント側とQAエンジニアのテストケースをすべて作り直す事となった。
仕様変更におけるミーティング回数が多く週に4時間程度まで膨れ上がっており、作業時間の確保が課題。

＜対応内容＞
[課題]
実装途中からUIは初期案より変更が多い箇所であった。
ユーザーに使いやすくするため、活発に意見が多く出やすい部分であった。

[仮説・考察]
チーム内で実装箇所について意見を言うミーティングのタイミングがない。
PdMからはチームでの実装担当箇所の仕様と機能説明だけの説明会がある。
仕様を聞いてから実装予定のUIを見ると先入観が入るのではないかと考察。

[提案した解決策]
チームレトロにて、機能説明会時点で仕様を知らない状態でUIを見る会の実施を提案。
1時間ほどのUIを見る会をチームメンバー全員で実施し、疑問点や不明点などを忌憚なく意見として出す。
出た意見に対してPdMだけではなくメンバー全員で議論と検討を行う。
UIデザインの場合には、UIデザイナーの方にも参加していただき議論を行う。
Fixした内容を仕様変更などを行い、仕様書へ反映をし実装工程へ。

＜結果＞
手戻りのケースがなくなった。
実装中にPdMなどへ確認を行う1日に2回ほどあった臨時ミーティングの回数が2日に1回程度まで減り、お互いに作業時間の確保が出来た。
開発スタートの時点で仕様が固まる事により、QAエンジニアがテストケース項目を早期に作成が可能となり、エンジニアが実装作業と同時にテストコードの実装も並行で行えるようになった。
全員で質問しあうので、お互いの認識の一致やプロダクトの仕様方向などをユーザー目線で語り合う場ができた。
それに伴うチーム全体でのミーティング回数が減り、開発スタートの時点で半日確保するだけでよくなった。