Zenn
⚛️

Reactはただのライブラリである

2024/04/05に公開
Next.js
React
tech

最近、Reactはライブラリであるということが腑に落ちました。
自分がなぜ腑に落ちたのか言語化しておこうと思います。

初めに

この記事の内容はReactでは何ができて、Next.jsでは何ができるのかの基礎的な部分を認識されている方が読むと何を書いているのか把握できると思います。(そうでない方には読みづらい文章となってしまっているかもしれません。)

  • 著者について
    • 3年前にプログラミングを学び始めて、エンジニアとして2年ほどWebアプリの開発
    • フロントエンドはReact製のWebアプリやNext.js製のWebアプリ(在籍時点ではアプリの特性上、SSRやSSGは使用していない)での開発の経験

それくらいのエンジニアがこの記事を書いていると思いご覧いただければと思います。

プログラミング初学者だった私のReactの認識

プログラミングを学び始めてReactに出会った頃の私

  • ドキュメントに書かれているからライブラリなのだろうと安直な紐付けで認識
  • Reactはフロントエンドを構築するためのものとかなり抽象的な認識

Reactの公式ではトップページに以下のように記述されています。

旧公式ドキュメント
A JavaScript library for building user interfaces
https://legacy.reactjs.org/

新公式ドキュメント
The library for web and native user interfaces
https://react.dev/

ご覧の通り、Reactはライブラリであると書かれています。

なぜReactがライブラリなのかをぼんやりとしたまま、エンジニアとして2年の月日が流れました。

Next.jsのApp Routerの登場

2023年5月にNext.js 13.4のリリース*3でApp Routerがstableになりましたね。
App Routerの登場がきっかけで、App Router及びReact Server Componentがどういうものなのかを調べるようになりました。

調べていく中で、React製とNext.js(App Router)製のWebアプリ上の役割は次のように区分できます。

役割 React製 Next.js(App Router)製
UI構築 React React
レンダリング 基本的にはClientで行う デフォルトはServerで行い、Clientで行うように記述することも可能
コンポーネントルーティング React Routerライブラリ ファイルベースシステムルティング
状態 React Hooksや状態管理ライブラリ Server Componentでは行われない
データフェッチ Web APIのFetch関数やSWRなどのフェッチライブラリ 内製したFecth関数(Web APIのFetch関数を利用)
DBアクセス Clientでは行えない Server ComponentでDB ClientやORMを用いて可能
  • 上記からわかったこと
    • Next.js(App Router)でのReactの役割はUI構築のみであること
    • 従来のWebアプリのフロントエンドでもReactはUI構築のみ行なっていること
    • Next.jsはReactのフレームワークと言えるだけの機能を備えている
      • React製のWebアプリで行なっていたルーティングやデータフェッチはNext.jsが内製化
      • フロントエンドでの状態管理(APIレスポンスの値)はReact Server ComponentがDBアクセスできるようになったため、不要になる

そのため、Next.jsの公式で書かれている通り(Next.js is a React framework for building full-stack web applications *4)、Next.jsはReactのフレームワークということに納得しました。

結論

以上のことから、ReactはUIを構築する部品(関数やコンポーネント)を提供するライブラリであると言えるのではないでしょうか

  • Next.jsのPages Routerは、Reactのフレームワークというにはしっくりきていませんでした。
    • ReactのSPAを使える一方で、ページ全体をSSRやSSGする側面もあり、コンポーネント単位でUIを構築するReactのフレームワークであるとは考えられませんでした。
      • (私にとってNext.jsはReactを含むWebアプリを構築するためのツールのような立ち位置だった)
    • そうと言えるだけの根拠が自分には見つけられていなかっただけかもしれませんが...
  • 決め手になったこと
    • React Server Componentを搭載したApp Routerのリリースによって、サーバー上でコンポーネント単位のレンダリングできるようになりました。

それを知って、Reactがライブラリであるということが腑に落ちました。

これらは非常に大きなメンタルモデルとなるため、心に留めておきます。

【余談】
フロントエンド界隈ではCSRやSSR、SSG、ISRなどのレンダリング手法がNext.js(Pages Router)以降から注目を浴びてきました。さらにはReactによってSPAとMPAというWebアプリ区分もなされてきました。

これらを知っている方々からするとReact Server ComponentやApp Routerの台頭によって、前述したレンダリング手法やWebアプリ区分が主流でなくなっていく未来がやってくる気がします。

実際にO'Reilly社が出版したFluent ReactのChapter9に以下の文章が書かれていました。

This advanced application architecture combines the best aspects of server rendered multipage apps (MPAs) and client-rendered SPAs, delivering a seamless user experience without compromising on performance or maintainability

※ This advanced application architectureはReact Server Componentsを活用したWebアプリケーションのことです

上記の文章の通り、MPAとSPAの混在したWebアプリを開発することができるようになります。

これらは大きなパラダイムシフトであることは間違いないです。

私たちには、今までのフロント界隈でのメンタルモデルを大きく書き換えることが求められます。
すごく大変なことですが、最新の技術を取り入れていくことがユーザーに、より便利で快適なWebアプリを提供できる未来があることにワクワクをせずにはいられません。

もっとReactやNext.jsのことについて学んでいこうと思います。

参照

*1 : ライブラリとは？利用するメリットや注意点をわかりやすく解説
*2 : フレームワークとは？概要やプログラミング言語別の機能を分かりやすく解説
*3 : Next.js 13.4
*4 : Next.js/Introduction
*5 : Fluent React/Chapter9. React Server Components

Discussion