フロントエンドの全体像 — 「何で作る」×「どこで描画する」
📖 このページのゴール：フロントエンドの数えきれない選択肢（素のJS・React・Vue・SPA・SSR・Next.js…）を、バラバラの暗記項目ではなく、たった2つの問いでできた1枚の地図の上に並べられるようになること。この地図さえ手に入れば、あとのページがぐっと読みやすくなり、この先どんな新しい名前が出てきても怖くなくなります。 ← 目次・はじめにへもどる
🧭 いちばん大事なこと：選択肢は「2つの問い」で見通せる
最初に、このガイドでいちばん大事なことを言ってしまいます。フロントエンドの技術がたくさんあるように見えるのは、軸を持たずに眺めているからです。 次のたった2つの問いに分けると、一気に見通せます。
問い① 何で作る？ … 命令的（素のTS/JS） → 宣言的（React/Vue）
問い② どこで描画する？ … ブラウザ（SPA） ↔ サーバー（SSR/SSG） ↔ 混ぜる（ハイブリッド）
このガイドは、ぜんぶこの2軸の上に乗っています。横軸（問い①）が「道具」、縦軸（問い②）が「描く場所」。 どんな新しい流行り言葉も、この2軸の交差点のどこかに置けます。では、ひとつずつほどいていきます。
🛠️ 問い①「何で作る？」— 手で動かす vs 状態を書く
まず言葉をほどきます。フロントエンドは結局、画面（DOM）を書き換える仕事です。
🟢 DOM（ドム） … ブラウザが持っている「画面の部品ツリー」のこと。ボタン・文字・画像などが枝分かれして並んでいます。JavaScript がこのツリーを書き換えると、表示が変わります。 フロントエンドの正体は、つきつめると「DOMをどう書き換えるか」です。
その「書き換え方」に、大きく2つの流派があります。
🤖 命令的（素のTS/JS）＝手で人形を動かす
命令的（めいれいてき）とは、やることを1手順ずつ自分で指示するやり方です。素のJavaScript はこちら。「このボタンが押されたら、この文字を取り出して、この場所のDOMをこう書き換えろ」と、手順をぜんぶ自分で書きます。
🤖 たとえるなら、手で人形を動かすのと同じ。「右手を上げろ」「次は左足を出せ」と、動きを毎回ぜんぶ指示します。思いどおりに動かせますが、複雑な動きになるほど指示の量が爆発します。
🪄 宣言的（React / Vue）＝「今は喜び」と書けば笑顔になる
宣言的（せんげんてき）とは、手順ではなく「結果（こうあってほしい状態）」を書くやり方です。React や Vue はこちら。「いまの状態がこうなら、画面はこう」とだけ書いておくと、実際のDOMの書き換えはフレームワークが裏で勝手にやってくれます。
🪄 たとえるなら、人形に「今は“喜び”」と書いた札を貼るだけで、勝手に笑顔の姿になるようなもの。あなたは「どう動かすか」ではなく「どうなっていてほしいか」を書くだけ。手順は人形（フレームワーク）が面倒を見ます。
この「状態を変えれば画面が自動で追いつく」性質を リアクティブ（reactive＝反応する）と呼びます。React の名前もここから来ています。
| 命令的（素のTS/JS） | 宣言的（React / Vue） | |
|---|---|---|
| たとえ | 🤖 手で人形を動かす | 🪄「今は喜び」と書けば笑顔になる |
| あなたが書くもの | 手順（どう書き換えるか） | 状態（どうあってほしいか） |
| DOMの書き換え | 自分でやる | フレームワークが自動でやる（リアクティブ） |
| 向いている規模 | 小さい・単純な画面 | 大きい・複雑で変化の多い画面 |
🟢 どちらが偉い、ではありません。 小さな飾り程度なら素のJSで十分。状態がたくさん絡む複雑な画面ほど、宣言的（React/Vue）が効いてきます。これが本書 02〜05ページのテーマです。
🍳 問い②「どこで描画する？」— 厨房で作る？客が作る？作り置き？
次は縦軸。同じ画面でも、「画面を組み立てる（＝レンダリング）作業を、どこでやるか」で性格がまるで変わります。
🟢 レンダリング … 画面を組み立てて表示すること。この作業をブラウザ側でやるか、サーバー側でやるかが、ここでの分かれ道です。
ここは料理の出し方でたとえると一生忘れません。
| 描画の場所 | たとえ（料理の出し方） | ひとことで | 主な英略語 |
|---|---|---|---|
| ブラウザで描く | 🍳 材料(JS)を送って、客が自分で調理 | 最初は待つが、以後の操作はサクサク | CSR / SPA |
| サーバーで描く | 👨🍳 厨房で作って、皿で出す | すぐ食べられる（初回が速い・SEOに強い） | SSR / SSG / MPA |
| 混ぜる | 🍱 作り置きも厨房も注文も使い分け | ページごとに良いとこ取り | ハイブリッド |
少しだけ言葉をほどきます（詳しくは第2部 06〜09ページ）。
- 🟢 SPA（CSR） … SPA＝シングルページアプリケーション、CSR＝クライアントサイドレンダリング。サーバーはほぼ空のHTMLと、JSの束を送るだけ。画面を組み立てるのはブラウザのJSです。🍳 材料を送って客が調理するスタイル。最初の調理（JSのダウンロードと実行）に時間がかかりますが、いちど動き出せばページ遷移はサクサク。
- 🟢 SSR（サーバー描画） … SSR＝サーバーサイドレンダリング。サーバーで完成HTMLを作って送るので、👨🍳 厨房で作った皿が出てくるようにすぐ見られて、検索エンジンにも優しい。
- 🟢 SSG（作り置き） … SSG＝静的サイト生成。前もって（ビルド時に）HTMLを作り置きしておき、配信するだけ。最速・最安・安全。ブログやLP（ランディングページ）など、内容があまり変わらないもの向き。
- 🟢 MPA（昔ながら） … MPA＝マルチページアプリ。リンクを押すたびにサーバーが新しいHTMLを返して毎回ページを読み直す、いにしえの基本形です。
- 🟢 ハイブリッド … Next.js などが代表。🍱 1つのサイトの中で、ページごとに「ブラウザ描画／サーバー描画／作り置き」を混ぜます。 「一部だけサーバーで動かす」こともでき、ここが後で効いてくる勘どころです。
💡 横軸（問い①）と縦軸（問い②）は別の話です。「React（宣言的）でSPA」も「React でSSR」もある。「素のJS でSPA」も「素のJS でMPA」もある。道具（①）と描く場所（②）は、自由に組み合わせられます。
🗺️ だから、新しい名前が出てきても怖くない
このガイドのいちばんの狙いはここです。流行り言葉に振り回されない1枚の地図を持つこと。
宣言的（状態を書く：React/Vue）
▲
React の SPA │ Next.js / Nuxt
Vue の SPA │ （ハイブリッド・一部サーバー）
│
ブラウザで描く ◀────────┼────────▶ サーバーで描く
（SPA / CSR） │ （SSR / SSG / MPA）
│
素のJS の SPA │ 昔ながらのMPA / Astro(作り置き)
▼
命令的（手順を書く：素のTS/JS）
🟢 新しい名前が出てきたら、こう問うだけ。「これは①が命令的か宣言的か？」「②はブラウザ寄りかサーバー寄りか、混ぜるのか？」——たいていの流行りは、この2軸の地図のどこかにぽんと置けます。 用語そのものより、地図の上の位置でつかむのがコツです。
🔑 最初に握っておく勘どころ
各ページでくり返し出てくる「背骨」を、先に3つだけ。
- 🔒 SPAでも、APIキー・秘密はフロントに出さない。 ブラウザに送ったJSは中身が丸見えです。一方、SSR や「一部をサーバーで動かす」仕組みなら、秘密をサーバー側に置けるのが利点（姉妹教材の「鍵を守る」と地続き）。
- 🔎 SEO・初回の速さが要るなら SSR/SSG、アプリ的な操作中心なら SPA。 用途が描く場所を決めます。
- 🌱 まず素のHTML/JSで動かし、必要になってからフレームワーク。 最初から全部盛りにしない——これがいちばんやさしい入り口です。
🤝 姉妹教材（Twitter/ChatGPTクローン）が素のTS/JSで書かれているのは、「仕組みに集中し、フレームワークに依存しない」ため。実務では React/Vue が主流です——その両方の理由を、このガイドで回収します。
🔗 「どこに置く？」は姉妹編と地続き
「どこで描画するか（②）」が決まると、次に「できたものを どこに置いて配るか（ホスティング）」が問題になります。これは姉妹編とそのまま地続きです。
- SPA / SSG（作り置き・JSの束）→ 静的ホスティング（Vercel / Netlify / Cloudflare Pages / GitHub Pages …）。
- SSR（サーバーで都度作る）→ サーバー／サーバーレス（Vercel / Netlify Functions / Cloudflare Workers …）。
これらの「置き場所（PaaS・サーバーレス）」の中身は、姉妹編 コンピューティングの選択肢 で1本のはしごとして解説しています。本書とあわせて読むと、「何で作り → どこで描き → どこに置くか」が一直線につながります。
📖 この先の読み方
このページで手に入れた「2つの問いの地図」が、全ページ共通の土台です。この先はこう進みます。
- 第1部（02〜05）＝問い①「何で作る？」：素のTS/JS → React → Vue → その他（jQuery/Svelte/Solid/Angular）の順で、同じ小さなUIを見比べながら、命令的→宣言的の流れをつかみます。
- 第2部（06〜09）＝問い②「どこで描画する？」：SPA → SSR → SSG → メタフレームワーク（Next.js/Nuxt/Astro）。どこで何が起きるかを1つずつ。
- 第3部（10〜12）＝道具とまとめ：ビルドツール（Vite）とホスティング → フローチャート＆早見表 → 用語ミニ辞典。
急ぐ人は、まずこの地図だけ頭に入れて、第3部のまとめ（フローチャート＆早見表）へ飛んでも、最初の一手は選べます。
🟢 ひとことで言うと
フロントエンドの選択肢は多く見えますが、正体はたった2つの問い——「①何で作る？（命令的な素のJS → 宣言的なReact/Vue）」と「②どこで描画する？（ブラウザのSPA ↔ サーバーのSSR/SSG ↔ 混ぜるハイブリッド）」——でできた1枚の地図です。横軸が道具、縦軸が描く場所で、両者は自由に組み合わせられます。新しい名前が出てきても、この2軸の上に置けば迷子になりません。