🎯 Reactとは
- 2013年に Facebook（現Meta） が公開した JavaScript ライブラリ
- 「ユーザーインターフェース（UI）を作るためのツール」
- 特徴は 宣言的 & コンポーネント指向
🤔 なぜ生まれたのか？
背景
2010年代前半、Webアプリが急激に複雑化していた。
-
Facebookのニュースフィードや「いいね！」ボタンみたいに、
ページ全体をリロードせず部分的にUIが変わる仕組みが求められていた。 -
jQueryでDOM操作をゴリゴリ書くやり方だと
- 状態と画面がズレる
- バグが増える
- メンテがつらい
解決のアプローチ
React は次の発想を持ち込んだ：
-
UI = 状態の関数
- 「今のデータ（状態）をもとにUIを描くだけ」
- 状態が変われば、Reactが自動でDOMを最適更新してくれる
-
コンポーネント化
- UIを小さな部品に分ける（ボタン、入力欄、リストなど）
- 再利用しやすくなり、大規模開発でも整理しやすい
-
仮想DOM (Virtual DOM)
- 状態が変わるたびに「全UIを再描画する」つもりで書ける
- 実際には差分だけDOM更新して効率化
🌍 その結果
- 「DOMを手動でいじる負担」から解放
- 宣言的に「こう表示して」と書くだけでよくなった
- 今ではReactがフロントエンド開発のデファクトスタンダードに
イメージ比喩
- 従来のJS/jQuery：黒板にチョークで書いて、消しゴムで部分修正していく
- React：毎回「正しい黒板の全体図」を用意 → React が差分だけ消して書き直す
1. React ＝ UIを作るライブラリ
-
「コンポーネント」という部品を組み立てて画面を作るための基盤
-
でも React だけだと…
- ページ遷移の仕組み（ルーティング）がない
- サーバーサイドでの処理がない
- SEOに弱い（最初は空HTML → 後からJSで描画するから検索に引っかかりにくい）
2. Next.js ＝ React を土台にしたフレームワーク
-
Vercel 社が開発
-
React を使いやすくする機能が全部入り
- ルーティング（ファイル構造に基づく自動ページ遷移）
- サーバーサイドレンダリング（SSR） / 静的サイト生成（SSG）
- API Routes（簡単なバックエンド機能）
- 最適化（画像、フォント、コード分割など）
3. 関係性イメージ
- React → 「LEGOのブロック」
- Next.js → 「LEGOで家を作るための設計図＋道具セット」
つまり、Next.js は React をベースにして 「アプリとして完成させる」ための枠組みを与えてくれる。
4. 実務的にどう違う？
- 小さい練習 → React 単体でOK（コンポーネントの概念を理解）
- 本番アプリ → Next.js の方が便利（ルーティング・SEO・API連携が楽）