Reactを勉強していると、Node.jsやnpm以外にも色々な横文字が出てくるので、
改めてこれらは何なのか？を整理しました。
※前回のNode.js/npmについて整理した記事の続きです。
ビルドツール周り
Webpack / Vite
WebpackとViteは、
複数のファイルを一つにまとめてブラウザ向けに最適化するツールです。（モジュールバンドラーとも呼ばれます）。
JavaScript、CSS、画像など、ウェブサイトを構成する様々なファイルを依存関係を解決しながら統合し、
ブラウザでの読み込み速度を向上させます。
WebpackはかつてReact開発の標準でしたが、設定が複雑で動作が重くなりがちなため、
React単体で新規開発する際は、
Webpackの課題（速度）を解消した、Viteを使うのが主流のようです。
Babel（バベル）
トランスパイラ（翻訳機）と呼ばれるツールの一つがBabelです。
React特有の書き方（JSX）や、最新のJavaScriptを、古いブラウザでも動く普通のJavaScriptに「翻訳」します。
- 役割: 日本語（Reactコード）を英語（ブラウザが読めるコード）に翻訳してくれる通訳さんのような存在。Webpackなどの裏側で勝手に働いてくれています。
レンダリング技術周り
クライアントサイドレンダリング（CSR）
クライアントサイドレンダリングは、簡単に言えば、ユーザーのブラウザ上でWebページの内容を動的に生成する技術のことです。
https://www.landinghub.net/columns/client-side-rendering
具体的には、サーバーから届くのは「空の箱（HTML）」だけ。その後、手元のブラウザでReactが中身をせっせと組み立てて表示する仕組みです。
- 解説: 通常のReactアプリ（SPA）はこの方式です。
- メリット: ページ遷移がサクサク動く（アプリっぽい挙動になる）。
- デメリット: 初回の読み込みに少し時間がかかる。SEOに弱い場合がある。
- イメージ: 席についてから「自分で具材を焼く」焼肉や鍋スタイル。
サーバーサイドレンダリング（SSR）
「ユーザーからリクエストがあるたびに、サーバー（Node.js）側でHTMLを作って返す」仕組み。
- メリット: 常に最新の情報を表示でき、SEOにも強い。
- イメージ: 注文が入ってから料理を作る「オーダーメイド」。
静的サイト生成（SSG）
「ビルドするときに、あらかじめHTMLを全部作っておく」仕組み。
- メリット: ページの表示が爆速になる。サーバー負荷が軽い。
- イメージ: 先にお弁当を作って並べておく「作り置き」。
Reactのフレームワーク
Next.js
Reactを使用したサーバーサイドレンダリング（SSR）や静的サイト生成（SSG）に対応したフルスタックなWebアプリケーションフレームワークです。
クライアントサイドだけでなくサーバーサイドでのレンダリングも可能にすることで、初期表示速度の向上やSEO対策に役立ちます。
一言でまとめると
-
Webpack / Vite
バラバラの素材（JS/CSS）を一つにまとめる 「工場」 -
Babel
Reactの特殊な書き方をブラウザ用に直す 「通訳」 -
CSR / SSR / SSG
画面（料理）をどのタイミングで作って出すかという 「提供スタイル」 -
Next.js
それらを全部よしなにやってくれる 「フレームワーク」
おわりに
Next.jsについて、「Reactもよくわかってないのに挑戦するのは…」と思っていましたが、
これらの用語を整理してみて、そろそろ挑戦したい気持ちが湧いてきました。
🍌NanoBanana君による解説漫画
