React・Vue・Svelte・Astro・Next.jsを同じアプリで比較
フロントエンドフレームワーク比較
React・Vue・Svelte・Astro・Next.js比較：同じアプリで実測 | We.Inc
React、Vue、Svelte、Astro、Next.js を、それぞれで作った同じToDoアプリで比較。実測したJavaScriptのサイズ、プロジェクトの種類別の選び方の表、学習コストの解説、Vite と webpack の比較コラム付き。
人気ではなく、プロジェクトに合わせて選びましょう。Astro はページをJavaScriptがほとんど、またはまったくないHTMLとして配信するため、コンテンツ中心のサイトに向いています。React をベースにした Next.js は本格的なWebアプリに向いています。Vue は最も学びやすく、Svelte は配信するコードが最も少なくなります。それぞれで同じToDoアプリを作ったところ、gzip 圧縮後のサイズは Svelte が13.8 KB、Vue が25.8 KB、React が68 KBでした。
それぞれを一言で
- サーバーレンダリング付きの本格的なReactアプリ
- Astro
- JavaScriptをほとんど配信しないコンテンツサイト
意見は簡単に見つかりますが、同じアプリを計測したデータはなかなかありません。私たちは小さなToDoアプリを React、Vue、Svelte、素のJavaScriptで書き、それぞれ Vite でビルドし、ブラウザーで操作して、配信されるものを計測しました。Astro と Next.js については、同じコンポーネントを組み込んだ形で紹介します。
- 選び方の表で、自分のプロジェクトの種類を探します。
- モバイルの訪問者向けなど、ページの重さが重要ならサイズの表を確認します。
- それぞれの構文で書かれた同じアプリを読み、どれが自分にとって自然かを確かめます。
- 誰がメンテナンスするのか、どのライブラリが必要なのかを検討します。
- マーケティングサイトでは、フレームワークよりも画像、フォント、サードパーティのスクリプトのほうが影響が大きくなります。
- React のランタイムのコストは一度だけです。大きなアプリでは、自分のコードが増えるにつれて差は縮まります。
- ルーティングやサーバーレンダリングを自分で組み込むより、公式のメタフレームワーク（Next.js、Nuxt、SvelteKit）を使いましょう。
- 乗り換える明確な理由がない限り、チームがすでに知っているものを選びましょう。
よくある質問
Next.js と React は同じものですか？
いいえ。React はUIライブラリで、Next.js は React をベースにしたフレームワークです。ルーティング、サーバーレンダリング、Server Components、データ読み込み、ビルド設定を追加します。Next.js の中で React のコンポーネントを書きます。
Webサイトには Astro と Next.js のどちらがいいですか？
マーケティングページ、ブログ、ドキュメントなどコンテンツ中心のサイトなら、通常は Astro のほうが配信するJavaScriptが少なく、シンプルです。ログイン、ダッシュボード、多くのインタラクションがあるアプリのようなサイトなら、Next.js のほうが適しています。
Vue は React より簡単ですか？
テンプレートがHTMLのように見え、リアクティビティにイミュータブルな更新が不要なため、始めやすいと感じる人が多いです。React は最初に JSX とフックのルールを学ぶ必要がありますが、ライブラリも求人もより多くあります。
Svelte のバンドルが小さいのはなぜですか？
Svelte はビルド時にコンポーネントを単純なDOM更新コードにコンパイルするため、汎用的なレンダリングエンジンではなく、小さなランタイムだけを配信するからです。
Vite と webpack のどちらを使うべきですか？
新しいプロジェクトなら Vite です。起動が速く、設定もほとんど必要ありません。webpack は、そのプラグインに依存している既存のプロジェクトでは今でも理にかなっています。
学習コストを正直に比べると
- Vue と Svelte は素のHTML、CSS、JavaScriptに最も近い読み心地なので、初心者でもすぐに始められます。React には JSX、フック、イミュータブルな更新の習慣が必要です。Astro はコンテンツには簡単ですが、インタラクションを加えるとアイランドの理解が必要になります。Next.js は React の上にサーバーとクライアントの境界が加わり、5つの中で最も難しい段階です。
ホスティング
- Astro、Vite のアプリ、Next.js の静的エクスポートから出力された静的ファイルは、どの静的ホスティングやCDNにも置けます。サーバーレンダリングには、Node が動くホスティングか、サーバーレス関数のあるプラットフォームが必要です。サーバーの機能を選ぶ前に、ホスティング先が何に対応しているかを確認してください。
それぞれが配信するもの
Vite の本番モードでビルドし、すべてのビルドをブラウザーでテストしました。Astro と Next.js はこの計測に含めていません。
実測値：同じToDoアプリで配信されるJavaScriptの合計
- React 19（react-dom を含む）
- 220.1 KB
- 68.0 KB
どれを選ぶか
プロジェクトの種類別の選び方
- マーケティングサイト、ブログ、ドキュメント
- Astro
- 必要な部分がない限り、ページはJavaScriptなしのHTMLとして配信されます
- ログインやダッシュボードのあるWebアプリ
- Next.js または React Router（React）
- 大きなエコシステム、サーバーレンダリングとデータ読み込みが組み込み済み
- チームがテンプレートを好むアプリ
- Vue と Nuxt
- 学習コストが低く、単一ファイルコンポーネントが使えます
- 小さく高速なウィジェットや軽量なアプリ
- Svelte と SvelteKit
- コンパイラーの出力が小さく、定型コードも少なくて済みます
- 既存サイトに少しだけインタラクティブな部分を加える
- 素のJavaScriptまたは小さなアイランド
- フレームワークのコストが一切かかりません
- 多くの開発者を素早く採用したい
- React
- 人材とライブラリの層が最も厚い
比較一覧
ひと目でわかる比較
- 種類
- UIライブラリ
- UIフレームワーク
- コンパイラー + フレームワーク
- コンテンツサイト向けフレームワーク
- React のフレームワーク
- コンポーネントの書き方
- JSX の関数
- 単一ファイルの .vue
- 単一ファイルの .svelte
- .astro + 任意のUIライブラリ
- React（JSX）
- リアクティビティ
- 状態 + 再レンダリング
- Proxy（ref、reactive）
- コンパイルされる runes（$state）
- アイランドごと
- React
- サーバーレンダリング
- フレームワーク経由
- Nuxt 経由
- SvelteKit 経由
- 組み込み（静的またはサーバー）
- 組み込み
同じアプリを5通りで
React
状態はフックに保持されます。変更のたびにコンポーネントが再実行され、React がDOMの差分を更新します。更新では新しい配列やオブジェクトを作る必要があります。
Vue
スクリプト、テンプレート、（必要なら）スタイルを1つのファイルに書きます。v-model で入力を双方向にバインドし、ref はリアクティブなので、配列に追加するだけで済みます。
Svelte 5
runes（$state、$derived）でリアクティブな値を示し、コンパイラーがコンポーネントを直接的なDOM更新に変換します。そのためランタイムが小さいのです。
素のJavaScript
比較の基準です。小さなウィジェットなら十分ですが、DOMの更新は自分で書き、データとの同期も手作業で保つ必要があります。
Astro：同じアプリをアイランドとして
Astro はページをHTMLとしてレンダリングし、client ディレクティブを指定したコンポーネントだけをハイドレートします。ここでは Svelte のToDoアプリが画面内にスクロールされたときにJavaScriptを読み込み、ページの残りの部分は一切配信しません。
Next.js：同じコンポーネントを置く場所
App Router ではページが Server Component なので、インタラクティブなToDoリストは "use client" を付けた専用のファイルに置きます。それを囲むページ自体は、コンポーネントのJavaScriptを一切送りません。
コラム：Vite と webpack の比較
Vite と webpack の比較
- 開発サーバー
- ソースをネイティブの ES モジュールとして配信し、アプリの規模に関係なく素早く起動します
- 配信前にバンドルするため、アプリが大きくなるほど起動に時間がかかります
- 本番ビルド
- 独自のバンドラーでバンドルします（Vite 8 では Rolldown）
- 独自のバンドラーで、細かく設定できます
- 設定
- 設定は少なく、妥当なデフォルト
- 強力ですが、書く量が多くなります
- 使われている場所
- Vue、Svelte、Astro、React Router、多くの React アプリ
- 古い React アプリ、Next.js（Turbopack と併用）
コンテンツサイトを作るなら、こちらもご覧ください：
静的サイトジェネレーター
無料で始める · クレジットカード不要
関連: ガイド｜Webマーケティングと集客を学ぶ
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る