GrapeCity.devlog

グレープシティ株式会社のDeveloper Tools〈開発支援ツール〉の最新情報をお届けします。製品のTIPSや発売情報、イベントのお知らせなどをいち早く発信中です。

徹底した標準化と教育で大規模開発にもAngularのパワー ー Toolsの杜 レポート (野村総合研究所 様) ー

2018年7月10日に開催した「Toolsの杜(ツールノモリ)」で、野村総合研究所(以下、NRI)生産革新本部の小田嶋 祐介様にご講演いただきました。
こちらはセッションを受講したグレープシティ社員によるレポートです。


大規模エンタープライズ開発におけるAngularの活用事例

今、業務アプリケーション開発においてJavaScriptが大きな存在感を見せています。
伴って、開発効率の向上を期待しJavaScriptフレームワーク(以下、JSフレームワーク)の導入を検討している、というお客様の声も多くお伺いするようになりました。
とりわけ、「Angular」には企業からの熱視線が注がれています。

このような状況のなか、現場の開発者が気になるのは「実際のところ」。エンタープライズ向けのアプリケーション開発において、Angular導入は成功の鍵となるのでしょうか。疑問解消のヒントとなる貴重なお話を、NRIの小田嶋様にご紹介いただきました。

f:id:GrapeCity_dev:20180806150919p:plain:w650

落ちることは許されない!NRIのプロジェクトとAngularの親和性

セッションの冒頭では、2000年〜現在にいたるフロントエンド開発の変遷を交えながら、Angularが使われ始めた背景やその特徴、導入の動機についてご解説をいただきました。

主流となるWebアプリケーションの開発手法がクライアントサイドMVCとなり、ブラウザの標準技術のみでリッチなUIを実現するようなフレームワークが登場するようになった現在、以下のようなケースに対応するため、Angularが利用されるようになっている、と小田嶋様は語ります。

  • API化したシステムのフロントエンド対応
  • 既存バックエンドと新しいリッチUIを組み合わせた新システムの構築
  • 保守切れテクノロジーからの移行

フロントエンド開発の変遷とAngular利用の背景

加えて、NRIの手がけるプロジェクトは

  • 大規模 - 数百におよぶ画面数
  • 中国におけるオフショア開発
  • 高品質 - ミッションクリティカル、落ちることは許されない

といった特徴があり、TypeScriptの利用やコンポーネント化によって高い生産性と品質を期待できるAngularに相性の良さを見出したことが、Angular採用の動機である、と述べられました。

f:id:GrapeCity_dev:20180806151709p:plain:w650

NRI式、Angularによるアプリケーション開発

セッションの中盤では、Angularによるアプリケーション開発手法についてご紹介をいただきました。SPA、非同期通信、PL/BLの疎結合、UIライブラリの活用という、4点のポイントを活かすことで、効率的で生産性の高い開発を実施されているそうです。

Angularアプリケーションの構造とポイント

これは筆者の主観ですが、特にポイント③にあるPL(Presentation Logic)+モックデータによる開発は、多くの開発者と顧客にとって、要件調整を円滑に進められる素晴らしい手法ではないでしょうか。

f:id:GrapeCity_dev:20180806152038p:plain:w650

また、ポイント④では弊社のJavaScriptライブラリの活用について言及いただきました。
Angular対応や技術サポートをご提供していること、充実した機能がやりすぎている(褒め言葉だと信じています!)ことなどについて、ありがたいお言葉を頂戴いたしました。

Angular x 大規模プロジェクト 苦労と工夫点

ここまでは主にその利点が語られたAngularでしたが、NRIのプロジェクトでは、その導入によって新たな課題にも直面したそうです。セッションの終盤ではその課題対応の苦労と対策を以下の4項目でご紹介いただきました。

1. 役割分担の失敗

課題:
これまでBL(Business Logic)サイドに開発の主力を置いていたNRIは、Angularを使った開発にあたり、フロントエンド技術者不足に直面。

f:id:GrapeCity_dev:20180806152247p:plain:w650

対策:
Angularを使ったアプリケーションはPLとBLが疎結合である点に着目し、PLサイドの開発を別チームで立ち上げることで、この課題に対応したそうです。

2. 迷子の開発者

課題:
Angularを使ったアプリケーションでは「できること」が多く、一つの結果を得る際も開発者によってやり方は様々。この自由度の高さがプロジェクトに混乱をもたらす事態に。

f:id:GrapeCity_dev:20180806152327p:plain:w650

対策:
NRIではコーディングに関する標準化ルールを作成し、処理の方法やタイミングに一貫性を与えることで、このような状況を回避しているそうです。
セッションでは標準化の具体例として、100項目(!)以上に及ぶ作業一覧や、詳細に内容が定義された開発ガイド、コピー&ペーストで必ず同じ結果が得られるサンプルコード集などが紹介されました。

3. オフショア教育

課題:
オフショア開発でプロジェクトに導入される開発者は100人単位。
NRIはAngular導入への対応として、この大人数の一括スキルアップという課題が浮上。

f:id:GrapeCity_dev:20180806152355p:plain:w650

対策:
打開策は「NRI流 ねずみ算式教育法」。
1人の担当者がプロジェクトのリーダー達へ研修を実施し、さらにリーダー達がチームメンバーに研修を実施する、というやり方で教育を加速させ、大人数の教育という課題に対応したそうです。コンテンツのみならず、育成の仕組みを構築することが教訓である、とお話しがとても印象的でした。

4. メモリリークとの戦い

課題:
NRIが開発するアプリケーションの多くはミッションクリティカル。
24時間365日という過酷な稼働状況を想定したテストにてAngularアプリケーションを投入すると、メモリ使用量が増加し続け、動作が不安定になるという問題に直面。

f:id:GrapeCity_dev:20180806152420p:plain:w650

対策:
このような現象は、短期的なページのリロードを前提とした、JavaScript機能やサードパーティライブラリ部品が長時間稼働のなかでメモリリークを起こすことで発生するそうです。この状況にあたり、

  • SPAの再読み込み機能を実装する
  • リークが想定される箇所は共通化して管理

といった標準化作業を行いつつ、最後はリソースモニターを睨みながらメモリリークの疑いがある箇所をつぶし込む、地道な作業が大切だ、と解説がありました。

まとめ

セッションの最後は小田嶋様の「Angularは万能ではないが開発において非常に便利である。怖がらないでどんどん使って欲しい」という力強い言葉で締めくくられました。

豊富な事例を含んだお話によって、Angularの対する理解が大いに深まったお客様も多かったと思います。このセッションをきっかけとしてAngularを採用し、素晴らしい開発をされる方がきっと増えるのではと感じられる、たいへん有意義なセッションでした。

f:id:GrapeCity_dev:20180806153051p:plain:w650

※このセッションで紹介した内容は機密事項も含むため、セッション資料の公開予定はありません。ご了承ください。


NRIのAngularへの取り組みについては「GrapeCity Angular Day」でもご講演いただいています。