Web UI開発のメイン言語として「明るい未来」が待っている
今後もJavaScriptは、WebのUI開発におけるメイン言語であり続けるものと考えられる。特にブロックチェーンライブラリが豊富に用意されていることから、関連システムの領域では大きな強みを発揮していくことが想定される。
「例えば、TypeScriptへの置き換えといったものも進んでいますが、TypeScriptにしても文法はあくまでもJavaScriptであり、JavaScript自体が廃れることはありません。またその一方で、例えば先ほどのThe State of JSでも注目度の高まりが伝えられるSvelteといった新しいフレームワークも登場してきており、まさに今後フレームワークの世界は“戦国時代”とも呼べる様相を呈していくのではないかと思います」と石崎氏は語る。
さらに、React Nativeなどスマートフォン向けアプリをネイティブ化するフレームワークも出てきており、iOS版、Android版を同時にリリースできる仕組みも整っている。また、React、Vue.jsでは、脱仮想DOMの動きもあってフレームワークのシンプル化が進むほか、フレームワークでのトランスパイルされたファイルサイズの縮小も進んでいる。
「総じてJavaScriptをめぐる環境は絶え間なく進化を続けており、そうした意味でJavaScriptには明るい未来が待っていると捉えることができるでしょう」と石崎氏は強調する。
ユーザーの快適性、利便性に加え開発面でのメリットも大きいSPA
続く後半のセッションには、グレープシティの村上功光氏が登壇し、「業務システムでもフロントエンドを使いやすく、リッチに構築する グレープシティのJavaScript製品ラインナップ」と銘打つ講演を行った。
現在、Webアプリケーションの領域における主要な潮流となってきているのがSPAだ。これまでの一般的なWebアプリケーションでは、ユーザーがアクセスした際にブラウザからサーバーに対するリクエストが発生し、サーバーではそれに沿ったHTMLページをレンダリングして、ブラウザに返すという流れになる。その後、ユーザーの操作が行われ、ページの更新が必要となる都度、同様の動作を繰り返してページを遷移していくわけだ。
これに対しSPAでは、初期表示の処理では同様に、リクエストがサーバーに送信され、レンダリングされたHTMLやCSSあるいはJavaScriptなどがブラウザにレスポンスとして返ってくるが、その後ページ更新の必要が生じた際に送信されるリクエストに対し返されるのはレンダリングされたHTMLページではなく、JSONやXML形式のデータということになる。ブラウザ側のJavaScriptがそれらデータを使いながら差分のみを更新していくという流れである。
「ユーザーの視点でこれを捉えれば、差分更新のみなのでレンダリングし直してページを都度表示するというこれまでのやり方に比べて快適なレスポンスが期待できます。また最近では、HTMLやJavaScript自体が標準で高い表現力を持つようになっており、豊かなUX（ユーザー体験）を得ることも可能です」と村上氏はSPAのメリットを紹介する。さらに、ブラウザさえ搭載されていればどんなデバイスでも利用可能である、すなわちクロスプラットフォームでの利用が可能だという点もSPAの重要なメリットだ。
一方、開発の視点から見ると、フロントエンドとバックエンド、ブラウザ側とサーバー側の間では、データのみをやり取りする、疎結合なかたちとなることから、アプリケーションにおいて両者を分離して考えることができる。「この点は、開発のしやすさに加え、テストのやりやすさ、さらにはフロントエンドとバックエンドに分けてチーム開発が行えるといったメリットにもつながっています」と村上氏は言う。
JavaScriptフレームワークに対応する高速・軽量なライブラリ製品群
グレープシティでは、こうしたSPAの開発に最適なJavaScript製品を提供している。具体的には、「Wijmo（ウィジモ）」「ActiveReportsJS（アクティブレポートJS）」「SpreadJS（スプレッドJS）」「InputManJS（インプットマンJS）」という4つの製品をラインナップ。
「これら製品は、3つの共通した特徴を備えています。それは『高速・軽量』『JavaScriptフレームワーク対応』『TypeScript開発のサポート』です」と村上氏は語る。
まず高速・軽量について、これらJavaScript製品は洗練されたアルゴリズムによる実装がなされており、モジュールサイズを極小化して高速処理を実現している。「仮にWijmoを例にとれば、製品に含まれるデータグリッドビュー『FlexGrid』では100万個のデータのソート処理が、わずか200ミリ秒程度で完了。しかもモジュールサイズを150キロバイトにとどめています」と村上氏は紹介する。
また、2つ目のJavaScriptフレームワークへの対応だが、これはAngularやReact、Vue.jsといった各種フレームワークが搭載するコンポーネント機能に対応しているということを意味する。
これらフレームワークではHTMLのタグを拡張したようなイメージでコンポーネントを記述できるが、グレープシティのJavaScript製品においても、同様のスタイルで開発が行えるようになっている。
そして3つ目の特徴であるTypeScript開発のサポートについては、製品すべてにおいて型定義ファイルというものを提供。その利用により、Visual StudioやVisual Studio Codeのインテリセンス機能の利用が可能となる。
「例えば、それら開発製品でのTypeScript開発において、IDE上である処理を記述すると、どういったかたちで引数を設定すればいいのかといった解説がインテリセンスにより表示されることになり、開発生産性を高めることができます」と村上氏は説明する。
以上がグレープシティのJavaScript製品に共通する特徴だが、すでに述べた4つの製品は「汎用型」と「用途特化型」に大別される。例えば、Wijmoは汎用型のライブラリセットであり、すでに触れたFlexGridなどをはじめ、開発で重宝するUIやコンポーネントなど40種類以上もの機能を豊富に収録するスイート製品となっている。
一方、ActiveReportsJS、SpreadJS、InputManJSは用途特化型の製品で、汎用型のライブラリではカバーしきれないディープなニーズを満たすことができる。
まずActiveReportsJSだが、これは帳票の生成、出力を支援する製品だ。.NET製品として長年にわたり開発者の間で高い人気を誇るActiveReports for .NETの実力を引き継いでおり、日本ならではの細かな帳票ニーズにも応える。「クライアント側のブラウザの処理として帳票を生成し、印刷やファイル出力を行うような仕組みを提供しており、サーバー側のテクノロジーに縛られることがないという点が大きな特徴となっています」と村上氏は語る。
SpreadJSは、ExcelライクなUIや機能、操作性をWebアプリケーションで実現するライブラリだ。「スプレッドシートの部分だけではなく、例えばリボンや数式バー、ステータスバーなども含め、ExcelライクなUIをトータルに実装できることが大きな特徴となっています」と村上氏は説明する。
さらにInputManJSだが、こちらはストレスフリーの入力フォーム開発を支援する製品である。例えば、人名のふりがなを入力された漢字から自動取得できる機能や、住所に入力される数字の全角／半角の自動変換などの整形、データ検証などの各種機能のほか、和暦表示やカレンダー入力などにも対応している。
「当社Webサイトでは、これらJavaScript製品の詳細情報や活用事例をご紹介しているのでぜひアクセスいただければと思います。また、導入を検討されているお客さまに対するオンラインでの勉強会の開催なども承っているので、お気軽にご相談いただければ幸いです」と村上氏は語り、セッションを閉じた。
以上、今回の「Web TECH FORUM 2022」で実施された2つの講演の模様をレポートしてきたが、セッション終了後には、受講者からの質問に講演者が答えるという質疑応答の時間も設けられた。以下、そこでのやり取りについて、いくつかピックアップして触れておきたい。
最近では、SPAの開発に関して、マイクロソフトのC#ベースの開発フレームワーク「Blazor」が登場してきている。それについて「業界での現在の普及率や将来の可能性について知りたい」という質問が寄せられた。
これに対し石崎氏は「JavaScriptを学ばずにSPAが開発できる点はメリットになり得ますが、C#の世界にとどまるというのは、やはり限界もあります。弊社の研修に来られる方のアンケートを見ても、バックエンドはC#で開発しているが、フロントエンドはJavaScriptで開発している方が多く、SPAの開発にはJavaScriptというのが基本的な潮流だと思います」と答える。
一方、村上氏は「当社にもBlazorで使えるコンポーネント製品についての問い合わせをお客さまからいただくケースはありますが、現状ではやはり普及しているとは言い難いという印象。テクノロジーの可能性については、もう少し様子を見ていく必要があるのではないかと思います」と語った。
また、「Web開発初心者が手を出しやすいフレームワークはありますか」といった質問もあった。これに対し石崎氏は「JavaScriptをある程度理解しているという前提になるが、私自身はVue.jsがやはり直感的でわかりやすいと思います。もちろん、そのへんは好みの問題もあり、自由度という面を優先するのであれば、Reactのほうが入りやすいかと考えます」と回答した。
Webアプリケーションの提供する価値について今日では、その機能性はもちろんのこと、そこで実現されているUXのいかんが、より切実に問われるようになってきている。そしてそこにおいて重要なカギを握っているのが、JavaScriptを活用したフロントエンド開発にほかならない。開発者にとっては、その技術動向をしっかりと見極め、最適なフレームワークやライブラリ製品を選択していくことこそが肝要である。まさに今回の「Web TECH FORUM 2022」は、それにかかわる有用な情報を受講者に伝える場となった。
