SPAを支えるJavaScript開発が抱える各種課題の解消に向けて
「GrapeCity ECHO」は、2015年以来開催されているアプリケーション開発技術や同社製品にかかわる最新動向を紹介するグローバル規模の技術カンファレンス。日本での実施は今回で5回目を数える。
「GrapeCity ECHO Tokyo 2019」の幕を開ける最初の講演には、日本マイクロソフトの井上章氏が登壇。「レガシーWebからの脱却 ～開発者が次に目指すべきWebアプリの姿とは？」というタイトルでSPAをめぐる最新技術動向を紹介した。
「今日、アプリケーションプラットフォームがクラウドへと急激にシフトしている状況にあって、かつてのモノリシックなアーキテクチャで構成されるWebアプリケーションを、SPAへと移行していこうとする動きが加速しています」と井上氏は切り出す。
これまでのレガシーなWebアプリケーションの一般的なスタイルとしては、クライアント側からHTTP経由でサーバー側に何らかのリクエストを送信し、それに対しサーバーサイドではデータアクセスなど必要な処理を行ってHTMLを生成して送信。それを受け取ったクライアント側が画面表示を行うというものだった。
これに対しSPAでは、なるべくフロントエンド側のページ遷移を行うことなく、必要なデータをバックエンド側からAPI経由で非同期に取得し、画面の更新を行う形となる。これにより、ユーザーの使い勝手を向上させるためのUI機能の強化や処理性能の向上が図れるといったメリットがもたらされる。
「一方で、こうしたSPAのアーキテクチャに基づくアプリケーションを実現していくには、どうしてもフロントエンド側でのJavaScriptを使った開発の比重が増大し、それに付随する課題といったものが浮上してくることになります」と井上氏は指摘する。
例えば、JavaScriptでは言語仕様的に、アプリケーションが大規模になればなるほどコードが複雑化し、デバッグやテストの工数が増加するといったことが避けられない。また、開発者が日頃親しんでいる、JavaやC#、C++などのオブジェクト指向言語とはプログラムの記述作法も異なれば、変数の型やスコープについての考え方も違うなどの問題もある。
これらの問題を解消するため、マイクロソフトの手によりJavaScriptのスーパーセットとなる言語として開発されたのが「TypeScript」だ。その特徴は、静的型付けとクラスベースのオブジェクト指向をその言語仕様に採り入れていることで、TypeScriptで記述されたソースをコンパイルするとJavaScriptのコードが生成される形となる。
「要するに、JavaやC#に近い形でプログラムを記述でき、実行するまでエラーの存在がわからないというJavaScriptの抱える問題が、コンパイラによる型チェック等によって解消されることになるわけです」と井上氏は説明する。
JavaScriptを記述することなくSPAを実現する「Blazor」
また、JavaScriptによる開発を効率化するためのフレームワークといったものも、かねてより提供されてきた。特にFacebookの「React」やGoogleが主体となって開発している「Angular」、オープンソースコミュニティにおいて開発が進められている「Vue.js」はよく知られている。これらのフレームワークを利用することで、アプリケーションのパフォーマンスやメンテナンス性の向上が図れることに加え、コンポーネント化により再利用性も高まる。さらには、Webフロントエンド側でのデータや状態の管理なども、より簡便に行えるようになる。
マイクロソフトが最新のクラウドベースアプリケーションの構築を支援するために提供しているフレームワークである「ASP.NET Core」においても、これらReactやAngularをサポートするプロジェクトテンプレートを用意するといった対応がとられてきた。
「さらにマイクロソフトが2019年12月にリリースしたASP.NET Core 3.0においては、JavaScriptを記述することなくSPAの開発が行える『Blazor』と呼ばれるフレームワークの提供を開始しています」と井上氏は紹介する。Blazorでは、C#と.NET Coreのフレームワークを用いてSPAベースのWebアプリケーションを実現可能だ。
Blazorで開発できるのは「Blazorサーバーアプリ」と「Blazor WebAssemblyアプリ」の2種類。まずBlazorサーバーアプリは、「ASP.NET SignalR」（ASP.NET シグナルアール）と呼ばれる技術でサーバーとクライアント間の通信を行い、Webブラウザ上でのDOM操作を行って画面を表示するもので、基本的な処理をサーバーサイドで実行することによってクライアント側の負荷を軽減できる。
一方のBlazor WebAssemblyアプリは、ブラウザ上でバイナリコードを実行できる仕組みとして、すでに主要ブラウザに実装されている「WebAssembly」上で動作するもの。オフラインサポートやゼロレイテンシーUIの実現、あるいはPWA（Progressive Web Apps）の実装にも活用できる。
なお、2019年12月にリリースされたのは、前者のBlazorサーバーアプリをサポートする部分であり、後者のBlazor WebAssemblyアプリの部分については、現在プレビュー中であり、2020年5月のリリースが予定されている。
「さらにマイクロソフトでは、その次のステップとして、従来の.NET Framework、Blazorを含む.NET Core、そしてiOSやAndroidを含めたマルチプラットフォーム開発を支援するXamarin／Monoという3つのフレームワークを統合。2020年11月にリリース予定の『.NET 5』という単一のフレームワークにより、C#および.NET APIを使って、Webアプリケーションやモバイルアプリなどのトータルなソフトウェアの開発を行える形へ進化させようとしています。そうした動向にも、ぜひ注目いただきたいです」と井上氏は語る。
フレームワーク、ライブラリの採用がSPA開発における成否のカギを握る
続く講演には、日本ビジネスシステムズ（JBS）の宮下雄太氏、中谷大造氏が登壇。「Angularを利用したシステム開発事例」と題するセッションが行われた。独立系SIerとして、ITコンサルからアプリケーション開発に至るSIサービスを展開し、広範な業種・業態にわたる顧客のIT活用をサポートしている同社では、その事業を支える業務システムを、自社の情報システム部で内製・保守する体制をとっている。
同社 情報システム本部 ビジネスサービス部 インプリメント課 中谷大造氏（右）
それにあたってJBSが方針としているのが、最新アーキテクチャの積極的な採用である。最近では、市場で提供されるITサービスの高度化などもあり、社内のユーザーから突き付けられる業務システムに対する要求もますます厳しいものとなってきている状況だという。
「要件の定義や整理にできるだけ多くの時間をかけ、便利な機能やデザインに費やす時間を可能な限り最小化することが、システム開発にかかわる理想の時間の使い方だというのが当社の考え。ところが現実は逆で、マルチデバイス対応やテーマを持ったUIの実現、ソートやフィルタ、グルーピングといったユーティリティ機能の開発に多くの時間を費やしているというのが実情でした」と宮下氏は語る。
こうした問題を踏まえ、同社が特にこだわったのが開発のためのフレームワークの選定だった。具体的には、フレームワークで提供されるドキュメントやサンプルソースの量や質、さらにフレームワーク間の親和性なども重視した。「特にJavaScriptのフレームワークについては、OSSという選択肢もありますが、システムの品質や安全性を考えると、やはりコスト面だけではなく、サポートサービスやフレームワークそのもののアップデートの頻度といった点が重要であると考え、選定を行いました」と宮下氏は言う。
これに対し同社では、勤怠システムの開発に着手するのを契機に、JavaScriptのフレームワークとして「AngularJS」を採用。あわせてグレープシティが提供するUIライブラリ「Wijmo（ウィジモ）」も導入し、それらを活用して開発を進めた。
「特にカレンダー機能やツリービュー、フィルタ、ソート機能などを提供するWijmo採用による効果は絶大で、本来、15週間程度を見込まなければならない開発を約3週間で完了させることができました」と宮下氏はその成果のほどを強調する。
その後、同社では見積管理システムの開発に臨んで、2021年7月にサポートが終了するAngularJSに代えてAngularを採用。「Angular自体、AngularJSとの互換性はありませんが、移行パスが用意されており、フルスタックのフレームワークなので最初に覚えることが多く、そのためのコストがかさむという問題はあるものの、アプリケーション開発に必要な機能がこのフレームワーク単体で完結できる点は、やはり大きな魅力でした」と中谷氏は語る。
またJBSでは、Wijmoを継続的に利用する一方、グレープシティの製品である「SpreadJS（スプレッドJS）」を新たに採用。これらのフレームワーク、ライブラリを活用することで、SPAとして開発した見積管理システムでは、非常にユーザーフレンドリーかつリッチなUIを実現した。「例えばSpreadJSによって、手組みでは非常に難易度が高い、Excelライクな入力インターフェースを実装することもできました」と中谷氏は紹介する。
