ID:33203さん

# 概要・背景 開発組織において、Pull Request作成後のコードレビューがボトルネックとなり、PR作成からマージまでのリードタイムが長期化していました。 開発速度を向上させつつ、レビュー品質を維持・向上させることを目的として、AIコードレビューサービス「CodeRabbit」の導入と、それを効果的に活用するためのリポジトリ基盤整備を主導しました。 # 担当・取り組み 単純にAIレビューサービスを導入するだけでは十分な効果が出ないと考え、既存のコードレビューの流れやボトルネックを整理した上で、CodeRabbitを開発フローへ組み込みました。 また、AIレビューを開発者が実際に活用しやすい状態にするため、リポジトリ側の設定や運用方法についても整備し、導入後も継続的に改善を行いました。 導入効果を感覚値だけで判断しないよう、PR作成からマージまでのリードタイムを指標として継続的に計測し、施策前後の変化を確認しました。 # 成果 取り組み開始から3か月後には、PR作成からマージまでのリードタイムを中央値ベースで63%短縮しました。 AIツールそのものを導入するだけではなく、既存の開発プロセス・リポジトリ基盤・運用をセットで改善し、定量的な開発生産性向上につなげることができました。 この取り組みを通じて得た知見をもとに、現在は個別ツールの活用にとどまらず、開発部門全体で生成AIを活用するための基盤整備・利用促進にも取り組んでいます。

長期間運用されてきたレガシーな社内システムを、モダンな技術スタックへ段階的に置き換えるプロジェクトです。私はこの刷新を進めるためのフロントエンドエンジニアとして入社し、約10か月、フロントエンド2〜3名の体制でフロントエンドリードを担当しました。 既存システムについては、入社時の背景として、技術スタックの老朽化によるセキュリティ上の懸念、長年の改修によって蓄積したデッドコードや複雑性による開発速度の低下、扱えるエンジニアが限られることなどが課題として共有されていました。実際に現在も残っているレガシー部分を扱う中で、機能追加や変更の難しさは実感しています。 新システムではNuxt、TypeScriptを中心としたフロントエンドに加え、フロントエンドとバックエンドの間にBFFを設ける構成を採用しました。BFF導入の背景には、過去にフロントエンドの開発リソースが不足した際、支援できるエンジニアが少なく、フロントエンドがプロジェクト全体のボトルネックになった経験が会社としてあったことがあります。 そこで、フロントエンド固有の実装領域を必要以上に広げず、バックエンドを専門とするエンジニアでも担当しやすいBFF層を設けることで、特定職種の人員不足によって開発全体が止まりにくい構成を目指しました。単にフロントエンドとバックエンドを技術的に分離するのではなく、社内のエンジニア構成や過去のプロジェクト上の課題まで考慮してアーキテクチャを設計しています。 技術スタックとしてはNuxt、GraphQL、Hono、Node.js、Reka UI、Tailwind CSSなどを利用しています。私はフロントエンド側の設計・実装に加え、コードレビューや技術的な相談への対応を行い、ユニットテストについても、どこまで・どのような粒度でテストするかという方針を策定しました。 また、新しい技術を採用すること自体を目的にせず、今後継続して機能追加していくことを前提に、実装のしやすさや保守性、チーム内で扱える技術であることを重視しました。 現在も一部のレガシー領域は残っており段階的な移行を続けていますが、新システムへ置き換えた領域ではページレンダリング速度が大幅に向上し、新規機能の追加もしやすくなっています。 このプロジェクトでは、既存システムを単に新しい技術へ置き換えるのではなく、過去に発生した開発上・組織上のボトルネックまで踏まえて新しい開発基盤を設計することを意識しました。技術選定、アーキテクチャ設計、実装、テスト方針、レビューまで一貫して関わり、今後も継続的に開発できる基盤作りを進めています。

## プロジェクトの目的 EOLを迎えたVue.js 2で構築されたWebアプリケーションをVue.js 3へ移行し、 今後も継続的に機能開発・保守できるフロントエンド基盤へ刷新することを目的としたプロジェクト。 ## プロジェクトの規模感 - プロジェクト期間：約10か月 - チーム：約10名（時期により変動） - フロントエンド：2〜3名程度 - 移行対象：1,000以上のソースファイル ## 担当した役割 - Vue.js 2からVue.js 3への移行に関する技術調査・移行方針策定 - Vue.js 3への移行実装 - メンバーへの技術展開・技術フォロー - コードレビュー - 移行手順・実装パターンのドキュメント化 - webpackからViteへのビルド基盤移行 - ESLintの導入・ルール設計 ### チーム内での立ち位置 プロジェクト開始前からVue.js 3を自主的にキャッチアップしていたため、 チーム内のVue.js 3有識者として技術面をリードしました。 自身で実装するだけでなく、移行方法の調査・方針策定、コードレビュー、 メンバーへの技術フォロー、ナレッジのドキュメント化などを担当し、 チーム全体がVue.js 3への移行を進められる状態を作る役割を担いました。 また、アプリケーションコードの移行だけではなく、 ViteやESLintの導入など、今後の開発を支えるフロントエンド基盤の刷新も主導しました。 ## チームが抱えていた課題 ### Vue.js 3の知識不足 プロジェクト開始時点ではVue.js 3の実務経験・知識を持つメンバーがほとんどおらず、 個々のメンバーが都度調査しながら移行すると、品質や実装方法にばらつきが出る懸念がありました。 ### 開発時のビルド速度 既存環境ではwebpackによるトランスパイルに時間がかかり、 日常的な開発効率を低下させていました。 ### 既存コードの潜在的な品質問題 Vue.js 3への移行を進める中で、不具合につながる可能性のある既存コードが 多数存在していることが判明しました。 ## 課題に対して自身が発揮したバリュー及び成果 ### Vue.js 3移行方法の標準化 Vue.js 3への移行方法や注意点、実装パターンを調査し、 移行作業の手引きとなるドキュメントを作成しました。 メンバーが毎回有識者に確認しなくても一定の方針で作業を進められる状態を作り、 大規模な移行をチームで進めるためのナレッジを整備しました。 また、コードレビューを通じて実装品質を担保するとともに、 個別に得られた知見をチームへフィードバックしました。 ### webpackからViteへの移行 webpackによるトランスパイル時間が開発効率のボトルネックとなっていたため、 Viteへの移行を提案・主導しました。 既存環境との互換性や移行に必要な技術調査から実際の移行まで担当し、 トランスパイル時間を従来の約1/6まで短縮しました。 ### ESLintによる品質基盤の整備 既存コードに潜在的な不具合につながる実装が多数存在していたため、 Vue.js 3への移行を機にESLintを導入しました。 プロジェクトの特性を考慮しながらルール選定を主導し、 問題のあるコードを静的解析で検出・修正できる仕組みを構築しました。 ## 成果 約10か月で、1,000以上のソースファイルを対象としたVue.js 3への大規模移行を完遂しました。 単なるフレームワークのバージョンアップに留まらず、 移行方法の標準化、メンバーへの技術展開、コードレビュー、 ビルド基盤・静的解析環境の刷新まで担当することで、 移行後もチームが継続的に開発しやすいフロントエンド基盤を構築しました。