MyReferフロントエンドの技術的負債を4年かけて返済し、モダンSPAへ刷新した軌跡 - TalentX Tech Blog

こんにちは。フロントエンドをリードしている神長です。 TalentXの運営するプロダクトのうちの1つである「MyRefer」は、人事・リクルーター・ユーザーという3つのドメインにまたがり、約100ページのフロントエンドを持つプロダクトです。 長年の機能開発の過程で、フロントエンドのコードベースには深刻な技術的負債が蓄積し、開発生産性の低下が大きな課題となっていました。 この技術的負債を解消し、フロントエンドアーキテクチャを抜本的に刷新するために実施した約4年間にわたるモダナイゼーションの軌跡と、その過程で得られた技術的知見を解説します。 プロジェクト開始当初、コードベースが抱えていた主な課題は以下の通りでした。 1. ブラックボックス化した巨大ファイル 多くのページが単一ファイルで構成され、そのほとんどが1,000行を超えていました。例えば、あるページのコンポーネントは以下のような構造でし