SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

BizReach Tech Blog

AngularJSのリプレースにAngularを選んだ話

BizReach Tech Blog 第4回(前編)

  • X ポスト
  • このエントリーをはてなブックマークに追加

 本連載では、株式会社ビズリーチのエンジニアが、急成長を続ける事業の中で得られた実践的なノウハウをつづります。第4回となる今回は、6月に始めたエンジニアブログ「BizReach Tech Blog」で反響が大きかった記事を加筆修正して掲載します。テーマは「AngularJSからAngularへのリプレース」。前編である今回はAngularの選定理由、後編では実際にAngularを用いてどのようにコンポーネント化を進めていったかをご紹介します。

  • X ポスト
  • このエントリーをはてなブックマークに追加

はじめに

 ビズリーチで「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でも実現できるかどうか
  • パフォーマンスは向上しているのか
  • チームメンバーが習得して自走していけそうか

という点を検証する目的もありました。

会員登録無料すると、続きをお読みいただけます

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

次のページ
Angularへのリプレースを決めた理由

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
BizReach Tech Blog連載記事一覧

もっと読む

この記事の著者

浅井 雅彦(あさマック)(株式会社ビズリーチ)(アサイ マサヒコ)

大御所芸能人を抱える芸能事務所勤務という異色の経歴をもち、その後大手のWeb制作企業にて、ナショナルクライアントの大規模なWeb制作を行う。自社のサービス開発でのやりがいを求め2015年にフロントエンドエンジニアとしてビズリーチに参画。https://twitter.com/mixplace

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/11168 2018/12/05 14:00

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング