どれを選ぶ？ — フローチャート＆比較早見表＆ペルソナ/用途別

📖 このページのゴール：ここまでの全部を1枚に。何で作る × どこで描画するを、フローチャートと早見表で自分の状況に当てはめて選べるようになる。 ← 目次・はじめにへもどる

🧭 選び方フローチャート

問い①：何で作る？

画面はどのくらい複雑？
├─ ごく小さい / 学習中 / 1ファイルで十分
│        → 素のTS/JS（バニラ）
└─ 状態が増えて複雑・再利用したい
         → React か Vue
              ├─ まず学びやすさ・バランス重視     → Vue
              └─ エコシステム・求人・案件の多さ重視 → React
         （※ 超高速が要る→Solid、記述を減らしたい→Svelte、企業の大規模全部入り→Angular）

問い②：どこで描画する？

SEO（検索で見つかる）や 初回表示の速さ は重要？
├─ 重要 ＆ 内容はあまり変わらない（ブログ/LP/ドキュメント）
│        → SSG（作り置き）
├─ 重要 ＆ 中身が動的（EC・メディア・公開Webアプリ）
│        → SSR / ハイブリッド（Next.js など）
└─ あまり重要でない（ログイン後の管理画面・社内ツール）
         → SPA（CSR）

「秘密をサーバーで扱いたい」「ページごとに最適化したい」
         → ハイブリッド（Next.js の RSC / Server Actions）

📊 比較早見表その1 — 何で作る（フレームワーク）

	学習	宣言的か	向く規模	エコシステム	代表メタFW
素のTS/JS	◎ 易	✕（命令的）	小	—	—
React	△ やや急	◎	中〜特大	◎ 最大	Next.js
Vue	◎ 易しめ	◎	小〜大	○	Nuxt
Svelte	○	◎（コンパイラ）	小〜中	△ 成長中	SvelteKit
Angular	✕ 重い	◎（全部入り）	大（企業）	○	（本体に内蔵）

📊 比較早見表その2 — どこで描画する（戦略）

	初回表示	SEO	サーバー要否	向く用途
SPA（CSR）	△ 重い	△ 弱め	不要（静的配信）	管理画面・ダッシュボード・社内ツール
SSR	◎ 速い	◎ 強い	要（毎回生成）	EC・メディア・公開Webアプリ
SSG	◎ 最速	◎ 強い	不要（作り置き）	ブログ・LP・ドキュメント
ハイブリッド	◎	◎	ページによる	上記の混在・本格的なプロダクト

🧑‍🤝‍🧑 ペルソナ別おすすめ

立場	おすすめの組み合わせ	なぜ
個人 / 趣味	Astro（SSG）＋静的ホスティング（無料） / 小さな動きは素のJSやVue	速い・安い・学びやすい
スタートアップ	Next.js（SSR/RSC）＋Vercel、または React/Vue の SPA	速度・人材・一気に作れる
中堅ベンチャー	Next.js / Nuxt（ハイブリッド）＋デザインシステム	SEOも操作性も両立、運用効率
大企業	React か Angular、SSR、厳格な型/テスト	大規模・チーム・保守性

🎯 用途別おすすめ

ブログ / LP / ドキュメント → SSG（Astro / Next）
管理画面 / 社内ツール → SPA（React or Vue）
EC / 公開Webアプリ（SEO重要） → SSR / ハイブリッド（Next.js）
とにかく小さく / 学習 → 素のTS/JS

🧭 迷ったら

学ぶ順：まず 素のTS/JS（仕組みが分かる）→ React か Vue（実務の主力）。
作るなら：個人サイト/LP は Astro（SSG）、本格プロダクトは Next.js、小さな社内ツールは Vue の SPA が気持ちよく始められます。
そして——最初から全部盛りにしない。素のHTML/JSで動かしてみて、つらくなったらフレームワーク、というステップが、結局いちばんの近道です。

🟢 ひとことで言うと

選択は ①何で作る（素のJS→React/Vue）× ②どこで描画する（SPA/SSR/SSG/ハイブリッド） の掛け算。SEO・初回速度が要るならサーバー寄り（SSR/SSG）、アプリ操作中心ならSPA、いいとこ取りはNext.js。迷ったら「素のJS→React/Vue、サイトはSSG、プロダクトはNext.js」。

➡️ 次へ

最後に、出てきた用語をふりがな付きの辞典でおさらいします。

次のページ：用語ミニ辞典 →

← 目次・はじめにへもどる