大規模.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の実装方法を見つけ出す。そこが開発者の腕の見せ所だということをチーム一同肝に命じているところです」と舟山氏は語る。
