この記事の要点

主要 4 大: React (Meta) / Vue.js (Evan You) / Angular (Google) / Svelte (Rich Harris) メタフレームワーク: Next.js (React) / Nuxt.js (Vue) / SvelteKit / Remix 新世代: Astro (MPA / Islands) / Qwik (Resumability) / Solid.js (Signals) レンダリング戦略: CSR / SSR / SSG / ISR / RSC を用途で使い分け シェア順: React > Vue > Angular > Svelte。学習曲線は逆順 (Svelte が易しい)

主要フレームワーク早見表

名前	開発元	初版	特徴	用途
React	Meta (旧 Facebook)	2013	仮想 DOM / コンポーネント / Hooks	SPA 全般 / シェア No.1
Vue.js	Evan You (個人 OSS)	2014	テンプレ + Composition API / 学習易	SPA / 中規模プロジェクト
Angular	Google	2016 (v2+)	フルスタック / TS 必須 / DI	エンタープライズ大規模
Svelte	Rich Harris	2016	コンパイラ型 / 仮想 DOM 無し / バンドル小	小〜中規模 / 高速
Solid.js	Ryan Carniato	2021	Signals / React 風文法で高速	パフォーマンス重視
Preact	Jason Miller	2015	3KB の React 互換	軽量化したいとき
Lit	Google	2018	Web Components ベース	デザインシステム配布

メタフレームワーク (フルスタック)

名前	ベース	特徴
Next.js	React	SSR/SSG/ISR/RSC、App Router、Vercel
Nuxt.js	Vue 3	Nuxt 3 で完全リライト、Nitro エンジン
SvelteKit	Svelte	ファイルベースルーティング、Vite ベース
Remix	React	Web Standard 重視、Loader/Action 設計
Astro	マルチ (React/Vue/Svelte)	MPA + Islands、デフォルト JS ゼロ
Qwik	独自	Resumability で初回ロード超高速
Fresh	Preact + Deno	Deno Deploy ファースト

React の基本コード

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

export default Counter;

Vue.js (Composition API) の基本コード

<script setup>
import { ref } from 'vue';

const count = ref(0);
const increment = () => count.value++;
</script>

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template>

Angular の基本コード

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <p>Count: {{ count }}</p>
    <button (click)="increment()">+1</button>
  `,
})
export class CounterComponent {
  count = 0;
  increment() { this.count++; }
}

Svelte の基本コード

<script>
  let count = 0;
</script>

<p>Count: {count}</p>
<button on:click={() => count++}>+1</button>

<style>
  button { padding: 8px 16px; }
</style>

レンダリング戦略

戦略	説明	用途
CSR (Client Side Rendering)	ブラウザで JS が DOM を組み立て	管理画面、ダッシュボード
SSR (Server Side Rendering)	サーバで HTML を組み立てて返す	SEO 必要、動的データ
SSG (Static Site Generation)	ビルド時に全 HTML 生成	ブログ、ドキュメント
ISR (Incremental Static Regen)	SSG + 一定時間で再生成	EC、ニュースサイト
RSC (React Server Components)	サーバ側コンポーネント、JS 送信せず	Next.js App Router
Islands	静的 HTML + 部分的にハイドレーション	Astro / Fresh
Resumability	ハイドレーション不要、続行	Qwik

シェアとトレンド (2026 時点)

• React: 40%+。求人数も最多。実質デファクト
• Vue: 15-20%。中国圏で特に強い。学習曲線が緩い
• Angular: 10-15%。大企業 / SI 業界で安定
• Svelte: 5-10%。「使ってみたいフレームワーク」上位常連
• Solid / Qwik: 数%。技術愛好家層で人気

State of JS / Stack Overflow Developer Survey で毎年集計あり。

用途別おすすめ

用途	おすすめ	理由
SaaS / SPA 全般	Next.js (React)	シェア・求人・情報量で安全パイ
個人ブログ・LP	Astro	静的 HTML 主体で爆速 / SEO 完璧
大規模エンタープライズ	Angular	規約強・DI・テスト・i18n フル装備
中規模・チーム新人多め	Nuxt (Vue)	学習しやすい / テンプレ書きやすい
パフォーマンス最重視	Solid / Qwik / Svelte	仮想 DOM 無 or Resumability
EC・ニュース・コンテンツ	Next.js (ISR)	頻繁更新と SEO のバランス
ドキュメント / 技術ブログ	Astro / VitePress / Docusaurus	MDX サポート

学習曲線

易しい順: Svelte / Vue < React < Angular

• Svelte: HTML/CSS/JS を素直に書ける感覚
• Vue: ディレクティブ / SFC のお作法を覚えるだけ
• React: JSX / Hooks / 状態管理エコシステム選定
• Angular: TS / RxJS / DI / モジュール / CLI など覚える量が多い

FAQ

Q: 2026 年に新規で何を学ぶべき?
A: 仕事を取るなら React + Next.js + TypeScript。Vue や Svelte は得意な人にとって速く作れる選択肢。

Q: jQuery でいいのでは?
A: 静的サイト + 少しの動的要素なら可。SPA を組むなら状態管理が破綻するので不可。

Q: Astro と Next.js どちらを選ぶ?
A: コンテンツ中心 (ブログ / マーケサイト) → Astro。アプリ中心 (ダッシュボード / EC) → Next.js。Astro は React コンポーネントも island として混在できるので、最近は「両方」も増えています。