ID:64240さん

プロジェクト概要

概略

14年稼働しているビズリーチシステムのリアーキテクチャプロジェクト。
レジュメ画面を段階的にリリースしている。

期間

2022年8月〜現在継続中

メンバー

PO、PdM
フロントエンドエンジニア3名
バックエンドエンジニア5名
QA2名
デザイナー2名

プロジェクトの推移

2022年8月にプロジェクトが発足。
2023年1月に1stリリースを迎え、以降画面単位でのリリースを行っている。
2023年6月完了予定で、以降登録導線などリアーキテクチャする画面を増やしていく予定。

構成

ベース

• Next.js
• css modules
• Storybook

テスト

• jest
• @react/testing-library
• Storybook / Interaction Test

自身の役割

• フロントエンドアーキテクト
• リアーキテクチャチーム リーダー

プロジェクト黎明期

テクニカルオフィスにサポート、レビューを受けつつ、技術選定を1から行う。
以前受け持ったプレミアムサービスの構成を参考にしつつ、Next.jsを採用した構成に転換。
デザイナーとの連携強化のため、Chromaticを導入。また既存プロジェクトのデザインシステム化を主導し、Figmaとの連携を強化した。

プロジェクト初期 ~ 1stリリースまで

ディレクトリ構成など、実装のルールをチームメンバーと協議しつつドキュメント化を進める。
コードベースの作成。
レビューを通じてメンバーのスキルアップを促進。
GitHub ActionsでCI / CDの作成。

1stリリース以降

Sentryでのエラーログ監視を始めとした運用整備を実装と並行して主導。
リファクタリングの習慣化や、CIなどの属人化排除を促進。
フロントエンドのみならず、バックエンドの実装も開始する。

アピールポイント

プレミアムサービス開発時よりもリーダーとしてQCDを求められる立場となり、それに応えるために施策を練った。

ひとつはデザイナーとの協業である。
まず、レガシーサービスに対してデザインシステムを段階的に取り入れる施策を打った。
デザインシステムのうち、デザイントークンとUIコンポーネント化を整備。Figmaからデザイントークンを生成する仕組みを導入し、共通言語で会話できるようになりデザインの基盤を整えた。
またChromaticを新規導入し、PR作成時にデザインレビューを行うことを定常化した。
結果、デザイン負債や実装後のデザインバグがほぼゼロになり、デリバリー速度向上にもつながった。

また品質向上と担保も仕組み化を進めた。
まず、エンジニア主体としたQA活動を行った。テスト分析設計から実施まですべてをエンジニアが担い、実装やテストコードにも活かした。
またフロントエンドのテストコードも拡充。StorybookのInteraction Testを始めとして、jestのテストを拡充し、カバレッジ80%を常に維持した。
品質にも寄与し、リリースごとにバグ数も減少していった。

レガシーシステムからリアーキテクチャするにあたって、品質、デリバリー速度、コストすべてはるかに上回るクオリティでリリースまでこぎつけることができた。

プロジェクト概要

概略

ビズリーチプレミアムサービスの新規立ち上げ
ビズリーチのプレミアム会員にさらなる価値を提供するために適性検査、研修の予約などのキャリア支援に特化したサービスを新規展開するために立ち上げた

期間

2020年9月〜2022年7月

プロジェクトメンバー

企画：2名
デザイナー：2名
バックエンドエンジニア：5名
フロントエンドエンジニア：3名

表彰

半期に1度開催される社内表彰式で優秀チーム賞を受賞

プロジェクトの推移

2020年9月にプロジェクトが発足。そこから半年で主要2機能 + 管理画面のリリースを行う。
以降半年に1度のペースで新規機能をリリースしながら、プロダクトの運用保守も行っている。

自身の役割

フロントエンドのテックリードとして技術選定から開始。それまで社内ではAngularを選定することが多かったが、今後の展望を踏まえてReactを採用した。
ライブラリ選定は可能な限りモダンで保守性の高いものを重視し、誰が参画してもランディングしやすい構成を重視した。
企画段階から企画職やデザイナーと共に機能要件をまとめるところから行い、プロジェクト全体の設計やコーディングなどプロジェクトの中核を担った。
プロジェクトへの新規参入者のランディングや若手社員の教育面にも注力した。

フロントエンド構成

ベース

• CRA + TypeScript

テスト

UT: jest + enzyme
IT: Cypress
VRT: Storybook + StoryCap + reg-suit

サーバーサイドとのinterface

• OpenAPI

工夫したこと

デザイナーとのコミュニケーション課題を感じたことからStorybookやreg-suitを用いたVRTの環境を整備。コミュニケーション改善に尽力した。
またコンポーネント構成に関してはAtomic Designを採用。ルールをドキュメントに明記することで破綻することなく運用することに成功した。

アピールポイント

自身のスキルアップがプロダクトの成長につながると考え、実装を通じて自身や周囲の成長を常に意識してプロジェクトを推進した。
コンポーネントの分け方に齟齬があると感じたことから、デザイナー向けにコンポーネント志向の勉強会を行なったり、フロントエンドエンジニア不足から、サーバーサイドエンジニアも交えて技術書の輪読会、1日1記事気になった技術記事のポスト等を行った。自身が常に最新技術とのハブになることを意識している。

また開発環境の改善は常に行なっていて、KPTで出た課題を即座にチケット化、次スプリントで解消することを意識した。
VRT環境の構築やGitHub Actionsを用いて日々の業務を自動化等が例である。

新しい技術に挑戦し続けることも意識している。
フロントエンドで役に立つ技術があれば導入するのはもちろんのこと、OpenAPIの設計はもともとバックエンドエンジニアが行なっていたが、フロントエンドエンジニアでもできるようにRESTful APIの思想を勉強して実装できるようになった。SREと協力してterraformも自身で実装できるようなったりと、自己研鑽は欠かさず行なっている。

定性面でいうとフロントエンドを書けるエンジニアは2人から5人まで増え、チーム力が向上。今後控えているシステムの大リニューアルの戦力を大幅に拡大することに成功した。
またプロダクトとしてはMAUの向上に寄与、半期に一度行われる社のアワードで優秀チーム賞を獲得した。

プロジェクト概要

概略

既存のレガシーシステムのうち、静的コンテンツの部分をJamstack構成に置き換えるリニューアルプロジェクト。
LPから始まり、記事系コンテンツ、公募特集、Q&Aなど様々なコンテンツをリプレイスした。

期間

2019年11月〜2020年9月

メンバー構成

フロントエンドエンジニア：2名
サーバーサイドエンジニア：1名
デザイナー：2名
PM：1名

プロジェクト推移

2019年11月、モダンなフロントエンド環境で開発を行いたい＋既存の環境を改善したい想いから起案準備をスタート。
社長の合意まで取った後、2020年1月から開発。2か月で第一弾リリースとなるLPをリリース。
その後既存LPのリプレイス作業を行いつつ、6か月の間で7コンテンツのリリース完了。
現在も運用保守を続けている。

自身の役割

起案から企画を序盤担当。
開発が始まってからは各関連部署の調整ごとから設計開発までフルで行った。
また、デザイナーや新人3名への教育もプロジェクト進行とともに担当。3名とも頼れる存在へと成長した。

フロントエンド構成

ベース

Gatsby.js + Flowtype + Contentful

テスト

UT：jest
IT：Cypress

工夫した点

カウンターパートとなる部署が複数あったためコミュニケーションコストがかかることは容易に想像がついたため、やることやらないことの精査とその説明には序盤かなり時間を割いた。
また、非エンジニアに運用保守を任せる部分があったため、運用困難になる可能性が高かったTypeScriptの導入は避け、Flowtypeを採用。
比較的CSSと書き心地の近い、styled-jsxも導入し、非エンジニアでも入りやすい環境づくりに注力。

アピールポイント

自身で起案

入社以降レガシーシステムの保守運用のみを行なっていたが、モダンフロントエンドに触れたいと考え、内製のAdminシステムを使用していることから運用負債が溜まっていることを加味し、ヘッドレスCMSを用いた運用に変更することをCTO、社長に直談判した。

新しい技術への挑戦

今までAngulerをメインで書くことが多かったが、 React隆盛を感じ、React導入を強く推薦した。
業務でReactを書くことはほぼ初めてであったが、技術記事を読み漁りキャッチアップしたり、他部署のフロントエンドエンジニアにヒアリングにいき持ち帰った学びを即座にプロダクトに反映した。
レガシーシステムから一部機能を分離しモダンにすることで、システムのリニューアルの足がかりになることを期待している。
臆することなく新しい技術へ挑戦することを常に意識している。

成果

リリース後、各部署の業務運用は50〜80%向上した。業務効率化に寄与した。
またLightHouseの得点比で、もともと10点だったものが最大98点まで向上。
SEO改善にも貢献した。