フロントエンド開発に取り組む.NET開発者に向けた開発のポイント
続く2つ目のセッションでは、グレープシティの福井潤之氏が「Wijmoで実現するモダナイゼーションはじめの一歩」と題して講演した。かつてのWebシステムでは、クライアント側からリクエストを受けたサーバー側がWebページを生成し、その内容をクライアントに返して、クライアント側で表示などの処理を行う、いわゆるサーバーサイドWebアプリケーションがその基本的な構造となっていた。ASP.NET Web Formsなどは、まさにこうした仕組みをベースにしている。
「これに対し最近では、これまでサーバー側で行っていたページの作成をクライアント側が担い、サーバーと通信を行って得たデータによってブラウザ上でWebページの表示・編集・更新を行うというスタイルがトレンドとなっています」と福井氏は言う。
そこでは、例えばページ遷移の際にも、都度サーバーにポストバックするのではなく、差分情報のみを非同期通信により得て描画を行うことで、ネイティブアプリのような高速なレスポンスを実現しているわけだ。要するに、従来であればサーバー側で行われてきた処理の多くが、クライアント側、すなわちWebブラウザ上で行えるようになってきている。これがモダンWebの世界にほかならない。
こうしたクライアント側の処理の開発は「フロントエンド開発」と呼ばれるが、そこではHTMLやJavaScript、およびそれらの関連技術を使用することになる。特に最近では、AngularやReactといったJavaScriptフレームワークが利用されるケースも増えている。一方、これらの標準的技術だけでは実現できないような高度かつリッチな処理を実現したい場合には、市場で提供されているライブラリ製品を活用するのが一般的なアプローチだ。例えば、グレープシティの提供するJavaScript開発ライブラリであるWijmoなどはその代表的な製品だといえる。
「最も、これまで.NET開発に勤しんできた方が、こうしたJavaScriptライブラリを使い始めるとなると、少なからず戸惑いや、難しいと感じる点があるようです」と福井氏は語る。
福井氏は以降のセッションで、Wijmoのユーザーからグレープシティのサポートサービス対して、とりわけ多く寄せられる3つの問い合わせ内容を取り上げ、それに沿ってフロントエンド開発を始める際に注意すべきポイントを解説した。まず1つ目、これはフロントエンド開発を始めたばかりのWijmoユーザーから最も多く寄せられる問い合わせだが、「そもそもどうやってJavaScriptライブラリを使うのか」というもの。
具体的には、JavaScriptライブラリのパッケージには、.NET用のコントロール製品などで用意されているインストーラが含まれていないことに戸惑うユーザーが多い。これについて福井氏は「Wijmoを例にして言うと、製品版やトライアル版のZIPファイル内に『Dist』という名前のフォルダがあり、そこにWijmoのライブラリが置かれていて、それらjs、cssファイルをプロジェクトにコピーして使用していただくことになります」と説明する。
ファイルを配置した後、HTMLファイルなどに参照設定を追加して、タグを使ってコントロールを表示するコンテナとなる領域を定義。CDNやnpmパッケージから参照することも可能だ。そして最後に、コントロールの初期化処理やデータ設定の処理をスクリプトで定義するという流れだ。
2つ目は、コントロールの「サイズなど外観の設定方法」である。従来の.NETのコントロールの場合、外観をカスタマイズするには、プロパティグリッドやスマートダイアログ上で設定を行う、あるいはVisual Studioのデザイナ上で直接調整することもできた。これに対しJavaScriptライブラリの場合には、基本的にはスタイルシート（CSS） を使って調整していくことになる。「したがってUIについてのカスタマイズ要件がでてきた場合には、スタイルシートについての知識も必要になってきます」と福井氏は言う。
そして最後、多く寄せられる問い合わせの3つ目は「データとの連結方法」についてである。すでに述べた通り、Webページの表示・編集・更新をクライアントサイドで行う現在のWebアプリケーションの場合、サーバーサイドWebアプリケーションのようにデータベースに直接アクセスすることができず、データベースへのアクセスはやはりサーバー側で行う必要がある。そして、サーバー側でデータベースから取得したデータをクライアント側にわたす際に利用されるのがWeb APIだ。
「Web APIとは、Webを介して外部サービスの提供する機能を利用するための手順・規約であり、クライアント側からGETやPOSTといったHTTPメソッドでリクエストをサーバー側に送り、JSONやXML形式のデータをレスポンスとして受け取るRESTと呼ばれる設計原則に基づき作成されるREST APIを使うのが現在の主流です」と福井氏は説明する。
以上のような解説に続いてセッションでは、フロントエンドにWijmoのFlexGridを配し、バックエンドのAzure SQL DatabaseのデータをASP.NET Core Web API経由で取得し、ブラウザのFlexGrid上にそのデータを表示するアプリケーションをVisual Studio 2019を使って作成するというデモを福井氏が実施。ここまで紹介してきたような、多くの.NET開発者がフロントエンド開発を始める際に直面しがちな疑問を具体的な例を見せながらクリアしていった。
最後に福井氏は、「本日お話しした開発のポイントは、当社の製品に限らず、他社のJavaScriptライブラリを使って開発を行う際にも通じるものですので、ぜひ銘記いただければと思います」と語った。
