7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

React? Vue? Svelte? — JS技術が増えすぎて頭がバグった人のための「JavaScriptエコシステム全体像」2026年版

7
Last updated at Posted at 2026-04-13

この記事の対象読者

  • JavaScriptを触ったことはあるが、周辺技術の関係性がぼんやりしている方
  • React」「Vue」「Svelte」「Next.js」「Vite」「Bun」...と名前は聞くが、どれが何の役割なのか整理できていない方
  • フレームワークとライブラリの違いを聞かれて、自信を持って答えられない方
  • 2026年のいま、何を学ぶべきか判断材料がほしい方

この記事で得られること

この記事を読むと、以下の力が身につきます:

  1. JavaScriptエコシステムの 全体構造 を「空港ターミナル」の比喩で直感的に理解できる
  2. フロントエンド・バックエンド・ランタイム・ビルドツールの 役割と関係性 が明確になる
  3. 2026年現在の シェア率・満足度データ に基づいて、技術選定の判断ができるようになる
  4. 「次に何を学ぶべきか」の ロードマップ が手に入る

この記事で扱わないこと

  • 各フレームワークの詳細なコーディング手順(それぞれ別記事で解説済み)
  • CSS フレームワーク(Tailwind, Bootstrap等)の比較
  • テスト・CI/CD ツールの詳細

1. まず全体像を掴もう — JavaScriptエコシステムは「巨大空港」だ

JavaScriptの技術スタックを初めて俯瞰しようとすると、名前の洪水に溺れる。React, Vue, Angular, Svelte, Next.js, Nuxt, SvelteKit, Astro, Node.js, Deno, Bun, Express, Hono, Fastify, Vite, Webpack, TypeScript, jQuery...

落ち着いてほしい。これらは全部バラバラに存在しているわけではない。

JavaScriptのエコシステムを 「国際空港」 に例えると、すべてがスッキリ整理できる。

この空港には6つのエリアがある。

エリア 役割
第1ターミナル ユーザーが直接触れる画面を作る React, Vue, Svelte, Angular
第2ターミナル 第1ターミナルの機能を拡張し、サーバー連携も担う Next.js, Nuxt, SvelteKit, Astro
第3ターミナル サーバー側のAPI・データ処理を担う Express, Hono, Fastify, NestJS
滑走路 JavaScriptコードを実際に「走らせる」エンジン Node.js, Deno, Bun
管制塔 開発時のコード変換・最適化を管理する Vite, Webpack, Turbopack
燃料 コードそのものを書く言語 JavaScript, TypeScript

ここから先は、各エリアを順番に巡っていく。読者のあなたは空港見学ツアーの参加者だ。


2. まず「燃料」の話 — JavaScriptとTypeScriptの関係

空港ツアーの最初は燃料補給エリアから。飛行機がジェット燃料なしには飛べないように、すべてのJavaScriptエコシステムは JavaScript(またはTypeScript) というコードなしには動かない。

2.1 JavaScriptの現在地

JavaScriptは1995年にNetscapeで生まれた言語だ。2026年現在、Stack Overflow Developer Surveyで 開発者の62.3%が使用 する世界最大の言語であり続けている。

「JavaScriptは古い」と言う人がいるが、言語仕様自体は毎年ECMAScript(ES)として更新されている。2015年のES6で大幅に近代化され、以降もasync/await、オプショナルチェイニング ?.import/export など、モダンな機能が次々追加されている。

2.2 TypeScript — JavaScriptに「型」という安全装置をつけた言語

TypeScriptはMicrosoftが開発した JavaScriptのスーパーセット(上位互換) だ。JavaScriptのコードはすべてそのままTypeScriptとして動くが、TypeScriptには「型」がある。

// JavaScript — 実行するまでバグがわからない
function greet(name) {
  return "Hello, " + name.toUpperCase(); // nameが数値だったら?
}

// TypeScript — コードを書いた瞬間にバグがわかる
function greet(name: string): string {
  return "Hello, " + name.toUpperCase(); // 数値を渡そうとしたら即エラー
}

2025年の調査で、プロのJavaScript開発者の 70%以上がTypeScriptを使用 しているとされる。もはや「オプション」ではなく「標準」に近い。

2026年現在、Node.js・Deno・Bunの3大ランタイムすべてがTypeScriptをネイティブサポートしている。以前のようにtscで手動コンパイルする時代は終わった。

2.3 ライブラリ? フレームワーク? — 最初に整理すべき用語

この先、何度も出てくる2つの言葉を、ここで明確にしておく。

用語 空港の比喩 意味
ライブラリ 空港内の自動販売機 必要なときに必要な機能だけ取り出して使う。呼び出すのは あなた
フレームワーク 空港のオペレーション全体のルール 全体の構造・流れが決まっており、その中に あなたのコードを埋め込む

ReactはMeta(旧Facebook)公式に「ライブラリ」と呼ばれている。しかし実際にはNext.jsなどのメタフレームワークと組み合わせて使うことがほとんどであり、事実上フレームワーク的に機能する。この「ライブラリかフレームワークか」論争は不毛なので、本記事では 実用上の役割 で分類する。


3. 第1ターミナル — フロントエンドUI構築の4大巨頭

ツアーの目玉、第1ターミナルに到着した。ここは ユーザーが直接触れる画面(UI)を構築する ためのツールが集まるエリアだ。

3.1 2026年のシェアデータ — 数字で見る勢力図

Stack Overflow Developer Survey 2025(49,000人以上が回答)のデータを基に、主要フロントエンド技術の現在地を整理する。

フレームワーク 使用率 満足度 学びたい率 一言で言うと
React 44.7% 52.1% 30.7% 王者。だがピークは過ぎた
Angular 18.2% 44.7% 12.6% エンタープライズの砦
Vue.js 17.6% 50.9% 15.3% バランス型の実力者
Svelte 7.2% 62.4% 11.1% 満足度No.1の挑戦者

npmの新規プロジェクト開始データ(2026年3月時点)を見ると、さらに面白い構図が見えてくる。

分類 シェア
React系(Next.js含む) 約58%
Vue系(Nuxt含む) 約13%
Angular系 約12%
Svelte系(SvelteKit含む) 約7%
Astro 約5%
Solid.js 約2%
その他 約3%

Reactは依然として圧倒的だが、ピーク時の75%からは明確に下降している。Svelteは使用率こそ7%台だが、満足度は全フレームワーク中トップの62.4%で、「使った人の6割以上がまた使いたい」と言っている。

ここからは各フレームワークの設計思想を、空港ターミナルの「航空会社」に例えて紹介する。


3.2 React — ターミナルの最大手航空会社

Reactは2013年にMeta(旧Facebook)が公開したUIライブラリだ。「コンポーネント」という部品単位でUIを組み立てる設計思想を普及させた最大の功労者であり、2026年現在もフロントエンドの王座に座り続けている。

なぜReactが強いのか:

  • エコシステムの規模が桁違い — npmパッケージ数、Stack Overflowの回答数、採用企業数、すべてにおいて他を圧倒する
  • 求人市場の支配 — フロントエンドの求人票で最も多く指定される技術
  • React Compiler(2025年10月にv1.0到達) が自動でパフォーマンス最適化を行い、手動のuseMemo/useCallback地獄から開発者を解放しつつある

Reactの弱点:

  • 仮想DOMのオーバーヘッド(Svelteのコンパイル時最適化と比較して)
  • Server Componentsの学習コスト(従来のSPAとは考え方が大きく異なる)
  • ライブラリ単体では機能が足りず、ルーティング・状態管理などを別途選定する必要がある
// Reactのコンポーネント例
function Welcome({ name }) {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Hello, {name}!</h1>
      <button onClick={() => setCount(count + 1)}>
        Clicked {count} times
      </button>
    </div>
  );
}

3.3 Vue.js — バランス型のオールラウンダー

Vue.jsは元Google社員のEvan Youが2014年に公開したフレームワークだ。Reactの良い部分を取り入れつつ、「公式で全部揃う」設計哲学を貫いている。

Vue.jsの強み:

  • 学習曲線が緩やか — HTML/CSS/JSの知識があればすぐ書き始められる
  • 公式エコシステムが充実 — ルーター(Vue Router)、状態管理(Pinia)、ビルドツール統合が公式提供
  • Vue 3.5でメモリ使用量が56%削減 — リアクティビティシステムの大幅リファクタリング

Vue.jsの注意点:

  • アジア圏(特に中国・日本)での採用が偏って多く、北米ではReactが圧倒的に優勢
  • 大規模アプリケーションではTypeScriptとの統合にやや癖がある(改善中)

Vue.jsのシェアは欧米の調査では15-18%程度だが、アジア圏を含めると実質的な利用率はもっと高い。日本のWeb開発現場でもVue/Nuxtは根強い人気を持つ。


3.4 Angular — エンタープライズの要塞

AngularはGoogleが開発・メンテナンスする大規模フレームワークだ。ここで注意すべきは AngularとAngularJS(1.x)は完全に別物 であるということ。AngularJSは2021年末にサポート終了しており、現在のAngularは「Angular 2+」の系譜にある。

Angularが選ばれる場面:

  • 100人以上のチームで開発する大規模エンタープライズ — 厳格なアーキテクチャが統一性を保証する
  • Angular 21(2026年時点の安定版) ではSignalsによるリアクティビティ改善が進み、開発体験が大幅に向上

Angularの現実:

  • 新規プロジェクトでの採用は減少傾向(前年比15%減)
  • 学習コストが他のフレームワークより明確に高い
  • ただし 既存のAngularアプリは膨大に存在 し、保守案件の需要は安定している

3.5 Svelte — 満足度No.1の新星

Svelteはリッチ・ハリスが開発した、2019年のv3で注目を集めたフレームワークだ。他の3つとは 根本的に設計思想が違う

最大の違い: Svelteには仮想DOMがない。

React・Vue・Angularは「ブラウザ上でフレームワークのランタイムが動く」仕組みだが、Svelteビルド時にコンポーネントを高度に最適化されたバニラJavaScriptにコンパイル する。つまり、ブラウザに届くのはフレームワークの痕跡がないピュアなJSだ。

<!-- Svelteのコンポーネント例 — 驚くほどシンプル -->
<script>
  let count = 0;
</script>

<h1>Hello!</h1>
<button on:click={() => count++}>
  Clicked {count} times
</button>

...見てくれ、useStateimport Reactもない。HTML/CSS/JSをほぼそのまま書くだけ。これがSvelteの開発者満足度が 62.4%で全フレームワーク中1位 の理由だ。

Svelteの強み:

  • バンドルサイズがReact比で60-70%小さい — モバイルやネットワーク環境が厳しい場面で威力を発揮
  • Svelte 5のRunes — よりパワフルで予測可能なリアクティビティシステムを導入
  • SvelteKit — Next.jsに相当するメタフレームワークが成熟

Svelteの課題:

  • エコシステムの規模がReactの1/10以下
  • 求人市場での需要はまだ限定的
  • 「Svelteが書ける人を採用する」のが難しい

3.6 番外編: jQuery — 全Webサイトの73%にまだ存在する亡霊

ここで触れないわけにはいかない存在がいる。jQuery だ。

W3Techsの2025年データによると、全Webサイトの約73.5%が今もjQueryを使用 している。Reactの5.6%と比較すると桁が違う。

...え? (;゚д゚)ポカーン

ただしこの数字にはカラクリがある。

jQueryの「73%」は、WordPressを含む既存サイトの レガシー利用 がほとんどだ。新規プロジェクトでjQueryを選択する開発者はほぼいない。Stack Overflow 2024の調査ではjQueryは「使っている」とすら申告されなくなりつつある。

jQuery 4.0.0が2026年1月にリリースされ、今も保守は続いている。しかし新規開発で選ぶ理由は、特殊なレガシー統合要件を除いてない。


3.7 フロントエンドフレームワーク選定フローチャート


4. 第2ターミナル — メタフレームワークという「フルサービス航空会社」

第1ターミナルのフレームワークは「エンジン」に過ぎない。実際にアプリケーションを飛ばす(=本番運用する)には、ルーティング、サーバーサイドレンダリング(SSR)、静的サイト生成(SSG)などの「機体全体」が必要だ。

それを提供するのが メタフレームワーク だ。

メタフレームワーク ベース 特徴
Next.js React Reactの事実上の標準メタフレームワーク。新規Reactプロジェクトの約78%が使用
Nuxt Vue.js Vue.jsのメタフレームワーク。日本でも採用例多数
SvelteKit Svelte Svelteの公式メタフレームワーク
Astro フレームワーク非依存 React/Vue/Svelte等を混在利用可能。デフォルトでJSゼロ出力

4.1 Next.js — 2026年フロントエンド最重要技術

Next.jsはVercelが開発するReactベースのメタフレームワークだ。もはや「Reactを使う」ということは「Next.jsを使う」とほぼ同義になりつつある。

2026年のnpmデータによると、新規プロジェクト全体の約35%がNext.jsを選択している。React系全体(58%)の中で最大のシェアだ。

Next.jsが提供するもの:

  • ファイルベースルーティング(ディレクトリ構造=URLパス)
  • SSR(サーバーサイドレンダリング)/ SSG(静的サイト生成)/ ISR(インクリメンタル静的再生成)
  • React Server Components の本番実装
  • 画像最適化、コード分割、キャッシュの自動化

4.2 Astro — 「JSを出力しない」という逆転の発想

Astroは2021年登場の異色の存在だ。デフォルトではJavaScriptを一切ブラウザに送らない。静的HTMLとして出力し、インタラクティブな部分だけ「アイランド」として必要なJSを読み込む。

  • ブログ、ドキュメント、マーケティングサイトに最適
  • React、Vue、Svelteのコンポーネントを 同じプロジェクト内で混在 できる
  • Core Web Vitalsのスコアで常にトップクラス

5. 第3ターミナル — バックエンドフレームワーク「サーバー側の選択肢」

空港の第3ターミナルは、乗客(ユーザー)からは見えない裏側 — API処理、データベース操作、認証など サーバーサイドの処理 を担当するエリアだ。

5.1 勢力図 — 王者Expressの黄昏

フレームワーク 週間DL数(npm) 設計思想 TypeScript
Express 約3,500万 ミニマル・柔軟 後付け(@types
Fastify 約300万 パフォーマンス重視 良好
Hono 約180万(前年比340%増) Web標準・マルチランタイム ネイティブ
NestJS 約350万 Angular風の構造化 ネイティブ

Expressは2010年にリリースされ、14年間Node.jsバックエンドの「デファクトスタンダード」として君臨してきた。週間ダウンロード数3,500万は圧倒的だ。

しかし、この数字の大部分は「既存アプリの保守」によるものだ。2026年の新規プロジェクトでは、Hono、Fastify、NestJSが主役に交代しつつある。

Express 4.xのコアアーキテクチャは 2014年から変わっていない。コールバックベースのHTTPサーバーで、TypeScriptサポートはコミュニティが後付けした@types/expressに依存している。

5.2 Hono — 「炎」と名付けられた次世代フレームワーク

Honoは日本語の「炎」に由来する軽量バックエンドフレームワークだ。最大の特徴は ランタイム非依存 であること。

// Hono — 同じコードがNode.js, Deno, [Bun]([Bun](https://qiita.com/GeneLab_999/items/ea928f214c6c99dee66e)), Cloudflare Workersで動く
import { Hono } from 'hono'

const app = new Hono()
app.get('/api/users/:id', (c) => {
  return c.json({ id: c.req.param('id'), name: 'Hiroki' })
})

export default app
  • Expressの 4-5倍 高速(Node.js上でのベンチマーク)
  • TypeScriptファーストで、リクエスト/レスポンスの型推論が自動的に効く
  • Cloudflare Workers、Deno Deploy、Bunなど、エッジランタイムでネイティブ動作
  • 前年比ダウンロード数 340%増 という爆発的成長

5.3 バックエンドフレームワーク選定の指針

あなたの状況 推奨
既存Expressアプリの保守 そのままExpressを使い続ける(移行コスト>メリット)
新規API開発(エッジ/サーバーレス) Hono
新規API開発(Node.js中心) Fastify
エンタープライズの大規模バックエンド NestJS
学習・プロトタイプ Express(教材が最も豊富)

6. 滑走路 — ランタイム三国志「Node.js vs Deno vs Bun

ここまで見てきたフレームワークは、すべて ランタイム の上で動く。ランタイムとは、JavaScriptコードを実際に実行するエンジンのことだ。空港で言えば「滑走路」 — どんなに豪華な飛行機も、滑走路がなければ離陸できない。

6.1 三つのランタイムの正体

ランタイム 誕生年 JSエンジン 開発言語 一言
Node.js 2009 V8(Chrome) C++ 16年の実績を持つ王者
Deno 2018 V8(Chrome) Rust Node.jsの生みの親が「やり直した」ランタイム
Bun 2021 JavaScriptCore(Safari) Zig 爆速を売りにする新星。2025年にAnthropicが買収

DenoはNode.jsを作ったRyan Dahl本人が「Node.jsの設計ミスを修正するために」作ったランタイムだ。セキュリティモデル、TypeScriptネイティブサポート、Web標準APIの採用など、Node.jsの反省点を取り込んでいる。

6.2 ベンチマーク — ただし鵜呑みにするな

合成ベンチマーク(HTTP "Hello World")では以下の差が出る:

ランタイム リクエスト/秒
Bun 約52,000
Deno 約29,000
Node.js 約14,000

...Bunが圧倒的じゃないか!と思ったあなた、ちょっと待ってほしい。

実際のアプリケーション(ルーティング + バリデーション + DB操作 + ビジネスロジック)でテストすると、3つとも約12,000 req/secに収束する。

なぜかというと、実アプリではランタイムの速度より DB待ちやネットワークI/O がボトルネックになるからだ。ランタイム間の速度差は「ノイズ」レベルに縮小する。

ただし、以下の場面では差が明確に出る:

指標 Bun Deno Node.js
コールドスタート 8-15ms 40-60ms 60-120ms
パッケージインストール(1,847依存) 47秒 - 28分(npm)
TypeScriptサポート ネイティブ ネイティブ 実験的
セキュリティサンドボックス なし あり なし

6.3 ランタイム選定ガイド

6.4 WinterCG — ランタイム戦争の「終戦協定」

2026年の重要なトレンドとして、WinterCG(Web-interoperable Runtimes Community Group) の存在がある。これはNode.js、Deno、Bun、Cloudflare Workersの開発チームが協力して、 ランタイム間で共通のAPIを標準化 する団体だ。

つまり将来的には、「どのランタイムでも同じコードが動く」世界が現実になりつつある。HonoのようなWeb標準ベースのフレームワークが台頭しているのも、この流れの一部だ。


7. 管制塔 — ビルドツール「ViteがWebpackを置き換えた」

管制塔は、空港全体のオペレーションを制御する場所だ。JavaScriptのビルドツールも同じ — 開発者が書いたコードを、ブラウザが理解できる形に 変換・最適化・配信 する役割を担う。

7.1 Vite vs Webpack — 世代交代は完了した

指標 Vite Webpack
開発サーバー起動 300ms以下 30-90秒
HMR(ホットリロード) 20-50ms 200ms-2秒
設定ファイル 最小限or不要 複雑
新規プロジェクトでの採用 主流 レガシー寄り

2026年の結論: 新規プロジェクトならVite一択。既存のWebpackプロジェクトは無理に移行する必要はないが、開発サーバーの遅さにストレスを感じたら移行を検討する価値がある。

7.2 Viteの仕組み — なぜ速いのか

Webpackは起動時に すべてのファイルを読み込み、依存関係を解決し、バンドルしてから配信 する。Viteはこのプロセスを根本から変えた。

Viteは ネイティブESモジュール を活用し、ブラウザが必要なファイルを要求したときに オンデマンドで変換 する。事前にバンドルする必要がないから速い。

7.3 その他のビルドツール

ツール 特徴
Turbopack Vercel製のRustベースバンドラー。Next.jsに統合。Webpackの後継を目指す
Rspack ByteDance製のRustベースバンドラー。Webpack互換の設定でVite級の速度
esbuild Go言語製の超高速トランスパイラ。Viteが内部で使用

8. よくある混乱の整理 — 関係性マップ

ここまで読んで、「で、ViteとNode.jsの関係は?」「Next.jsとReactの関係は?」といった疑問が残っているかもしれない。最後に関係性を明確にしておこう。

8.1 「〇〇と△△の関係」一覧

疑問 答え
ReactとNext.jsの関係 ReactはUIライブラリ。Next.jsはReactに「サーバー機能・ルーティング・最適化」を足したメタフレームワーク
ViteとNode.jsの関係 ViteはNode.js上で動く開発ツール。Vite自体がアプリを動かすわけではない
ViteとReactの関係 Viteは「管制塔」、Reactは「航空会社」。Viteがビルドを担当し、Reactがブラウザ上のUI描画を担当する
TypeScriptとJavaScriptの関係 TypeScriptはJavaScriptに型を追加した上位互換言語。最終的にJSにコンパイルされてランタイム上で実行される
Node.jsとExpressの関係 Node.jsはランタイム(滑走路)、ExpressはNode.js上で動くバックエンドフレームワーク(航空会社)
BunとViteの関係 BunはJSランタイム(滑走路)で、Viteの代替として使えるバンドラー機能も内蔵している

8.2 技術スタックの代表的な組み合わせ


9. よくあるエラー・誤解と対処法

誤解・エラー 事実 対処法
ReactはフレームワークだからNext.jsは不要」 ReactはUIライブラリ。本番運用にはNext.js等のメタフレームワークがほぼ必須 新規プロジェクトはNext.jsから始める
「jQueryはもう使えない」 W3Techsで全Webサイトの73%がまだ利用中。4.0.0も2026年1月にリリース 新規開発には不要だが、レガシー保守では現役
「ViteはReact専用」 ViteはReact, Vue, Svelte, Lit等あらゆるフレームワークで使える npm create vite@latestで好きなフレームワークを選択
Bunが速いから全部Bunに移行すべき」 実アプリでは3ランタイムの性能差は誤差レベル。エコシステム互換性が重要 新規ならBun検討、既存Node.jsは急いで移行不要
「Angularは死んだ」 エンタープライズで健在。Angular 21でSignals導入など進化中 大規模チームのエンタープライズ開発では有力な選択肢
「SvelteはまだToy(おもちゃ)レベル」 SvelteKitは本番レベルに成熟。満足度はReactを上回る 採用難を許容できるなら積極的に検討

10. 学習ロードマップ — 2026年に何を学ぶべきか

10.1 レベル別ロードマップ

10.2 目的別の推奨パス

あなたの目的 推奨学習パス
転職・就職(最大の求人数) JavaScript → TypeScript → React → Next.js
個人開発・スタートアップ JavaScript → TypeScript → Svelte → SvelteKit
フリーランス(幅広い案件対応) JavaScript → TypeScript → React → Vue.js(両方できると強い)
エンタープライズ転職 JavaScript → TypeScript → Angular → NestJS

まとめ

JavaScriptのエコシステムは「巨大空港」だ。ターミナル(フレームワーク)、滑走路(ランタイム)、管制塔(ビルドツール)、燃料(言語)がそれぞれ独立した役割を持ち、組み合わせで機能する。

2026年の景色をまとめると:

  • React は王者だが、ピーク時の75%から58%に下降中。「一強」から「一位」へ
  • Svelte は満足度No.1。規模は小さいが成長速度は全フレームワーク中最速
  • Vue.js はアジア圏で根強い。バランス型として安定した選択肢
  • Angular はエンタープライズの砦。死んではいない、むしろ進化中
  • Node.js はランタイムの王者だが、Bun がAnthropicの買収を経て猛追中
  • Vite がビルドツールの新標準。Webpackは既存プロジェクト限定に
  • Express から Hono への世代交代が進行中
  • TypeScript は「オプション」から「標準」に昇格済み

技術選定に正解は1つではない。ただ、この記事があなたの「頭のバグ」を少しでも解消する地図になれば嬉しい。


もっと個別の技術を深く知りたい方は、以下の関連記事もどうぞ:


参考文献

  • Stack Overflow Developer Survey 2025

  • State of JavaScript 2024

  • PkgPulse - JavaScript Framework Market Share(npm実データ)

  • Hono公式ベンチマーク


7
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?