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ライクな入力インターフェースを実装することもできました」と中谷氏は紹介する。
「状態との戦い」に勝利するための開発アプローチを支える「武器」
この日3つ目の講演となったのは、日本プロテック（NPC）の疋田直樹氏による「SPAを選択した理由とその結果 ～Reactを添えて～」と題するセッションである。NPCは1982年の創業以来、マイクロフィルムの製造販売、汎用コンピュータ（大型汎用機）、クライアントサーバーシステムの開発を経て、現在はWebアプリケーションシステムに関する企画から運用までをトータルに支援するシステムベンダーだ。
同社では、これまでSpringやASP.NETといった技術を使い受託開発を行ってきた。しかし最近では、特にFlashやSilverlightなどの技術がレガシー化する中で、リッチなUIや操作性を維持し、かつ既存のコンポーネント構成やバックエンドをそのまま活かせるといったメリットもあって、アプリケーション移行の手段としてSPAを採用するケースが増えているという。
「特にクライアントサイドについては、ボタンやアイテム、入力フォームなどの状態に応じて、各パーツを適切にコントロールする機能要件が多く、そうしたニーズに応えるには非常に煩雑な処理が必要で、それはまさに『状態との戦い』とも言えます。そうした煩雑さをクリアする上ではSPAの採用が極めて有効なのです」と疋田氏は強調する。
今回NPCでは、顧客の開発プロジェクトに人員を配備するためのアサイン管理システムをSPAにより構築。これについては、すでに述べたような状態管理を行うのに、とりわけ有効なフレームワークとして同社が関心を寄せていたReactによる開発を、自社システムにおいて検証したいというねらいがあった。それもあって同社では、開発言語にはTypeScript、そしてUIコンポーネントにグレープシティのWijmoをそれぞれ採用している。
そもそもが検証という動機もあって、今回のアサイン管理システムでは、画面上のボタンやフォームなどの複雑な状態管理を行っている。例えば未保存データを一覧することや、行の挿入を現在の最下行の下に対し行う、あるいは全行が削除された際には必ず空白行を1行残すといった仕組み、さらには独自のフィルタ、ソート、グルーピングなどの機能を実装している。
「React自体は非常にシンプルで『html=component(props)』すなわち『結果となるHTMLの文字列=関数（引数）』という純粋な関数をツリー構造で組み合わせてコンポーネントを構成する形となります。このときコンポーネントは、引き数が同じであれば、いつ、何回呼び出しても結果は同じであり、Reactでは状態を極力持たない、持つとしても局所化するという思想でデザインされています」と疋田氏は説明する。端的に言えば、これらのことがアプリケーション開発における状態管理の煩雑さを解消するポイントとなっているわけだ。
NPCのアサイン管理システム開発の取り組みにおいては、こうしたReactの活用が想定通りの効果を上げた。具体的には、状態をできるだけ持たない仕組みにより、機能やデータ、開発者がどれだけ増えても、状態管理の煩雑さからアプリケーション開発が破綻するようなことはなかったという。
「最初からReactの思想や意義を開発者に理解してもらうのは難しいかも知れませんが、とりあえずプログラムを書いてもらえれば、確実に習熟できるものと思います。印象的には、Angularよりも学習コストは低いものと感じています」と疋田氏は語る。
常にユーザーの声に耳を傾け製品のブラッシュアップに努める
イベントを締めくくる最後のセッションには、主催者であるグレープシティの村上功光氏が壇上に上がり、「GrapeCity製品からみるSPA開発のトレンドと動向」と銘打つセッションを行った。
グレープシティでは、SPAに組み込んで利用できるJavaScript製品として、この日のほかの講演でも登場したUIコンポーネントのWijmoやExcelライクな機能を提供するスプレッドシートコントロールであるSpreadJSに加え、全角入力など日本仕様にこだわった入力支援コントロールセット「InputManJS（インプットマンJS）」をラインナップ。
さらに2019年12月には、長年、帳票開発ライブラリ製品として、広範なユーザーに受け入れられてきた「ActiveReports（アクティブレポート）」のJavaScript版となる「ActiveReportsJS（アクティブレポートJS）」も新たにリリースした。またSpreadJSについては、2020年1月下旬にその新版が登場。セル結合を行うことなく、1つのセルの中で複数の情報を扱えるテンプレート型セルや、隣接するセルを自動マージする機能など、30以上の新機能が追加され大きく進化を遂げている。
グレープシティにおける、こうした製品の拡充について村上氏は「日本や米国のほか、中国、韓国のお客さまにも広く活用いただいているWijmoを例にとると、それら各国にある当社の拠点が、お客さまの要望や不満、意見を日々吸い上げています。それらを製品にフィードバックしながら、4カ月ごとに最新版をリリースするサイクルを確立しています」と紹介する。
もちろん、最新の技術動向に対する速やかなキャッチアップにも努めており、例えばBlazorに関しても、グレープシティの開発チームは強い関心を寄せている。現在「Wijmo Blazor」という実験プロジェクトをGitHub上で展開。そこでデモなども公開しており、製品での対応に向けた取り組みを鋭意進めているところである。
絶えず進化し続けるWebの世界にあって、開発者に常に求められているのは、シンプルかつ使いやすいインターフェースを備えたハイパフォーマンスなアプリケーションの実現だ。グレープシティでは今後もJavaScript向けライブラリ製品の提供を通じて、そうした要請に応える開発者の取り組みを強力に支援していくことになる。
