Shoeisha Technology Media

CodeZine(コードジン)

特集ページ一覧

エンタープライズWebアプリケーション開発における「Angular」の可能性~「GrapeCity Angular Day」開催

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加
2017/12/04 10:00

 エンタープライズWebアプリケーション開発に変革をもたらすJavaScriptフレームワークとして注目を浴びる「Angular」。コンポーネント製品をはじめ、開発者のための数々のツール製品を提供するグレープシティでは、去る2017年10月26日に東京・千代田区の秋葉原UDXのセミナールームを会場に「GrapeCity Angular Day」を開催した。本稿では、今回のイベントが開催されるに至った経緯を第一部で、当日のセッションの模様を第二部で、それぞれお伝えしたい。

第一部:「GrapeCity Angular Day」開催の背景

 グレープシティでは、1993年以来、過去20年以上にわたって業務アプリケーション開発を支援するツールを提供。アプリケーション開発に関わる生産性向上、アプリケーションにおける高度なUX(User eXperience)の実現など、さまざまな価値を開発者、そしてアプリケーションを利用するユーザーにもたらしてきた。

 その間、.NETやASP.NET、WPF、Silverlight、Javaなど、その時代時代に登場した最新の開発技術を確実にキャッチアップするかたちで、それらテクノロジーに対応した開発ツール製品を次々にリリース。例えば、今回の「GrapeCity Angular Day」のテーマとして取り上げられているAngularについても、このフレームワークに対応したJavaScriptライブラリとして「Wijmo」や「SpreadJS」といったUIコンポーネント製品をいち早く市場に投入してきている。

 そんなグレープシティがこのイベントを開催するに至った背景には、同社自身がAngularを今後のエンタープライズWebアプリケーション開発における最重要技術の1つと捉えていることは言うまでもないが、それに加えて実際にAngularを社内システムの開発や顧客から受託するSIプロジェクトにおいて採用し、身をもってその効果を実証してきた、あるユーザーからの働きかけがあったという。

 そのユーザーとは、今回のイベントにおいても2つのセッションを担当している野村総合研究所(NRI)である。NRIでは各種プロジェクトでWijmoやSpreadJSの両Angular対応UIコンポーネント利用している。以下、グレープシティによる「GrapeCity Angular Day」の実施に至る経緯を、このイベントの開催を強力に後押しした当事者である野村総合研究所の並河英二氏の話をベースに探る。なおここでは、慣例に従い、Angular 1を「AngularJS」、Angular 2以降を「Angular」と表記することをご承知おきいただきたい。

株式会社野村総合研究所 生産革新ソリューション開発二部 グループマネージャー 並河英二氏
株式会社野村総合研究所 生産革新ソリューション開発二部 グループマネージャー 並河英二氏

Angularをいち早く技術評価・検証に着手、高度化するUI対策に最適であると確認

 NRIがAngularに関わる取り組みを開始したのは2014年頃。当時、スマートフォンやタブレットなどのモバイル端末が普及し、アプリケーションのフロントに関わる要件が高度化してきていた。

 一方、技術的には当時Ajax+jQueryによるサーバーサイドMVCの環境が一般化しており、特にjQueryについては、UIに関する要件が複雑化すれば開発難易度が非常に高くなるという問題があった。「この問題の解消に向けた可能性を探るべく、NRIが新たな開発技術として評価・検証に着手したのが、クライアントMVCのフレームワークであるAngularJSでした」と並河氏は語る。

 AngularJSについて同社が高く評価したポイントは、開発者の数が3桁を上回るような大規模開発にも適用可能な技術であるということ。「SPA(Single Page Application)を開発するための機能が一通りそろっているフルスタックフレームワークであること、画面単位でロジックとテンプレートを分離した開発ができ、役割分担も容易で、開発統制の上でもメリットが得られるというAngularJSのアーキテクチャが、他のJavaScriptフレームワークに比べ、大規模システムに向くと考えました」と並河氏は説明する。

 これを受けて、NRIでは翌2015年から、AngularJSの本格導入と実際の開発プロジェクトへの適用へと動き始めた。具体的には、NRIが提供するエンタープライズ向け開発フレームワーク製品であるObjectWorks+において、AngularJSを利用して画面開発が行えるような機能を追加するとともに、開発標準を整備し、社内で受託している開発プロジェクトへと展開していった。

 AngularJSの後継バージョンとなるAngularについても、社内利⽤システムのモバイル向けWebアプリ開発に適⽤するというかたちで早々に評価・検証を開始し、2016年秋のAngularの正式リリースを待って、本格導⼊を行っている。

 これまでNRIでは、さまざまな開発プロジェクトにおいてAngularJSまたはAngularを採用し数々の実績を積み上げてきている。現在進んでいる開発案件においても、採用ないしは採用を予定しているプロジェクトは10を下らないという。

Angularを盛り上げていくための技術イベント

 このように、AngularJS、Angularを積極的に活用し、その成果を享受してきたNRIだが、そのかたわら、並河氏はエンタープライズIT市場でのAngularに対する需要が思うほど高まっていないことに違和感を抱いていたという。例えば、Javaが登場した1995年からの数年間は、国内のIT業界全体で盛り上げていこうとする機運が大いに高まり、コンソシアム等の立ち上げ、関連イベントの開催なども相次いだ。翻って、現在のAngularの状況を見るに、そうした盛り上がりといったものは感じられない。

 そんな折、Wijmo、SpreadJSのベンダーであるグレープシティの紹介でGoogleのAngular開発チームと議論した際に、互いに協力して、何がしかの活動ができないかという話へと発展。実績を重視するエンタープライズIT市場で、この優れた技術の普及に微力ながら貢献するには、事例の紹介を中心とするイベントの開催が効果があるのではないかとなり、今回の「GrapeCity Angular Day」の開催へと熟成されていった。

 「イベントを1つの契機として、できるだけ多くの開発者の方がAngularに興味を持ち、その有用性を理解していただけることを大いに期待しています。今後もグレープシティとの間に、ますます密接な協業関係を構築し、Angularの普及に向けた活動をさらに強力に推進していければと考えています」と並河氏は力をこめて語る。

第二部:「GrapeCity Angular Day」セッションレポート

 「GrapeCity Angular Day」当日は、イベントに参集した数多くの開発者の熱気に会場が包まれ、「エンタープライズシステム開発における有効性を探る」をテーマに、Angularに関わる最新の技術動向の解説や、先進開発事例が数々のセッションを通して紹介された。

Angularでの開発において理解が必須となるTypeScript

 「GrapeCity Angular Day」の講演のトップバッターは、日本マイクロソフトの井上章氏だ。マイクロソフトでは、近年、開発者支援ツールの提供に関わるスタンスを大きく転換してきた。「その標榜するビジョンは、『Any developer, Any app, Any platform』、すなわち、Windowsプラットフォームにこだわらず、あらゆるプラットフォーム上の、あらゆるアプリケーションを開発するためのツールを提供していこうとしています」と井上氏は紹介する。

日本マイクロソフト株式会社 テクニカル エバンジェリスト 井上章氏
日本マイクロソフト株式会社 テクニカル エバンジェリスト 井上章氏

 現在、マイクロソフトから無償提供されている開発エディタ「Visual Studio Code」はまさにこうしたビジョンを具現化したものだ。ツール自体がオープンソースであることに加え、Windowsはもちろん、macOSやLinuxの環境でも動作可能。Angularをはじめとする30以上の言語に対応するコードエディタを中心に、Gitによるソースコントロール、gulp、Gruntによるタスク実行などが行えるようになっている。

 また、井上氏はAngularを利用した開発において理解が必須となるTypeScriptについて、その登場背景から基本的な言語仕様、現在および今後に向けた動向についても解説。「大規模プロジェクトでは複雑化が避けられないJavaScriptでの開発が抱える課題を解消するものとして、JavaScriptのスーパーセットとして登場してきたのがTypeScriptです。コンパイラによってJavaScriptが生成される仕組みとなっています」と紹介。GoogleがAngularの開発をTypeScriptベースで、Visual Studio Codeを活用しながら進めていることにも触れた。

アプリ開発、デザイン、両チームの役割分担が容易に明確化できる

 続くセッションには、野村総合研究所の飯島千絵氏が登壇。NRIにおけるAngularに関わる取り組みを紹介した。現在、NRIでは自社の開発プロジェクトに対するAngularの適用を積極的に進めている。その背景については、本稿第一部で詳しく述べた通りだが、このセッションで飯島氏は、NRIがAngularJSに関し、大規模開発への適正性について評価・検証した際の具体的な結果についても紹介している。

株式会社野村総合研究所 生産革新ソリューション開発一部 テクニカルエンジニア 飯島千絵氏
株式会社野村総合研究所 生産革新ソリューション開発一部 テクニカルエンジニア 飯島千絵氏

 それによれば、オフショアの開発メンバーに同じアプリケーションを、jQueryとAngularJSのそれぞれで開発を依頼したところ、jQueryを使った場合はプログラムの多くの部分が複雑化し、高いスキルを有するエンジニアでなければ実装できなかったが、AngularJSを使った場合はプログラムを単純化することができ、標準的な技術者でほとんどの部分を実装できた。この結果について飯島氏は「要するに、AngularJSのプロジェクトでは、画面とロジックの分離が容易となり、標準的な技術者で対応できる領域が大きく広がるという成果が得られたわけです」と解説する。

 さらに飯島氏は、Angularを採用した開発プロジェクトにおいて、UIコンポーネントを活用するケースが増えていることに言及。グレープシティの提供する「Wijmo」およびモバイルアプリ向けのAngularベースのCSS/JavaScriptライブラリである「Ionic」を活用した自社での取り組み事例を紹介した。「アプリ開発チームとデザインチームの役割分担が明確化されて、操作性や動きについての認識合わせが早い段階で可能になり、最終的にUIに関わるお客様の満足度が高まっています」と飯島氏は語る。

フロント要件がますます高度化するWebアプリケーション開発で威力

 この日3つめの講演の壇上には、野村総合研究所の見上敬洋氏が登り、Angularを採用した大規模開発における留意点について、自ら標準化チームのリーダーとしていくつかのプロジェクトに参画した経験を踏まえて解説した。

株式会社野村総合研究所 生産革新ソリューション開発三部 テクニカルエンジニア 見上敬洋氏
株式会社野村総合研究所 生産革新ソリューション開発三部 テクニカルエンジニア 見上敬洋氏

 具体的には、NRIがオフショアに委託した、大手コールセンター運営会社のオペレータ支援システムの外部設計から結合テストに至る開発フェーズの事例を取り上げた。その開発フェーズには、開発会社2社、4チーム体制で、ピーク時で100名以上の開発者が関わるというもので、これら各チームが独立して開発にあたり、成果物については、性能、耐久性、ユーザビリティ、保守性に関わる厳しい品質基準をクリアすることなどが求められていた。

 「こうした要件を満たすために講じた施策としては、まず難易度の高いコンポーネントを部品化して、オフショア開発者のスキルに依存せず、適切な工程で開発できる体制を整備。あわせて、UIコンポーネントの提供によるUIの標準化も行いました。さらにExcelベースの画面設計書を入力してTypeScriptのプロジェクト構成を出力する雛形生成ツールなども用意しました」と見上氏は紹介する。そのほか、バグが作り込まれるリスクの高いポイントを洗い出して、標準化ルールの策定によってそうしたリスクを排除するといった取り組みも行ったという。

 「Angularを採用した大規模開発においては、以上のような開発統制を効果的に実現していくためのさまざまな工夫が必要。そうした押さえるべき点をしっかり押さえることができれば、Angularは業務アプリケーションのフロント要件がますます高度化するエンタープライズWebアプリケーションの開発において大きな威力を発揮するはずです」と見上氏は強調する。

使いやすいUIの実装こそが業務生産性向上のカギを握る

 続くセッションには、主催者であるグレープシティの森谷勝氏が登壇。グレープシティにおけるAngularへの取り組みの内容、およびAngularを高水準でサポートする同社のJavaScript UIコンポーネントであるWijmo、SpreadJSについての紹介を行った。

グレープシティ株式会社 ツール事業部 テクニカルセールス 森谷勝氏
グレープシティ株式会社 ツール事業部 テクニカルセールス 森谷勝氏

 これまで一貫して、アプリケーションのUIの実装を支援する開発ツールの提供に取り組んできたグレープシティ。「エンドユーザーの業務生産性の向上を実現するには、システムでの使いやすいUIの提供こそが不可欠であるというのが我々のコンセプトであり、Angularに対応したUIライブラリを提供することで、グレープシティではクライアントアプリと同等の操作性、視認性を持ったエンタープライズWebアプリケーションの実現に貢献していこうとしています」と森谷氏は語る。

 例えば、Excelは業務の現場で最も広く利用されているアプリケーションの1つだが、ユーザーが慣れ親しんだそのUIを実装できれば、開発するアプリケーションも非常に使いやすいものとなるはずだ。

 これに対しWijmoでは、Excelライクな表形式のUIでデータを表示/編集するための強力かつ柔軟な機能を実現するグリッド(FlexGrid)を提供。また、SpreadJSにおいても、フィルタや表計算関数、条件付き書式など、豊富なExcel互換機能を搭載したスプレッドシートをWebアプリケーション上に描画し、エンドユーザーにとって馴染み深い操作性を実現している。「Wijmo、SpreadJS、共にさまざまな業種業態の企業でアプリケーション開発に役立てていただいており、それらのお客様の業務生産性の向上に多大な寄与を果たしています」と森谷氏は語る。

Webアプリ開発の経験者であればAngularは決して難しくはない

 この日最後のセッションには、アシラスの佐川夫美雄氏が登場。Angularを使ったエンタープライズWebアプリケーション開発をめぐる問題とその解決策について解説した。

アシラス株式会社 代表取締役社長 佐川夫美雄氏
アシラス株式会社 代表取締役社長 佐川夫美雄氏

 特に、いまだAngularを活用していない開発者にとっての重要な関心事は、「Angularは難しいか」という問題だ。これについて佐川氏は「教育に当たった経験を踏まえて言えば、非常に入りやすいものと思います。例えば、.NET FrameworkやJavaでのWebアプリケーションの開発経験があり、コールバックやデータバインディングのメカニズムを理解している人なら、1週間程度の教育で十分使いこなせるようになるはずです」と語る。

 一方、Angularに関しては、その最新版となるAngular 5が近くリリースされる予定となっている。これについて、多くの開発者が懸念しているのが、現行のAngular 4からAngular 5にバージョンが上がる際に、かつてのAngularJSからAngular 2にバージョンアップしたときのようなドラスティックな変更があるのではないかということだ。これに対し佐川氏は「そもそもAngularJSとその後のAngularとの間では、コアモジュールそのものが踏襲されておらず、まったく別のフレームワークだと考えたほうがいいでしょう」と語る。要するに、Angular 5において、AngularJSからAngular 2のときのようなドラスティックな変更というものは考えられず、バージョン間のアプリケーションの移行に苦労することもないはずであるとのことだ。

 そのほか、このセッションでは、SPAについての考え方や開発プロセスの最適化、他のフレームワークとの比較など、Angularでの開発をめぐる広範なテーマが取り上げられ、それに対しAngularを活用した開発プロジェクトを数多く経験してきた佐川氏ならではの知見とノウハウに基づく解説が行われた。

 今後、AngularがエンタープライズWebアプリケーションの開発において、不可欠なテクノロジーとなることは間違いない。「GrapeCity Angular Day」において実施された以上のようなセッションの数々を通じて、そうした思いを新たにした開発者も多いはずだ。NRIとグレープシティには、Angularのさらなる普及に寄与するようなイベントの企画・開催を引き続き期待したい。

  • ブックマーク
  • LINEで送る
  • このエントリーをはてなブックマークに追加

著者プロフィール

  • 丸谷 潔(マルタニ キヨシ)

     フリーランスライター。1963年生まれ。慶應義塾大学文学部卒。システム開発(メインフレーム、OS/2等)、IT関連雑誌・書籍の編集を経て現職。執筆領域はIT系全般、FA系など。

All contents copyright © 2005-2019 Shoeisha Co., Ltd. All rights reserved. ver.1.5