※本記事は、2023年11月1日に社名をメシウス株式会社へ変更したグレープシティ株式会社が社名変更前に開催したイベントのレポート記事です。
Server Componentsが登場するなど継続的に進化を遂げるReact
近年、急速な進化を遂げるWebフロントエンド開発の領域において、とりわけ圧倒的な導入率を誇っているJavaScriptライブラリ「React」。低廉なコーディングコストや改修・管理のしやすさがその人気の理由で、世界中にユーザーを抱える著名なWebサービスやアプリケーションの開発にも広く採用されている。
この日最初のセッションに登場したサイボウズの小林徹氏は、Webデータベース型の業務アプリ構築クラウドサービスとして、官民問わず幅広い組織に導入されている「kintone」のフロントエンドエンジニアチームを牽引するキーパーソンだ。「Reactを用いた持続可能なフロントエンド開発」と銘打たれた講演において小林氏は、Reactの特徴やエコシステムの動向、チーム開発におけるポイントなどについて解説した。
サイボウズ株式会社 kintone 開発チーム フロントエンドエンジニア
kintone フロントエンド刷新プロジェクトリーダー 小林徹氏
まず小林氏は、開発市場におけるReactの受容状況について、毎年、世界中の開発者へのアンケート調査を通じてJavaScriptライブラリの動向を伝えている「State of JavaScript 2022年版」のフロントエンドフレームワークのランキングを参照しながら、Reactが利用率や利用継続意思において、Reactと並んで3大JavaScriptフレームワークと見なされるAngularやVue.jsを抑えて1位の座を継続していることを強調。
そのうえで、Reactの特徴について、宣言的でコードが見やすく、コンポーネント指向で小さな部品を組み合わせていく形で開発が行え、Viewの変更が単方向のフローによるデータバインディングで行われるかたちとなっていることなどをあげた。
React自体、OSSとしてリリースされてすでに10年が経過しており、当初はクラス的な記法から始まって、やがて関数でコンポーネントが記述できるようになりました。その後も引き続きさまざまな進化を続けており、例えば最近では『React Server Components』が登場して、Reactに新たな特徴が加わっています」と小林氏は語る。
React Server Componentsとは、端的にいえばサーバーサイドにコンポーネントのレンダリング処理を移す仕組みだ。データベースなどサーバー側のリソースに直接アクセスできるので、データのやり取りがより円滑に行えるほか、サーバーでしか扱えないような機密情報などにもアクセスしやすい環境となる。
サーバーでの処理結果は、ツリー構造をもったReactの内部表現によってクライアントにわたされるかたちとなり、従来のSSRのようにサーバーサイドでHTMLを生成するアプローチとは根本的に異なる（※サーバーサイドレンダリングと Server Components は組み合わせ可能）。
「Server Componentsを使用することで、クライアント側ではコンポーネントが実行されず、ページのレンダリングが高速化。また、開発者にとってはサーバーサイドだけを動作環境として意識すればよく、シンプルに捉えられるため、開発体験が向上するといったメリットもあります」と小林氏は説明する。
成熟したエコシステムで提供される各種フレームワークを適宜活用
続いて、Reactをとりまくエコシステムの動向だが、これについてはReactを用いた開発においては、一般にフレームワークの採用が望ましいとされる。例えば、Reactの公式サイトといえるreact.devにおいても、各種フレームワークの活用を推奨している。
「基本的にReact自体ではプリミティブなAPIを提供しており、各種のフレームワークがそれをベースに、アプリケーション開発者にとって使いやすいAPIを提供しています。実際、Reactを直接使おうとするとかなり難しいところも出てきてしまうのが実情です」と小林氏は語る。
加えて、Reactを用いて開発されるアプリケーションは非常に多様で、例えばスタティックなWebサイトから、SPA（Single Page Application）で構築されるダッシュボードのようなインタラクティブなものまで、ユースケースはさまざまだ。「React自体で、それらすべてのユースケースに必要な機能をトータルに実現するのはやはり困難です。それぞれの用途に合ったフレームワークを採用することで、必要なUIを備えたアプリケーションを、より簡便に開発できるようになります」と小林氏。Next.js、Remix、Gatsby、RedwoodJSといった主要なフレームワークそれぞれについての簡単な説明を行った。
Next.jsは、現在、Reactのフレームワークとしてデファクトスタンダードともいえる存在で、もともとFacebook（現Meta）でReactの開発にあたったコアメンバーが、Vercelに移って開発している。Reactの新しい機能をフル活用したフラグシップ的なフレームワークで、スタティックなサイトから動的なアプリケーションまで幅広いユースケースに対応する。
Remixは、SSRを前提としたフレームワークで、現在Shopifyによって開発されている。よりWeb標準を意識し、いわゆるRequest/Responseモデルに基づいたシンプルなAPI設計がなされていることが特徴である。
またGatsbyに関しては、事前ビルドによる静的サイトジェネレーター（SSG）をメインのターゲットとするフレームワークだ。スタティックなサイトを作るためのデータソースをGraphQLで抽象化。それに対してさまざまなプラグインが提供されている。
そしてRedwoodJSだが、こちらはRailsライクなフルスタックのフレームワークとなっている。Reactをベースに、GraphQLやPrisma、あるいはReact Hook Form、Zodといったフォーム、Validationライブラリが組み込まれている。「詳細な技術選定をフレームワークに委ねることができ、Scaffoldによるコード生成なども充実。利用者はすでに紹介した3つのフレームワークに比べ少ないものの、開発者にとって有力な選択肢に入ってくるものと思います」と小林氏は紹介する。
またそうしたフロントエンドフレームワークに加えて、Reactでのアプリケーション開発においては、CSS（Cascading Style Sheets）の扱いをどうするかも避けては通れない問題だ。こちらは、フロントエンドフレームワークのようにデファクトとなる選択肢は特になく、開発者が頭を悩ませる部分ともいえる。
「特にReact Server Componentsが登場してきたことにより、いわゆるランタイムでスタイルを作っていたものが、サーバーコンポーネント上では使えない問題があるため、CSS ModulesやTailwind CSS、Panda CSSなどのゼロランタイム系のものが主な選択肢になると思いますが、トレンドをウォッチしつつ、開発チームやプロダクトにとって最適なものを選ぶことが肝心でしょう」と小林氏は語る。
最後に小林氏からは、チーム開発におけるポイントとして、Reactの話題に限らず、ライブラリの選択全般にかかわる注意点が示された。小林氏によれば、広く使われていることが十分に採用理由になる。何よりも、広く使われていればいるほど、数多くの知見やナレッジ、ノウハウがシェアされていることが期待できる。それを自分たちの開発に活かしていくことができるわけだ。
「もっとも、単に人気だから使うのではなく、なぜそのライブラリが人気を博しているかを理解し、使うメリット／デメリットをしっかりと抑えたうえで導入判断を行うことが重要です」と小林氏は強調する。
あわせて、導入に臨んで、ライブラリの利用を止めてしまうときのことも意識しておくことも必要だ。利用をやめる際にどのような作業が必要になりそうか、影響範囲がどの程度かといったことも十分に意識しておくべきである。
ともあれ、常に変化するニーズを抱えるWebフロントエンド開発において、Reactの活用が、今後も引き続き重要なカギを握っていくであろうことは間違いない。
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ライブラリの採用をご検討いただければと思います」と語り、講演をしめくくった。
長期利用が想定されるシステムでは将来にわたる安定供給が選定のカギ
以上、今回の「Web TECH FORUM 2023 Autumn」で実施された2つの講演の模様をレポートしてきたが、講演終了後には、受講者からの質問に講演者が答えるQ&Aのコーナーも設けられた。以下、そこで行われた2件の質疑応答をピックアップして紹介しておく。
その1つは「Webシステム構築において利用するフレームワークの選定基準として、例えば利用者数や利用対象者の一般／法人の別、ECサイトや基幹といったシステムの違いなどが考えられるが、どういう方針で臨むべきか」という質問だ。
これに対し小林氏は、フレームワークを選ぶときには、開発対象となるシステムがどういうものかが、一般的には選定基準になると強調。例えばECサイトの場合には、SEOにかかわる要件も入ってくるため、通常はサーバーサイドレンダリングの仕組みを選択することとなる。それにより、フレームワークの選択肢も絞られてくるわけだ。
さらに小林氏は「あとは、講演内でも触れましたが、いま世の中でどのライブラリがよく使われているのかという視点も重要だと思います。例えば、長期的にメンテナンスしていく必要のあるシステムでは、当然、将来にわたり安定的に提供され続けるフレームワークを選択する必要があるわけです」と応えた。
2つめは、「利用するライブラリを最小限にするために、定期的にメンテナンスしていく必要があるが、どれくらいの頻度でチェックするのが望ましいか」という質問である。これに対し小林氏は、「当然、それは開発のライフサイクルによって変わってくる。仮に1週間でスクラムを回しているなら週1回、2週間サイクルなら2週間のうちのどこかでアップデートチェックを行うといったプロセスをフローに組み込むかたちとなるでしょう」と語る。
もっとも、高頻度で細かなリリースを重ねるパッケージなどもあり、またチェックには相応の工数を要することから、やはりそこは全体のバランスを見ながら決めていくべきだという。「自分の経験則では、だいたい1週間から1カ月くらいのサイクルでチェックしているケースが多いかと思います」と小林氏は語る。
企業の業務にデジタル活用がますます浸透していく中、Webアプリケーションのフロントエンド領域にも、これまでにない高度なレベルで、機能性や使い勝手のよさにかかわる要件が課せられてきている。そうした要請に応える開発を推進していくうえでは、適宜周辺のフレームワークを併用したReactの活用が1つの重要なカギを握っているものといえる。開発者にとっては、引き続きその動向をしっかりとキャッチアップしていくことこそが肝要だ。
