言語仕様も継続的に進化を遂げ、Web UI開発に欠かせない存在に
前後半で2つのセッションが実施された、今回の「Web TECH FORUM 2022」。最初の講演には、カサレアルの石崎智展氏が登壇し、「とある研修講師から見たJavaScript動向」と題するセッションを実施した。
カサレアルは、社内業務システムやWebサービス、モバイルアプリなどの構築、開発支援を行う「ビジネスソリューションサービス」、コンテナや自動化などを中心とするクラウドネイティブな技術を利用したシステムの提案、構築、運用を行う「クラウドネイティブ推進支援サービス」、そして自社の研修会場で定期的に開催するオープン研修、新入社員研修、および顧客の要望に沿った内容、会場、日程によるカスタマイズ研修などの実施にかかわる「ラーニングサービス」の3つの柱で事業を展開している。
今回のセッションは、同社の提供するラーニングサービスにおいてプログラミング講師を務める石崎氏の視点から、JavaScriptにかかわる過去から現在に至る技術的変遷、開発フレームワークをめぐるトレンド、そしてフロントエンド開発の今を解き明かすものとなった。
JavaScriptについては過去20年の間に、広くWebサービス、アプリケーションの開発の世界に浸透してきたことは周知の通りだ。これについて石崎氏は「20年以上前には、JavaScriptも現在とはそもそも利用目的が異なっていたといえます」と言う。
当時は、CSSなどもまだWebブラウザに実装されておらず、JavaScriptについても、HTMLに対して例えばアニメーションなどのちょっとした動きを付け足すという用途で用いられるようなケースがほとんどで、いわばHTMLの“添え物”的な位置づけにすぎなかった。
そうした当時には、言語仕様上の不便さも抱えていた。例えばクラス定義はコンスラクタ関数という関数形式で記述するというかたちになっており、またプロトタイプ継承というスタイルのオブジェクト指向だったために、使いこなしには少なからず難しさもあった。そのほか、変数宣言が再代入と区別しづらい、変数スコープも関数スコープしかなく、さらにはブラウザごとにプログラムの挙動が変わってしまうといった問題もあった。「そうしたこともあって、JavaScriptはプログラム言語として、さほど重要視されていなかったという印象です」と石崎氏は語る。
これに対し今日では、JavaScriptがWebシステムのUI開発には欠かせない存在となっている。「特にAjaxによるサーバー通信を介したWebサービスやWeb APIとの連動、SPA（シングルページアプリケーション）の構築などの局面で、フロントエンド開発のメイン言語としての地位を獲得しているものといえます」と石崎氏は言う。
言語仕様の面でも現在では、変数スコープにブロックスコープが追加されているほか、変数宣言にもletとconstというキーワードが加わることで、宣言なのか再代入なのかがわかりやすくなっている。またクラスベースでのクラス定義が可能となり、大規模開発のニーズに応えるモジュール化の仕組みも備わっているほか、Webブラウザの標準化も進み、ブラウザ間でのプログラムの挙動の差異といったものも減ってきている。
研修サービスの申し込みに見る、フレームワークをめぐる動向
中でも、さまざまな開発フレームワークが登場し、広く利用が進んだことは、JavaScriptがWebシステムのUI開発に必須のプログラム言語になってきている重要な要因としてあげられる。これに関するセッションでは、カサレアルの研修サービスに顧客から寄せられた申し込みに関する統計データに基づいて、JavaScriptフレームワークにかかわる動向と現在のトレンドが石崎氏から紹介された。
それによると、2020年～2022年（4～8月）における研修の申し込みにかかわる、フレームワーク別の集計では、最も人気が高いのがReactで、Vue.jsも安定的な需要傾向にある。また同社では、2021年にTypeScriptのコースを新たに追加しているが、そちらも着実に増加傾向にあるという。その一方で、Angularに関しては、顕著な需要の落ち込みが見られるとのことだ。
これについて石崎氏は、Angular、Vue.js、Reactのいわゆる“3大フレームワーク”にフォーカスし、顧客の会社規模別、研修目的別の集計データやアンケート結果をベースに、さらに踏み込んだ分析を行う。
まずAngularに関しては、特に大企業の需要が2021年をピークに減っているのに対し、2022年からは例えば従業員500人未満といった中小企業では増えているという。研修目的については「今後のプロジェクトで必要だから」「現在のプロジェクトで必要だから」のシェアが高いのに比して「技術の調査のため」というシェアがかなり低くなっている。「ここからうかがえるのは、大企業でのAngularによる新規開発は減少傾向にあるものの、大企業の既存システムの運用保守案件が増えてきているのではないかということです」と石崎氏は言う。
次にVue.jsだが、2020年には500人未満の中小企業が需要の中心だったが、今年2022年にはそうした状況に急激な変化が見られ、3000人以上の大企業の需要が急拡大。研修申し込みの8割方を占めるに至っているという。また研修目的別では、これまで「今後のプロジェクトで必要だから」が多かったものが、2022年には「現在のプロジェクトで必要だから」が急増し「技術の調査のため」という回答も増えている。
「そうしたことから、Vue.jsの採用は2021年以降、大企業を中心に確実に拡大しており、今後の開発ターゲットとして視野に入れる企業が増えているということがわかります」と石崎氏は説明する。
そしてReactについては、2020年の段階から3000人以上の大企業の需要が大きく、2022年もその傾向が引き続き維持されている一方、2021年以降、100人未満の小規模な企業の受講の増加が顕著である。研修目的に関しては、2020年、2021年には「現在のプロジェクトで必要だから」が最も多かったのに対し、2022年では「今後のプロジェクトで必要だから」という声が最も多くなっている。こうしたことから、Reactを新規開発に採用するほか、既存アプリケーションにおけるフレームワークの乗り換え先とするケースが増えているという傾向が見てとれる。
さらに石崎氏は、以上のようなカサレアルの研修サービスにおけるデータのほか、グローバル規模で開発エンジニアに対するアンケートを実施している「The State of JS」の公開するレポートにも言及。
「Angularは現状の利用率自体は高いもののエンジニアの興味は年々下がってきている状況。これに対しVue.jsは、利用率も安定しており、時とともにエンジニアの興味も高まっています。そしてReactは、エンジニアの興味は下がりつつありますが、これはむしろ、もともと利用率、認知度が高いことの証左かと思います。事実、Reactは3大フレームワークの中でも最も利用率が高く、人気の面においてもNo.1の存在であるものといえます」と石崎氏は3大フレームワークにまつわるトレンドを総括する。
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」は、それにかかわる有用な情報を受講者に伝える場となった。
