SHOEISHA iD

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

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

BizReach Tech Blog

大規模Angular SPA開発に立ち向かうためにアプリとUIを切り分けた話

BizReach Tech Blog 第4回(後編)

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

 ビズリーチで「HRMOS(ハーモス)採用管理」のフロントエンドエンジニアをしています、浅井です。前編では「AngularJSのリプレースにAngularを選んだ話」についてお話しました。 今回は、長期的にサービスを発展させていくことを念頭に置き、アプリケーションの規模やチームメンバーの人数が増えていってもスムーズに開発・メンテナンスしていくために、AngularでWebアプリケーションを再構築していく中で盛り込んだことをご紹介したいと思います。

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

AngularJS時代の課題

 せっかくAngularに移行するからには、「AngularJS時代からの負債は引き継ぎたくない、メンテナンスしやすい仕組みにしておきたい」というのがチームメンバー全員の想いとしてありました。

 まずは、AngularJS時代に実装・運用フェーズで感じていた課題を洗い出したところ、

  • ページ単位で似たようなUIが別々に作られている
  • ゆえに、UIの改善を行なう画面を洗い出すのが大変。すべての画面で一貫性が担保できているのかわからない

という大きな課題がありました。

 これは、(Angularの醍醐味でもある)コンポーネント指向で一から書き直せば解決できると考えました。

アプリケーションから独立したUI Componentsライブラリを開発

 「HRMOS採用管理」は、採用担当者向け/エージェント企業向けと、利用者に応じた複数のAngularアプリケーションが存在します。

 これら複数のAngularアプリケーションで共通のUIを利用できる基盤があれば、上述した「AngularJS時代の課題」を解決できるのではないかと考え、UIに関わるコンポーネント(UI Componentsと呼ばれる)をAngularの1ライブラリとして別で集約することにしました。

 UI ComponentsライブラリをGitHubの別リポジトリで管理して、npmのプライベートパッケージとして公開することで、Angularアプリケーションが利用できる基盤となります。別リポジトリにすることで、採用管理アプリケーション開発とは独立したUIコンポーネントのリリースフローを回せるようになります。

 Angularアプリケーション自体の再構築を進めながら、このUI Componentsライブラリも並行で開発することにしました。アプリケーションのアーキテクト設計に強いフロントエンドエンジニアと、UI設計に強いフロントエンドエンジニアという志向性の異なるメンバーがいたため、分業体制をとることができました。

 まずAngularJS環境で使われているUIを洗い出し、ボタンや入力フィールドといった、インタラクションが単純でかつアプリケーション内で頻出するコンポーネントから開発に着手しました。

使われているUIを洗い出して書き出したところ。およそ30種類のコンポーネントを用意する必要がある
使われているUIを洗い出して書き出したところ。およそ30種類のコンポーネントを用意する必要がある

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

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

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

メールバックナンバー

次のページ
Atomic Design+SPA=Atomic Components

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

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

もっと読む

この記事の著者

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

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

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

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

この記事をシェア

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

おすすめ

アクセスランキング

アクセスランキング

イベント

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

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

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

メールバックナンバー

アクセスランキング

アクセスランキング