ID:82790さん

### プロジェクト詳細：ネットプリント支援サービス（Angular / テックリード） **【プロジェクトの概要と役割】** 大手SIerが提供するBtoB向けネットプリント支援サービスのフロントエンド領域において、**約5年間**にわたり**テックリード**兼フロントエンドエンジニアとして従事。長期運用プロダクトの基盤刷新と、セキュリティリスク解消に向けたライブラリ移行を技術面からリードしました。 **【課題：基盤ライブラリの旧朽化と巨大コンポーネントの弊害】** - 利用していたAdminLTE v2の**セキュリティリスク**が懸念されていましたが、最新版への移行工数と破壊的変更が大きな課題でした。 - 画面設計においても、1つのコンポーネント内に全ロジックが詰め込まれた**数千行規模の巨大コンポーネント**が常態化し、可読性と保守性が著しく低下していました。 **【取り組み：客観的データに基づく意思決定支援と、保守性を重視した設計】** 1. **フラットな視点によるライブラリ比較検討**: 脆弱性対応のため、**PrimeNG**や**Angular Material**等の複数候補について「機能網羅性」「ライセンスコスト」「長期メンテナンス性」を整理。特定の技術に偏らず、各選択肢のメリット・デメリットをフラットに提示した比較資料を作成し、プロパーによる**意思決定を技術面から支援**しました。 2. **複雑なUI要素の共通コンポーネント化**: PDFプレビュー用ライブラリのWrapper化や、標準機能では要件を満たせなかった「複数選択＋検索窓」等の複雑な機能を**共通部品化**。外部ライブラリをカプセル化することで、基盤刷新に伴う影響を局所化し、**開発環境での着実な移行**と**本番リリースの一括実施**を両立させました。 3. **ダイアログ化によるコンポーネント分離の徹底**: ライブラリ移行を機に巨大コンポーネントの解体を実施。**Angular Material Dialog**の活用を標準化し、機能を物理的に別コンポーネントへ分離することを徹底しました。これにより「**誰が実装しても自然と疎結合な構造になる**」状態を仕組みで強制し、保守性を劇的に向上させました。 4. **SonarQubeによる「品質のゲート」の構築**: GitLab CIのパイプラインに**SonarQube**を組み込み、静的解析によってコードの複雑度や潜在的なバグを自動検知する仕組みを構築。**一定の品質基準をクリアしなければマージさせない運用**を徹底し、属人性を排除した品質管理を実現しました。 5. **大規模刷新に伴うE2Eテスト資産の最適化と安定運用**: **MagicPod**を用い、**約60ケース**（1ケースあたり平均300ステップ超）に及ぶテストをUI刷新に合わせて全面更新。実行環境の負荷対策として、ブラウザ・機能ごとの「**実行単位の分割**」および「**夜間スケジューリング**」を導入し、テスト基盤の安定化とデグレ検知のセーフティネット構築に努めました。 **【成果】** - **セキュリティリスクを解消**した基盤への一括移行を、既存の開発を止めずに完遂しました。 - 密結合だった画面構造を再編し、1ファイルあたりの**コード量を大幅に削減**。保守性と改修のリードタイムを改善しました。 - 品質ゲートの運用とテスト基盤の安定化により、チーム全体の**開発生産性の向上**に寄与しました。