インフラ屋さんが React と Next.js をまとめてみた
はじめに
筆者は普段インフラエンジニアとして従事しており、開発経験はほとんどないペーペーです。
本記事の主な目的は自己学習のアウトプットですが、初学者の方の参考になればと思っております。
ここで取り扱う技術は React と Next.js （App Router）となります。
React
概要
React は Meta（旧 Facebook）が 2013年にオープンソース化した JavaScript ライブラリです。
コンポーネントと呼ばれるユーザーインターフェイス（UI）の部品を作るのに特化しています。
UI をコンポーネントの階層に分割する[1]
また、仮想 DOM 技術により、ページの表示を高速化することができます。
言語は JavaScript もしくは TypeScript で記述します。
TypeScript は JavaScript にトランスパイルできる静的型付け言語です。
ライブラリとフレームワークってなにが違うの？
- ライブラリ
- 特定の機能に特化したプログラム群
- アプリケーションコードがライブラリを呼び出す
- React はライブラリに該当する
- フレームワーク
- アプリケーション開発に必要な機能が一通り揃っている土台
- フレームワークがアプリケーションコードを呼び出す
- Next.js はフレームワークに該当する
仮想 DOM ってなに？
以下の記事がとても分かりやすかったです。
トレンド
「State of JavaScript 2023」によると、フロントエンドのライブラリの中で React は8年連続で使用率1位となっています。
State of JavaScript 2023 は JavaScript に馴染みのある世界中のエンジニアが回答したアンケートの結果をまとめたもので一定の信憑性があります。（日本の比率は少し低いですが、、）
Front-end Frameworks Ratios Over Time[2]
長年トップに君臨していることもあり、いわゆる枯れた技術になっています。
そのため、ネットに React 関連の情報が数多く存在し、情報収集が容易にできます。
また、オープンソースなので GitHub のリポジトリもあります。
Issue でバグの報告があったりするので同様の事例がないかここから確認できたりします。
Props
A Comprehensive Guide to Understanding States and Lifecycle Methods[3]
React コンポーネント同士がデータのやりとりをする際に Props というものを使います。
親コンポーネントは子コンポーネントに Props を渡すことで情報伝達ができます。
Props はオブジェクトや配列、関数などのあらゆる JavaScript の値を渡すことができます。
<MyComponent
age={25} // 数値
rate={100 * 0.5} // 数値
name={'John'} // 文字列
greeting={`Hi, my name is ${name}`} // テンプレートリテラル
info={{ name: 'John', gender: 'male' }} // オブジェクト
scores={[94, 98, 100]} // 配列
name={name} // 変数
isAdmin={false} // 真偽値
onClose={() => {console.log()}} // 関数
leftIcon={<Icon />} // Reactコンポーネント
now={new Date()} // インスタンス
wtf={null} // null
/>
State
React コンポーネントは state（状態）を設定できます。
state が変更されると自動的に再レンダリングされます。（リロードではないです）
コンポーネントに state を設定するには useState を使います。
レンダリングのトリガー条件
- 初期レンダリング
- コンポーネント（またはその親コンポーネント）の state 更新
// 構文
const [state, setState] = useState(initialState)
// 例
const [count, setCount] = useState(0)
フレームワーク
React はフレームワークを利用することを公式が推奨しています。
様々なフレームワークがありますが、ここでは Next.js の App Router について学習します。
※フレームワークの選定は以下の Speaker Deck を参考にさせていただきました。
Next.js
概要
Next.js は Vercel 社が開発した React をベースにしたオープンソースフレームワークです。
Next.js の特徴として以下のようなものがあります。
-
ルーティング
ルーティング（ページ遷移）を自動で作ってくれる -
レンダリング
ページを表示する前に、サーバー側で HTML を作る SSR（Server Side Rendering） や、Web アプリのビルド時に HTML を生成する SSG（Static Site Generation）が利用できる -
スタイリング
CSS を書くための便利な機能が用意されている -
最適化
画像サイズを自動で最適化してくれる
SSRって？SSGって？
イメージは以下の通りです。（SPAも含めて説明してます）
SPA（Single Page Application）
- レンダリングはクライアントで行われる
- API のデータ取得はクライアントから行われる
SSR（Server Side Rendering）
- レンダリングは Web サーバで行われる
- API のデータ取得は初回は Web サーバから、以降はクライアントから行われる
SSG（Static Site Generation）
- レンダリングはビルド時（リクエスト前）に Web サーバで行われる
- API のデータ取得は初回はビルド時に Web サーバから、以降は API のデータ取得ができない
RSC（React Server Components）やレンダリングの細かいプロセスは以下がとても分かりやすかったです。
トレンド
「State of JavaScript 2023」によると、メタフレームワークの中で Next.js は6年連続で使用率1位となっています。
メタフレームワークとはレンダリングやWebアプリの提供に重点を置いたフレームワークのことです。
Meta-Frameworks Ratios Over Time[4]
App Router
これまでの Next.js のルーティング機能は Pages Router と呼ばれるものでしたが、v13 でより高度な機能を持つ App Router が実装されました。
ここでは App Router で追加/変更された大きなポイントをまとめております。
ルーティング方式の変更
Next.js ではファイルベースのルーティングを採用しており、ディレクトリ構成に基づいてルーティングが実装できます。
Pages Router では pages/ 配下にルーティングの対象となるファイルを置いていました。
App Router では app/ 配下のディレクトリに page.js を置くことでルーティングが可能になります。
例えば、/example でルーティングする場合、次のような違いがあります。
### Pages Router
pages/
└ example.js
### App Router
app/
└ example/
└ page.js
初期コンポーネントの変更
Pages Router の初期コンポーネントは、クライアントコンポーネントとして設定されていました。
App Router の初期コンポーネントは、サーバーコンポーネントとして設定されています。
クライアントコンポーネント・サーバーコンポーネントって？
クライアントコンポーネント：クライアント側でレンダリングする
サーバーコンポーネント：事前にサーバー側でレンダリングし、クライアントに送信する
Pages Router ではgetStaticProps getServerSidePropsといったデータフェッチメソッドがありましたが、App Router ではそもそもサーバーコンポーネントのため不要になります。
また、App Router でもファイルの1行目にuse clientと記述することでクライアントコンポーネントとして機能させることも可能です。
データ取得処理のキャッシュ化
1つのページで同じデータを複数コンポーネントで使う場合、Pages Router ではデータ取得を複数回実行するか、propsで受け渡しをする必要がありました。
App Router ではデータ取得のキャッシュ化に対応しているので複数のデータ取得が行われても1回の実行で済みます。
Request Memoization[5]
Pages Router との差異は以下の記事も参考にさせていただきました。
App Router の批判
上記を調べていく中で、App Router に関する批判的な意見もありました。
Next.js は React の煩雑な設定をよしなにやってくれるのが魅力だったものが、サーバーコンポーネント/クライアントコンポーネントなど考慮することが多くなってしまったというのが主な理由のようです。
ただ、技術的には App Router を評価しているものが多く、システム要件や開発工数に応じて Pages Router との棲み分けや Next.js を使わないという選択肢も必要になってきそうです。
以下の記事を参考にさせていただきました。
まとめ
React は JavaScript ライブラリです。
Next.js は React をベースにしたフレームワークです。
一定の批判はあるものの、ともに長年にわたって使用率1位という客観的な指標があります。
今後も重要な技術スタックであることは間違いないかと思います。
Discussion