過去バージョン

この本文には実行可能なタグ等が含まれるため、安全のためHTMLソースとして表示しています。本文データは変更していません。

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;background:#fffbea;border:1px solid #f4c430;margin:1em 0;width:100%"><tr><td style="background:#f4c430;color:#000;font-weight:bold;padding:8px">この記事の要点</td></tr><tr><td style="padding:10px"><ul><li>主要 4 大: <strong>React</strong> (Meta) / <strong>Vue.js</strong> (Evan You) / <strong>Angular</strong> (Google) / <strong>Svelte</strong> (Rich Harris)</li><li>メタフレームワーク: <strong>Next.js</strong> (React) / <strong>Nuxt.js</strong> (Vue) / <strong>SvelteKit</strong> / <strong>Remix</strong></li><li>新世代: <strong>Astro</strong> (MPA / Islands) / <strong>Qwik</strong> (Resumability) / <strong>Solid.js</strong> (Signals)</li><li>レンダリング戦略: <strong>CSR / SSR / SSG / ISR / RSC</strong> を用途で使い分け</li><li>シェア順: <strong>React > Vue > Angular > Svelte</strong>。学習曲線は逆順 (Svelte が易しい)</li></ul></td></tr></table>
<h2>主要フレームワーク早見表</h2>

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

<h2>メタフレームワーク (フルスタック)</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>名前</th><th>ベース</th><th>特徴</th></tr></thead>
<tbody>
<tr><td><strong>Next.js</strong></td><td>React</td><td>SSR/SSG/ISR/RSC、App Router、Vercel</td></tr>
<tr><td><strong>Nuxt.js</strong></td><td>Vue 3</td><td>Nuxt 3 で完全リライト、Nitro エンジン</td></tr>
<tr><td><strong>SvelteKit</strong></td><td>Svelte</td><td>ファイルベースルーティング、Vite ベース</td></tr>
<tr><td><strong>Remix</strong></td><td>React</td><td>Web Standard 重視、Loader/Action 設計</td></tr>
<tr><td><strong>Astro</strong></td><td>マルチ (React/Vue/Svelte)</td><td>MPA + Islands、デフォルト JS ゼロ</td></tr>
<tr><td><strong>Qwik</strong></td><td>独自</td><td>Resumability で初回ロード超高速</td></tr>
<tr><td><strong>Fresh</strong></td><td>Preact + Deno</td><td>Deno Deploy ファースト</td></tr>
</tbody>
</table>

<h2>React の基本コード</h2><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-jsx">import { useState } from &apos;react&apos;;

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

export default Counter;</code></pre>
<h2>Vue.js (Composition API) の基本コード</h2><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-vue"><script setup>
import { ref } from &apos;vue&apos;;

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

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">+1</button>
  </div>
</template></code></pre>
<h2>Angular の基本コード</h2><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-typescript">import { Component } from &apos;@angular/core&apos;;

@Component({
  selector: &apos;app-counter&apos;,
  standalone: true,
  template: `
    <p>Count: {{ count }}</p>
    <button (click)="increment()">+1</button>
  `,
})
export class CounterComponent {
  count = 0;
  increment() { this.count++; }
}</code></pre>
<h2>Svelte の基本コード</h2><pre style="background:#1e293b;color:#e2e8f0;padding:1em;border-radius:6px;overflow-x:auto;line-height:1.5"><code class="language-svelte"><script>
  let count = 0;
</script>

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

<style>
  button { padding: 8px 16px; }
</style></code></pre>
<h2>レンダリング戦略</h2>

<table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%">
<thead><tr style="background:#e3f2fd"><th>戦略</th><th>説明</th><th>用途</th></tr></thead>
<tbody>
<tr><td><strong>CSR</strong> (Client Side Rendering)</td><td>ブラウザで JS が DOM を組み立て</td><td>管理画面、ダッシュボード</td></tr>
<tr><td><strong>SSR</strong> (Server Side Rendering)</td><td>サーバで HTML を組み立てて返す</td><td>SEO 必要、動的データ</td></tr>
<tr><td><strong>SSG</strong> (Static Site Generation)</td><td>ビルド時に全 HTML 生成</td><td>ブログ、ドキュメント</td></tr>
<tr><td><strong>ISR</strong> (Incremental Static Regen)</td><td>SSG + 一定時間で再生成</td><td>EC、ニュースサイト</td></tr>
<tr><td><strong>RSC</strong> (React Server Components)</td><td>サーバ側コンポーネント、JS 送信せず</td><td>Next.js App Router</td></tr>
<tr><td><strong>Islands</strong></td><td>静的 HTML + 部分的にハイドレーション</td><td>Astro / Fresh</td></tr>
<tr><td><strong>Resumability</strong></td><td>ハイドレーション不要、続行</td><td>Qwik</td></tr>
</tbody>
</table>

<h2>シェアとトレンド (2026 時点)</h2>

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

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

<h2>用途別おすすめ</h2>

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

<h2>学習曲線</h2>

<p>易しい順: <strong>Svelte / Vue < React < Angular</strong></p>

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

<h2>FAQ</h2>

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

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

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