フロントエンドの作り方 — 素のJS/React/Vue と SPA/SSR/SSG

このページは入口（ハブ）です。まずここを読んで、上から順に各ページへ進んでください。

Webアプリの「見た目と操作」を作るのがフロントエンド。でも入口でいきなり、素のJavaScript・React・Vue・SPA・SSR・Next.js… と用語の壁が立ちはだかります。「結局どれで作ればいいの？」「“React がバックエンドでも動く”ってどういうこと？」——このモヤモヤを、完全未経験の人でも腹落ちするように整理します。

姉妹編 コンピューティングの選択肢（どこで動かす） と データの置き場所ガイド（どこに置く） に続く、「画面を どう作り・どこで描くか」の巻です。

いちばん大事な考え方：2つの問い 🧭

フロントエンドの選択肢は多いですが、たった2つの問いに分けると一気に見通せます。

問い①：何で作る？（命令的 → 宣言的）
   素のTS/JS … 自分で画面を手作業で書き換える（命令的）
   React / Vue … 「状態がこうなら画面はこう」と書くと、変化は自動で反映（宣言的・リアクティブ）

問い②：どこで描画する？（ブラウザ ↔ サーバー）
   SPA(CSR) … ブラウザのJSが画面を組み立てる（アプリ的・サクサク／初回は重い・SEO弱め）
   SSR/SSG  … サーバー側でHTMLを用意（初回が速い・SEO強い）
   ハイブリッド … ページごとに混ぜる（Next.js など。“一部だけサーバー”もできる）

💡 この2軸さえ持っておけば、新しい名前が出てきても「あ、これは①が宣言的で、②がサーバー寄りね」と地図の上に置けるようになります。

🍳 たとえで早見

  たとえ ひとことで
素のTS/JS 手で人形を動かす 自分でDOMを操作（命令的）。小さい用途なら十分
React / Vue 「今は喜び」と書けば笑顔になる 状態を書けばUIが追従（宣言的）。複雑な画面に強い
SPA（CSR） 材料を送って客が自分で調理 最初は待つが、以後の操作はサクサク
SSR 厨房で作って皿で出す すぐ食べられる（初回が速い・SEO○）→あとでJSで“動く”化
SSG 作り置きを出す 最速・最安・安全。内容が頻繁に変わらないもの向け

🔑 最初に覚える勘どころ

  • 🔒 SPAでもAPIキー・秘密はフロントに出さない。 SSR や React Server Components は「一部をサーバーで動かせる」ので、秘密をサーバー側に置けるのが利点（姉妹教材の「鍵を守る」と地続き）。
  • 🔎 SEO・初回の速さが要るなら SSR/SSG、アプリ的な操作中心なら SPA。
  • 🌱 まず素のHTML/JSで動かし、必要になってからフレームワーク。 最初から全部盛りにしない。
  • 🤝 姉妹教材（Twitter/ChatGPTクローン）が素のTS/JSで書いたのは「仕組みに集中するため」。実務では React/Vue が主流——その理由もこのガイドで分かります。

読み方

  • 各ページは「📖 ゴール → たとえ → しくみ →（小さなコード例）→ 向き/不向き → 代表ツール → 誰が使う → ことばメモ」。
  • むずかしさの目印：🟢 基礎（全員） ／ 🔧 応用（読み飛ばしOK）。
  • 急ぐ人は、まとめ（フローチャート＆早見表）だけでも判断material になります。

目次

第1部　何で作る？（フレームワーク）

第2部　どこで描画する？（レンダリング戦略）

第3部　道具とまとめ

この文書の到達点

最後まで読むと、こんなことができるようになります。

  • 「素のJS／React／Vue」「SPA／SSR／SSG」の違いをたとえで説明できる
  • 「React の一部がバックエンドで動く（RSC・Server Actions）」が何か分かる
  • 自分の用途（LP／SaaS／管理画面／ブログ／EC）から、最初の一手を選べる
  • jQuery のような“いにしえの技”も含め、新しい名前を2軸の地図に置ける