SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

「Web TECH FORUM」開催レポート byメシウス(AD)

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

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

  • X ポスト
  • このエントリーをはてなブックマークに追加

成熟したエコシステムで提供される各種フレームワークを適宜活用

 続いて、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の活用が、今後も引き続き重要なカギを握っていくであろうことは間違いない。

【Before】React Server Componentsではサーバー側でのレンダリングの結果をツリー構造でクライアント側に渡し、受け取ったクライアント側での差分更新が可能。
【Before】React Server Componentsではサーバー側でのレンダリングの結果をツリー構造でクライアント側に渡し、受け取ったクライアント側での差分更新が可能。
【After】React Server Componentsではサーバー側でのレンダリングの結果をツリー構造でクライアント側に渡し、受け取ったクライアント側での差分更新が可能。
【After】React Server Componentsではサーバー側でのレンダリングの結果をツリー構造でクライアント側に渡し、受け取ったクライアント側での差分更新が可能。

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

関連リンク

この記事は参考になりましたか?

  • X ポスト
  • このエントリーをはてなブックマークに追加
この記事の著者

丸谷 潔(マルタニ キヨシ)

 フリーランスライター。1963年生まれ。慶應義塾大学文学部卒。システム開発(メインフレーム、OS/2等)、IT関連雑誌・書籍の編集を経て現職。執筆領域はIT系全般、FA系など。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

提供:メシウス株式会社

【AD】本記事の内容は記事掲載開始時点のものです 企画・制作 株式会社翔泳社

この記事は参考になりましたか?

この記事をシェア

  • X ポスト
  • このエントリーをはてなブックマークに追加
CodeZine(コードジン)
https://codezine.jp/article/detail/18625 2023/11/30 19:19

おすすめ

アクセスランキング

アクセスランキング

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング