成熟したエコシステムで提供される各種フレームワークを適宜活用
続いて、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の活用が、今後も引き続き重要なカギを握っていくであろうことは間違いない。