大規模.NET開発チームが成功裏に「モダンWeb」開発へと舵を切る
グレープシティ主催の「Web TECH FORUM 2021」の幕を切って落とす最初の講演には、富士通の舟山智史氏が登壇。「従来型の社内システムを支えてきた.NETチームをモダンWebにシフトする方法」と題する講演を行った。
2005年のGoogleマップ登場が大きな契機となって、SNSやECサイト、動画配信といった主要なコンシューマ向けサービスを中心に「モダンWeb」へとシフトが加速している。しかしその一方では、「大規模なオーダーメイド開発により構築される企業の社内システムにおいては、モダンWebがほとんど適用されていないのが実情です」と舟山氏は指摘する。
舟山氏の属する開発チームは、建設業の顧客に向けた受託開発を行っており、数百もの画面作成を伴うシステムを大勢の手で.NETベースで開発する案件がほとんどだという。特に最近、顧客からの要望として多いのが、長年運用してきた基幹システムの再構築案件だ。
「これに対し、プログラムの単純変換ではなく、システムの保守性を復活させるために、設計そのものから見直し、新しいアーキテクチャで再構築するのが我々の基本的アプローチ。そうした中、お客さまからは、Windowsアプリの操作性を維持したままWebに移行したいというリクエストも増えています」と舟山氏は言う。
これに対し舟山氏のチームでは、すでに述べた世の中の潮流を見据えるかたちで、モダンWebへの挑戦を決断した。それにあたって解決すべき問題が3つあったという。1つ目は、Windowsフォームで多用されるグリッドやツリー、グラフなど、データの集まりを取り扱うためのコントロールの必要性。操作性の高いアプリケーションの開発には、サードベンダー製の高品質な入出力コントロールが必要だった。
2つ目は、プログラム言語自体の問題。モダンWeb開発については、基本的にはJavaScriptをベースに行うことになるが、JavaScriptではダックタイピングという動的型付けを採用していることから、最後のステップまで動作するかどうかが実際に実行してみないとわからない。そうした点で、大規模開発には向いていないという問題があった。さらに3つ目は、これまで専ら.NET開発に携わってきたメンバーの学習コストをいかに軽減し、全員をいかに早期にスタートラインに立たせるかという問題である。
舟山氏の開発チームでは、以上3つの問題を一つひとつクリアし、モダンWeb開発へと舵を切ったわけだ。まず1つ目のコントロールの導入については、グレープシティのJavaScript開発ライブラリである「Wijmo」を採用した。
Wijmoを選んだ一番の理由は、クラス構造が非Web的だったことだという。「jQueryやDOMのような、Web開発の前提知識が必要になるライブラリも多い中、WijmoはWebにかかわる実装部分がしっかり抽象化されていて、開発者は画面描画の仕組みを意識する必要がありませんでした」と舟山氏は説明する。
また、ドキュメントも使いやすく、クラスベースのAPIヘルプも用意されており、型情報なども詳述されているほか、オンラインデモが充実していることなどもWijmoの大きな魅力だった。
「さらにWijmoでは、クラスが制御しているHTMLへのアクセスが可能。Wijmoの仕様にない動きを実現したい時にも、柔軟に対応できます。クラスベースでの実装でありながら、そうした独自拡張の最終手段を用意しているところは、Wijmoの非常に素晴らしいところです」と舟山氏は強調する。
続いてJavaScriptが大規模開発に不向きであるという問題に対しては、TypeScriptを採用することにした。TypeScriptでは、コンパイルを行ってJavaScriptを生成し、ブラウザで生成されたJavaScriptを実行するかたちとなる。
「コンパイルでは、ソースコードで参照しているすべての要素が存在しているか、型が合っているのかということが検証されます。つまり、コンパイルが正常終了していれば、最後までプログラムを実行できることが保証されるわけです」と舟山氏は説明する。
最後に3つ目の問題であったメンバーの学習コストをいかに軽減するかについてだが、普段チームでは、富士通製の「INTARFRM」というフレームワークを使って開発を行っている。
「INTARFRMは、データ項目を矛盾なく精密に設計し、素早く実装するための仕組みです。Windows FormsやWebなどいくつかのバリエーションがあって、それぞれのアーキテクチャを隠蔽してくれます。これにより、開発者は業務ロジックの開発に集中できるわけです」と舟山氏は紹介する。
INTARFRMは、大きく設計リポジトリと自動生成エンジン、そして実装フレームワークの3つで構成される。このうち設計リポジトリは項目マスターがベースになっていて、画面項目やテーブルレイアウトの設計に用いられるもので、自動生成エンジンがリポジトリに定義された情報を使って定型部分のコーディングを行う。定型部分以外の業務ロジックは開発者が手作業でコーディングすることになる。
これらINTARFRMの3つの要素は、自由にカスタマイズできることが大きな特徴で、これに対し舟山氏のチームでは、開発のハードルを下げるために、INTARFRMでWijmoのFlexGridを使った開発が行えるようカスタマイズを行った。「アイディアは単純。INTARFRMが代わりに作り、代わりに接続するかたちを目指しました」と舟山氏は語る。
具体的には、まずグリッドを初期化するクラスをTypeScriptで実装。それを「お手本」として、設計リポジトリに登録した画面項目を組み合わせて、自動生成エンジンで必要なグリッドのイメージを備えた画面のTypeScriptコードを作成できるようにした。この時、利用頻度の高いプロパティやイベントを、初期化クラスの目立つところに実装しておくことで、開発者が自らの担当画面にグリッドを速やかに実装し、実物を見ながら細かい動きを調整していけるようにしている。
その一方で、FlexGridのデータをサーバーに同期する共通クラスを用意して、グリッドのデータ構造とAjaxの通信を、開発者から隠蔽する仕組みを実装した。これにより、Ajaxで受け取った画面データをFlexGridに反映するとともに、逆にグリッドで編集したセルや新しく追加した行のデータをトレースしてサーバーに反映する仕組みを実現。自動生成のタイミングで、FlexGridとINTARFRMがバインドされるようにしている。このような方法により、INTARFRMをベースとする普段の開発プロセスを完全に維持しながらモダンWebをスタートさせることが可能となり、同チームでは学習コストの問題をクリアしている。
こうした取り組みの実践により、舟山氏のチームでは5カ月で200のグリッドを含む画面の開発とテストを完了させた。「開発アプリケーション全体から見たJavaScriptの割合は、従来型Web開発プロジェクトに比べ約4倍に増加。さらに平均的な機能群では83～96％の実装をTypeScriptの自動生成でカバーすることできました」と舟山氏は言う。
一方で反省点もあるという。それは、特にWijmoが実現する操作感の良いUIにユーザーの満足度を委ねてしまう傾向となっていること。「そこはやはり、開発者のプライドとして、各人がユーザーの行動をよく観察し、真に最適なUIの実装方法を見つけ出す。そこが開発者の腕の見せ所だということをチーム一同肝に命じているところです」と舟山氏は語る。
フロントエンド開発に取り組む.NET開発者に向けた開発のポイント
続く2つ目のセッションでは、グレープシティの福井潤之氏が「Wijmoで実現するモダナイゼーションはじめの一歩」と題して講演した。かつてのWebシステムでは、クライアント側からリクエストを受けたサーバー側がWebページを生成し、その内容をクライアントに返して、クライアント側で表示などの処理を行う、いわゆるサーバーサイドWebアプリケーションがその基本的な構造となっていた。ASP.NET Web Formsなどは、まさにこうした仕組みをベースにしている。
「これに対し最近では、これまでサーバー側で行っていたページの作成をクライアント側が担い、サーバーと通信を行って得たデータによってブラウザ上でWebページの表示・編集・更新を行うというスタイルがトレンドとなっています」と福井氏は言う。
そこでは、例えばページ遷移の際にも、都度サーバーにポストバックするのではなく、差分情報のみを非同期通信により得て描画を行うことで、ネイティブアプリのような高速なレスポンスを実現しているわけだ。要するに、従来であればサーバー側で行われてきた処理の多くが、クライアント側、すなわちWebブラウザ上で行えるようになってきている。これがモダンWebの世界にほかならない。
こうしたクライアント側の処理の開発は「フロントエンド開発」と呼ばれるが、そこではHTMLやJavaScript、およびそれらの関連技術を使用することになる。特に最近では、AngularやReactといったJavaScriptフレームワークが利用されるケースも増えている。一方、これらの標準的技術だけでは実現できないような高度かつリッチな処理を実現したい場合には、市場で提供されているライブラリ製品を活用するのが一般的なアプローチだ。例えば、グレープシティの提供するJavaScript開発ライブラリであるWijmoなどはその代表的な製品だといえる。
「最も、これまで.NET開発に勤しんできた方が、こうしたJavaScriptライブラリを使い始めるとなると、少なからず戸惑いや、難しいと感じる点があるようです」と福井氏は語る。
福井氏は以降のセッションで、Wijmoのユーザーからグレープシティのサポートサービス対して、とりわけ多く寄せられる3つの問い合わせ内容を取り上げ、それに沿ってフロントエンド開発を始める際に注意すべきポイントを解説した。まず1つ目、これはフロントエンド開発を始めたばかりのWijmoユーザーから最も多く寄せられる問い合わせだが、「そもそもどうやってJavaScriptライブラリを使うのか」というもの。
具体的には、JavaScriptライブラリのパッケージには、.NET用のコントロール製品などで用意されているインストーラが含まれていないことに戸惑うユーザーが多い。これについて福井氏は「Wijmoを例にして言うと、製品版やトライアル版のZIPファイル内に『Dist』という名前のフォルダがあり、そこにWijmoのライブラリが置かれていて、それらjs、cssファイルをプロジェクトにコピーして使用していただくことになります」と説明する。
ファイルを配置した後、HTMLファイルなどに参照設定を追加して、タグを使ってコントロールを表示するコンテナとなる領域を定義。CDNやnpmパッケージから参照することも可能だ。そして最後に、コントロールの初期化処理やデータ設定の処理をスクリプトで定義するという流れだ。
2つ目は、コントロールの「サイズなど外観の設定方法」である。従来の.NETのコントロールの場合、外観をカスタマイズするには、プロパティグリッドやスマートダイアログ上で設定を行う、あるいはVisual Studioのデザイナ上で直接調整することもできた。これに対しJavaScriptライブラリの場合には、基本的にはスタイルシート（CSS） を使って調整していくことになる。「したがってUIについてのカスタマイズ要件がでてきた場合には、スタイルシートについての知識も必要になってきます」と福井氏は言う。
そして最後、多く寄せられる問い合わせの3つ目は「データとの連結方法」についてである。すでに述べた通り、Webページの表示・編集・更新をクライアントサイドで行う現在のWebアプリケーションの場合、サーバーサイドWebアプリケーションのようにデータベースに直接アクセスすることができず、データベースへのアクセスはやはりサーバー側で行う必要がある。そして、サーバー側でデータベースから取得したデータをクライアント側にわたす際に利用されるのがWeb APIだ。
「Web APIとは、Webを介して外部サービスの提供する機能を利用するための手順・規約であり、クライアント側からGETやPOSTといったHTTPメソッドでリクエストをサーバー側に送り、JSONやXML形式のデータをレスポンスとして受け取るRESTと呼ばれる設計原則に基づき作成されるREST APIを使うのが現在の主流です」と福井氏は説明する。
以上のような解説に続いてセッションでは、フロントエンドにWijmoのFlexGridを配し、バックエンドのAzure SQL DatabaseのデータをASP.NET Core Web API経由で取得し、ブラウザのFlexGrid上にそのデータを表示するアプリケーションをVisual Studio 2019を使って作成するというデモを福井氏が実施。ここまで紹介してきたような、多くの.NET開発者がフロントエンド開発を始める際に直面しがちな疑問を具体的な例を見せながらクリアしていった。
最後に福井氏は、「本日お話しした開発のポイントは、当社の製品に限らず、他社のJavaScriptライブラリを使って開発を行う際にも通じるものですので、ぜひ銘記いただければと思います」と語った。
「汎用型」「用途特化型」の2軸でフロントエンド開発を強力支援
今回のイベントを締めくくるこの日最後のセッションには、グレープシティの村上功光氏が登壇。「速習！グレープシティのJavaScript製品ライナップ」と銘打つ講演を行った。
グレープシティでは、いま開発者の間でますます需要が高まっている、JavaScriptライブラリのラインナップとして、「Wijmo」「SpreadJS」「InputManJS」「ActiveReportsJS」という4つの製品を提供している。
「これら製品は3つの共通した特徴を備えています。すなわち『高速・軽量』『JavaScriptフレームワーク対応』『TypeScript開発のサポート』です」とセッションの冒頭、村上氏は切り出す。
まず高速・軽量については、ライブラリ製品の中には多機能化を図るために、さまざまな機能取り込んだ結果、重くなってしまっているものもある。これに対しグレープシティの製品は単一の機能を1つのライブラリで提供しているため、非常に軽量で高速な動作を実現している。また、2つ目のJavaScriptフレームワーク対応だが、今日では中規模～大規模のフロントエンド開発では、AngularやReact、Vue.jsといったJavaScriptフレームワークを利用するのが一般的だ。グレープシティのライブラリ製品はそれらフレームワークを使った開発に対応している。
そして3つ目の特徴であるTypeScript開発のサポートについては、1つ目の舟山氏のセッションでもWijmoをTypeScriptによる開発で活用している事例が取り上げられたが、Wijmoを含め、すでに紹介した4つの製品すべてがTypeScriptで利用できるようになっている。
その後、村上氏からはこれら4製品についての紹介が行われた。まず、Wijmoは開発で重宝するUIやライブラリを豊富に収録するスイート製品で、いわば「汎用型」のライブラリである。さまざまな案件に対応できる40以上もの機能を収録している。一方、そのほかの3製品は特定の要件に応える「用途特化型」の製品。オールラウンドなライブラリではカバーしきれないディープなニーズを満たすものとなっている。まずSpreadJSだが、この製品ではExcelライクなUIや機能、操作性をWebアプリケーションで実現している。「スプレッドシートの部分だけではなく、例えばリボンや数式バー、ステータスバーなども含めて、ExcelライクなUIを実装できることが大きな特徴となっています」と村上氏は説明する。
またInputManJSは、入力フォーム開発を支援する製品。入力フォームの作成自体は、HTML標準のINPUTタグを使えば手軽に行えるが実務には十分でなく、InputManJSでは入力エラー処理や取得データの整形、データ検証などの各機能を備えているほか、和暦表示やカレンダー入力などにも対応している。
そして、ActiveReportsJSは、帳票出力を支援する製品だ。.NET製品として長年にわたり開発者の間で高い人気を誇るActiveReportsの実力を引き継いでおり、日本ならではの細かな帳票ニーズにも応える。データの取得をWeb API経由で行うモダンWebアプリケーション環境では、データソースとなるバックエンドのシステムを問わない点も大きな強みとなっている。
「弊社営業部では、より詳しい製品のご紹介はもちろん、導入を検討されているお客さまに対するオンライン／オフラインでの勉強会の開催なども承っておりますので、ぜひお気軽にご相談いただければ幸いです」と村上氏は語り、セッションを閉じた。
企業においてDX（デジタルトランスフォーメーション）推進の必然性が声高に叫ばれる中、社内業務を支えるWebアプリケーションには、より高度な使い勝手と性能が求められている。すなわち、モダンWebの実現こそが重要なテーマとなるわけだ。今回のグレープシティによる「Web TECH Forum 2021」は、それに向けた取り組みを始めようとする開発者、特にこれまで.NET開発に勤しんできた開発者に対し、有効な指針を示すイベントとなった。
