はじめに
ビズリーチで「HRMOS（ハーモス）採用管理」のフロントエンドエンジニアをしています、浅井です（※部署名・肩書は執筆当時の所属です）。
HRMOS採用管理は、2014年に開発がスタートし、当初よりSingle Page Application（以下、SPA）を全面的に採用し、そのフロントエンドのすべてをAngularJS（以下、旧AngularJS）＋TypeScriptが担ってきました。サービスの拡大に伴って機能は増えていき、ソースコードは総計10万行まで膨れ上がってきました。
そこで現在は、旧AngularJSで記述されたコードを捨てつつ、新しいAngularを用いたコンポーネント指向のアーキテクチャに移行している真っ只中です。この移行で取り組んだ際の裏話を前編・後編の2つに分け、前編では「AngularJSのリプレースにAngularを選んだ話」、後編では「Angularを用いたコンポーネント指向」と題してお届けしようと思います。
きっかけは旧AngularJSのパフォーマンスと将来性だった
2016年のサービス正式ローンチ後も機能の拡充と改善を精力的に行ってきましたが、最近機能を増やすたびに「遅いページ」が散見されるようになってきました。例えば、スペックの低いPCでInternet Explorerを用いてアクセスした場合、ページの遷移に5秒近く要するといった具合です。
この原因を調べていくと、旧AngularJS界隈では有名な、$watch数の増大に起因するパフォーマンスの低下に辿り着きます。以下のアプローチを取ることにより、ページ遷移時間については5秒から3秒以内まで抑えるようにできました（長くなるため、詳細は割愛します）。
- AngularJSを最新版（1.4→1.5）にアップデートする
- $watchの数を減らす、deep watchを使わないようにする
- ディレクティブを遅延ロードさせる
しかし、パフォーマンス問題を根本的に解決できたとは言いがたく、今後も旧AngularJSを用いて開発を続けることに対する不安が高まっておりました。
そんな中で、2016年10月に完全に刷新されたAngularが正式リリースされたことで、旧AngularJSの開発・サポートは終息する方向になることが想像できたため、Angularに移行が可能かどうか考えていくことにしました。
お菓子管理アプリを作ってAngularを試してみる
ちょうどこの頃、ビズリーチ社員の一人から「社内の勉強会で何かフロントエンドの話をしてほしい」という相談がきたこともあり、部署内にあるお菓子コーナーの在庫を可視化する管理アプリケーション「ハーモニーお菓子管理」を作ってみることにしました。
「ハーモニーお菓子管理」について
部署のメンバーからカンパを集め、好きなお菓子や飲み物を仕入れた、お菓子コーナーが運営されています。
ハーモニーお菓子管理は半分遊びで作ったものですが、
- HRMOS採用管理を構成しているUIをAngularでも実現できるかどうか
- パフォーマンスは向上しているのか
- チームメンバーが習得して自走していけそうか
という点を検証する目的もありました。
