ますます高度化するWebアプリケーションのフロントエンド開発を支える「React」の可能性──「Web TECH FORUM 2023 Autumn」開催！

「Web TECH FORUM 2023 Autumn」開催レポート

3つの主要UIライブラリが三者三様のメリットをもたらす

　今日、業務で利用されるWebアプリケーションには、高度なユーザー体験を実現するための、機能性に富み使い勝手に優れたUIが求められている。成熟したエコシステムにおいて、そうした要請に応えるアプリケーションを実現するための、さまざまなフレームワークが豊富に提供されていることもReactの大きな魅力だ。

　この日、2つめのセッションに登場したグレープシティ（現メシウス）の福井潤之氏は、「Reactを使う場合でも、今求められる洗練されたUIを、標準のHTMLやJavaScriptだけで組んでいくのは非常に時間のかかる作業となります。そこで、エコシステムの中で提供されているフレームワークを活用することが、React単体では足りていない機能を補うという意味からも重要なポイントとなります」と語る。

グレープシティ株式会社（現メシウス株式会社） ツール事業部 プロダクトマーケティング 福井潤之氏

　これに対し福井氏は、GitHubのスター数やnpmのダウンロード数の動向などを指標に、現在、Webアプリケーション開発の世界でトレンドと思われる3つのUIライブラリ、Tailwind CSS、React Bootstrap、MUIをそれぞれ取り上げ、実際のデモを交えてその特徴を紹介した。具体的なデモの内容としては、ViteやAxios、TanStack Table、ASP.NET Coreといったツール、ライブラリを適宜駆使しながら、顧客名や担当者名、商品名、単価、数量、金額といった列項目で構成されるバックエンドの売上管理テーブルの内容を、Web API経由で取得して画面にグリッド表示するというものだ。

　Tailwind CSS、React Bootstrap、MUIの各UIライブラリごとに、プログラムの実装および作成したアプリケーションを実行するデモを一通り実施したのち、福井氏はそれぞれのライブラリについての特徴や使い勝手についての印象を総括した。

　まずTailwind CSSは、豊富に用意されたユーティリティクラスを組み合わせることで、独自性の高いUIが構築できる点を評価した。「スタイルの作成に特化したライブラリであるため、ヘッドレスUIライブラリとの併用になりますが、かなり自由度の高いコンポーネント開発が実現できるものと思います」と福井氏。インターフェースデザインツールであるFigmaなどとの連携が可能で、UIをデザイナーが作成し、実装を開発者が行うといった開発スタイルにも非常にマッチするものと評価する。「ただし、Tailwind CSSもヘッドレスUI系のライブラリも、ともに学習コストが高めであることに加え、最終的に出来上がるコードの量も多めになる印象です」と付け加えた。

　またReact Bootstrapについては、さほど自由度は高くない印象だが、美しくデザインされたUIを、より少ないコードで手軽に実装できる点がメリットであると福井氏は評価する。「高機能なコンポーネントは用意されていないものの、特にBootstrapでの開発に慣れている開発者がいるケース、標準的な機能をスピーディに実装したいというニーズにはおすすめできる」と話す。

　そしてMUIだが、このフレームワークについて福井氏は「Googleが提唱するマテリアルデザインを適用しているだけあって、より洗練されたUIをスピーディに構築できる点がメリット。MUI Xなど高機能で使いやすいコンポーネントも用意されているほか、APIも非常に分かりやすくて使い勝手の高さも魅力です」と評価する。

高度化するWebアプリにおける“ディープ”な要件を満たす

　以上のようなUIフレームワークの活用が、ReactでのWebアプリケーション開発の生産性を高め、特にReact単体では容易に実現できないような機能性に優れた洗練度の高いUIの実現に大きく貢献することは間違いない。ただ一方で、Reactとこれらフレームワークの併用をもってしても、容易には実装しづらい、業務上のUI要件も存在する。

　「グレープシティでは、そうしたディープな要件にも対応できる、JavaScriptに対応した各種ライブラリ製品を提供しています。開発で重宝するUIやコンポーネントなどを豊富に収めたスイート製品『Wijmo』、ExcelライクなUIをきわめて高いレベルで実現する『SpreadJS』、入力に関する日本特有のニーズをカバーする『InputManJS』、フロントエンドで帳表の作成や出力ができる『ActiveReportsJS』がこれにあたります」と福井氏は紹介する。

　講演では、これら製品のうちWijmoに焦点をあてて解説が行われた。Wijmoには、データグリッドやチャート、入力といった多彩なコントロール、40以上が収録されている。中でもとりわけ開発者の間で高い人気を博しているのが、データグリッドコントロール『FlexGrid』である。

　福井氏は講演において、さきほどの3つのフレームワークの紹介時に行ったのと同様のデモを、FlexGridを使って実施。バックエンドのWeb APIから取得したデータを一覧表示するだけでなく、さらにレコードの登録・更新・削除といった、いわゆるCRUD処理も実装したかたちでデモを実施し、FlexGridの実力のほどを示して見せた。

　福井氏は「Webの業務アプリケーション開発において、複雑で専門的な要件を持ったUIの実現が求められる場面では、ぜひWijmoをはじめとするグレープシティのJavaScriptライブラリの採用をご検討いただければと思います」と語り、講演をしめくくった。

Wijmoに含まれるデータグリッドコントロール「FlexGrid」。編集、コピー、フィルタ、グループ化など、Excelライクな操作性をWebアプリケーションで実現可能。