ReactとかNext.jsとか、あたかも言語みたいな顔でこちらを見てくるJavaScript周辺技術をまとめてみた

Posted at 2026-06-16

はじめに

こんばんは、mirukyです。
私は元文系の人間なので、プログラミングを学び始めたころ「ReactとかNext.jsってプログラミング言語なの？何？」とよく思っていました。なにせ、非常によく使われているのをいいことに、もはやプログラミング言語かのごとき堂々たる顔をしていませんか、彼ら（主観）。真っ当な言語で名前にJavaScriptみたいに「Script」が入っているTypeScriptの存在も、その勘違いを後押ししていました。

私のような方は、多少いるはずです。具体的には、React、Node.js、Next.js、Vue、Angular、Svelte などですね。ちなみに、jQueryが言語でないことはなぜか学び始めの頃の私でもすぐ腑に落ちました（なぜ）。しかし、他の面々はそれぞれがあたかも別の言語みたいな顔でスン・・としています。

この記事では、有名なJavaScript周辺のライブラリ、フレームワーク、実行環境、開発ツールを、できるだけ噛み砕いてまとめます。細かいAPIの使い方よりも、「これは何者で、どこで使うものなのか」をつかむところまでを扱います。詳しい部分は、技術書に譲ります。

1. JavaScript本体と周辺道具を分ける

まず、JavaScriptそのものはプログラミング言語です。Webページに複雑な機能を入れるためのスクリプト言語であり、ブラウザ上で動く代表的なプログラミング言語でもあります。
一方で、ReactやNext.jsはJavaScriptそのものではありません。JavaScriptで作られた、またはJavaScriptを書くために使う道具です。

まず、名前の種類を分けます。

種類	噛み砕いた意味	例
言語	命令を書くための言葉	JavaScript、TypeScript
実行環境	JavaScriptを動かす場所	ブラウザ、Node.js
ライブラリ	必要な部品だけ借りる道具	React、jQuery
フレームワーク	アプリの作り方ごと用意する道具	Angular、Vue、Svelte
Webフレームワーク	ルーティング、レンダリング、データ取得、ビルドなど、サイトやアプリ全体を組み立てる道具	Next.js、React Router（Framework Mode）、Nuxt、SvelteKit、Astro
開発ツール	作る、変換する、配るための道具	npm、Vite

ライブラリとフレームワークの違いは、主導権の違いで考えると分かりやすいかな、と思います。
ライブラリは、こちらのコードから必要なときに呼びます。例えばですが、料理中に包丁やフライパンを使う感じです。フレームワークは、アプリ全体の型を先に用意します。キッチンの動線、棚の場所、調理手順まである程度決まっているイメージです。
ただし、ライブラリとフレームワークの境界に絶対的な共通定義があるわけではありません。最初は、このくらいの大まかな捉え方で十分です。

2. ブラウザ側で画面を作るもの

ブラウザ側で画面を作るものは、主に状態に応じてUIを描画し、DOMや画面表示をどう更新するかを助けてくれます。
素のJavaScriptでも画面は作れます。ただ、ボタンを押したら一覧を更新する、入力値に合わせて表示を変える、ページ内の状態を保つ、といった処理が増えると、手書きだけでは難しくなっちゃいます。そこで登場するのが、jQuery、React、Vue、Angular、Svelteなどですね。

2-1. jQuery

jQuery（ジェイクエリー）は、古くから使われてきたJavaScriptライブラリです。HTMLの探索や操作、イベント処理、アニメーション、Ajax（エイジャックス）を短い書き方で扱えます。非常に簡単に書けるので、個人的に好きでした。
昔のブラウザは、同じJavaScriptを書いてもブラウザごとに挙動が違うことがありました。jQueryは、その差を吸収しつつ、短い書き方で画面を操作できるようにした存在です。

// 素のJavaScript
document.querySelector("#message").textContent = "こんにちは";

// jQuery
$("#message").text("こんにちは");

今から新規の大きなフロントエンドアプリを作るなら、ReactやVueなどを選ぶことが多いです。ただし、jQueryは過去のWebサイトやWordPress系のテーマ、管理画面などで今も出会います。
「古いから知らなくていい」ではなく、「新規の中心ではないが、既存システムでは読めると助かる」くらいの位置づけと思っていただければと思います。

2-2. React

React（リアクト）は、UIをコンポーネントという部品に分けて作るライブラリです。Webやネイティブアプリのユーザーインターフェースを作るために使われます。
Reactの中心は、「画面を部品に分ける」ことです。ボタン、検索フォーム、一覧、カードなどを部品として作り、それらを組み合わせてページを作ります。

function LikeButton() {
  return <button>いいね</button>;
}

React単体は、画面を作るための道具です。ページ遷移、サーバー側の処理、画像最適化、APIの作り方などは、Reactだけで全部決めてくれるわけではありません。
そのため、実際のWebアプリではNext.jsやReact RouterのFramework Modeのような、Reactベースのフレームワークやルーティング基盤と一緒に使われることが多いです。

2-3. Vue

Vue（ビュー）は、HTML、CSS、JavaScriptの感覚を残しながらUIを作れるフレームワークです。標準のHTML、CSS、JavaScriptを土台にした、ユーザーインターフェース構築用のJavaScriptフレームワークです。
Reactと同じくコンポーネントで画面を作りますが、VueはHTMLテンプレートに近い書き方をしやすいです。

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

const count = ref(0);
</script>

<template>
  <button @click="count++">
    {{ count }}
  </button>
</template>

Vueは「Progressive JavaScript Framework」を掲げており、既存ページの一部への導入から、本格的なアプリ開発まで段階的に採用できます。

2-4. AngularとAngularJS

ここは名前がややこしいです。
AngularJS（アンギュラージェイエス）は、かつて広く使われた古いフレームワークです。長期サポートは2021年12月31日に終了しています。
一方、現在のAngular（アンギュラー）は別物に近いです。Googleのチームが保守するWebフレームワークです。

名前	ざっくり
AngularJS	古いAngular 1.x系。公式サポート終了済み
Angular	現在のAngular。TypeScriptを中心に、公式機能を広く備えたWebフレームワーク

Angularは、ルーティング、フォーム、HTTP通信、テスト、ビルドなど、多くの機能を公式の道具として持っています。
自由に組み合わせるReactと比べると、Angularは「公式の作法に乗って大きなアプリを作る」方向です。チーム開発では、この決まりごとの多さが助けになる場面もあります。

2-5. Svelte

Svelte（スヴェルト）は、コンパイラを使うUIフレームワークです。HTML、CSS、JavaScriptで書いた宣言的なコンポーネントを、ブラウザで動くJavaScriptへ変換します。
ReactやVueもビルド時の変換を利用しますが、Svelteは特にコンパイラを設計の中心に置いている点が特徴です。コンポーネントをビルド時に変換し、ブラウザで効率よく動くJavaScriptを生成します。

<script>
  let count = $state(0);
</script>

<button onclick={() => count += 1}>
  {count}
</button>

まずは、「Svelteは見た目のコードが素直で、ビルド時に賢く変換してくれるもの」と考えると入りやすいかな、と思います。

3. サーバー側でJavaScriptを動かすもの

JavaScriptは、もともとブラウザで動くものとして知られていました。ただ、今はブラウザの外でも動きます。その代表がNode.jsです。

3-1. Node.js

Node.js（ノードジェイエス）はライブラリでもフレームワークでもなく、JavaScriptの実行環境です。非同期イベント駆動で動くJavaScriptランタイムですね。
ブラウザの外、つまり手元のPCやサーバー上でJavaScriptを動かせます。ファイルを読む、HTTPサーバーを立てる、DBへ接続する、といったブラウザだけでは扱いにくい処理ができます。
以下はES Modules形式の例です。
ES Modulesとして明示的に扱うには、ファイルの拡張子を.mjsにするか、最も近いpackage.jsonに"type": "module"を設定します。
最近のNode.jsは、設定のない.jsファイルでもimportなどの構文からES Modulesと判定できる場合があります。ただ、挙動を追いやすくするなら、"type": "module"を明示しておくほうが安心です。

import { createServer } from "node:http";

const server = createServer((req, res) => {
  res.end("Hello from Node.js");
});

server.listen(3000);

たとえるなら、JavaScriptが料理のレシピで、ブラウザやNode.jsはキッチンです。
同じJavaScriptでも、ブラウザというキッチンでは画面操作が得意です。Node.jsというキッチンでは、サーバー処理やファイル操作が得意です。

3-2. Express

Express（エクスプレス）は、Node.js上でWebサーバーやAPIを作るためのフレームワークです。Node.js向けの最小限で柔軟なWebアプリケーションフレームワークです。
Node.jsだけでもHTTPサーバーは作れます。ただ、ルーティング、ミドルウェア、リクエスト処理を毎回手で組むのは面倒です。Expressは、その部分を薄く助けます。
こちらもES Modules形式の例です。

import express from "express";

const app = express();

app.get("/hello", (req, res) => {
  res.json({ message: "hello" });
});

app.listen(3000);

Expressは必要最低限の部品を渡してくれるタイプです。認証、DB、バリデーションなどは開発者側で組み合わせます。
そのぶん、仕組みが見えやすく、Node.jsのサーバー入門としてもよく使われます。

3-3. NestJS、Deno、Bun

有名どころとして、NestJS、Deno、Bunも名前を聞くと思います。
NestJS（ネストジェイエス）は、Node.js上で大きめのサーバーアプリを作るためのフレームワークです。Angularに近い考え方を持ち、モジュール、コントローラー、サービスなどの形を決めて開発します。
Deno（ディノ）とBun（バン）は、Node.jsと同じくJavaScriptやTypeScriptを動かす実行環境です。どちらも実行機能だけでなく、パッケージ管理やテストなどの開発機能も備えています。Node.jsの代わりになる場面もありますが、最初に触るなら、教材や情報量の多いNode.jsから入るのが無難だと思われます。

4. サイト全体の作り方まで面倒を見るもの

React、Vue、Svelteは画面を作る道具です。
しかし実際のWebサイトでは、ページ遷移、レンダリング、データ取得、サーバー側の処理、API、ビルド、デプロイ、場合によっては画像最適化なども考えます。こうした機能の一部または複数をまとめて助けるのが、Next.js、React RouterのFramework Mode、Nuxt、SvelteKit、AstroのようなWebフレームワークです。

この図は、アクセス時にサーバー処理が走る構成の一例です。実際の処理経路は、フレームワークやレンダリング方式によって変わります。

4-1. Next.js

Next.js（ネクストジェイエス）は、Reactを使って本格的なWebアプリを作るためのフレームワークです。ReactコンポーネントでUIを作り、Next.jsがルーティング、レンダリング、画像最適化などの機能を足してくれます。
Reactが「画面部品を作る道具」だとすれば、Next.jsは「ReactでWebアプリ全体を作るための土台」ですね。

Reactの中心的な役割	Next.jsが標準でまとめる機能
コンポーネントでUIを作る	ファイルベースルーティング
状態に応じてUIを更新する	サーバー／クライアントでのレンダリング
周辺構成は別途選択できる	データ取得、Route Handlers、画像最適化など

「Reactを学んだらNext.jsも必要ですか」と聞かれたら、答えはもちろん用途次第です。
小さな画面部品や管理画面ならReactだけでも作れます。SEOが必要な公開サイト、ログイン付きWebアプリ、サーバー側の処理も含むプロダクトならNext.jsが候補に入るといった感じですかね。

4-2. Nuxt

Nuxt（ナクスト）は、Vueを使ってWebアプリを作るためのフルスタック寄りのフレームワークです。Vueで本番向けWebアプリを作るための土台になります。
Reactに対するNext.jsのように、Vueに対してNuxtがあります。Vueのコンポーネントで画面を作りながら、ページ構成、サーバー側の描画、データ取得などをNuxtが助けます。

4-3. SvelteKit

SvelteKit（スヴェルトキット）は、SvelteでWebアプリを作るためのフレームワークです。
SvelteがUIコンポーネントを作る道具だとすれば、SvelteKitはページ、ルーティング、サーバー処理、データ取得まで含めた土台です。Svelteの素直な書き味を保ちながら、アプリ全体を組めるようにします。

4-4. AstroとReact Router、Remix

Astro（アストロ）は、ブログ、ドキュメント、マーケティングサイト、ECサイトのようなコンテンツ中心のWebサイトでよく名前が出ます。ページの文章や画像を中心に見せるサイトと相性がよいフレームワークです。
React、Vue、Svelteなどを必要な部分だけ混ぜられるのも特徴です。ページ全体に大量のJavaScriptを送らず、必要なところだけ動かす方向です。

React Router（リアクトルーター）は、もともとReactアプリのルーティングを扱うライブラリとして広く使われてきました。現在のv7では、Framework Modeとしてサーバー描画、データ取得、フォーム処理なども扱えます。
Remix（リミックス）v2の主要機能はReact Router v7へ統合されており、新規プロジェクトではReact Router v7から始めることが公式に推奨されています。一方で、Remix 3は新しいフルスタックフレームワークとして開発中ですが、2026年6月時点ではベータ版です。
なお、Remix 3は従来のRemix v2とは異なり、Reactを前提としない新しい設計です。同じ「Remix」という名前ですが、Reactベースだったv2の単純な後継として考えると混乱するため、分けて捉えたほうがよいでしょう。まずは「React Router v7がReact側の重要な選択肢になっている。Remixは移行期」と捉えるのが安全です。

5. 開発を支える道具たち

ここからは、ライブラリやフレームワークではないものも混ざります。ただ、JavaScript開発で必ずと言っていいほど出てくるので、同じ地図に載せておきます。

5-1. npm

npm（エヌピーエム）は、JavaScriptのパッケージを管理する道具です。Node.jsと一緒によく使われる標準的なパッケージマネージャーです。
React、Vue、Express、Viteなどを使うとき、多くの場合はnpm経由でインストールします。

npm install react
npm install express

npmをたとえるなら、巨大な部品倉庫と、その部品を持ってくるための注文端末です。
すべてを自作する代わりに、世界中の開発者が公開した部品を使えます。ただし、便利さと引き換えに、依存関係やセキュリティにも注意が必要です。

5-2. Vite

Vite（ヴィート）は、フロントエンド開発を快適にするWeb向けのビルドツールです。
ReactやVueで開発するとき、書いたコードをブラウザで動かせる形へ変換し、開発用サーバーを立て、変更をすぐ画面に反映してくれます。

npm create vite@latest

Viteは、アプリそのものを作るフレームワークではありません。
どちらかというと、開発中の作業場です。机、電源、工具置き場、試運転用の装置をまとめて用意してくれる感じです。

5-3. TypeScript

TypeScript（タイプスクリプト）は、JavaScriptに型の構文を足した言語です。JavaScriptの書き方を土台にしつつ、値の種類をコード上で扱えるようにします。
実行時にブラウザがTypeScriptをそのまま読むわけではありません。通常は、TypeScriptを書き、それをJavaScriptへ変換して動かします。

function add(a: number, b: number): number {
  return a + b;
}

TypeScriptは、ReactやNext.js、Angularなどと一緒に使われることが多いです。
最初から全部を理解する必要はありませんが、エラーを早めに見つける、エディタの補完を強くする、チームでコードを読みやすくする、という意味でかなり重要です。
TypeScriptは開発ツールではなく言語です。ただし、型チェックやエディタ補完を通して、開発を支える役割も持っています。

6. 学ぶ順番のおすすめ

いきなりNext.jsやAngularから入ると、覚えることが一気に増えます。最初は、土台から少しずつ積むほうが楽です。
ここで少しややこしいのがNode.jsです。Node.jsには、npmやViteなどの開発ツールを動かす土台としての役割と、APIやWebサーバーを作るサーバー実行環境としての役割があります。ReactやVueを触るだけでも、開発環境としてのNode.jsにはかなり早い段階で出会います。

私としては、次の順番が分かりやすいと思います。

Reactから入っても、Vueから入っても問題ありません。
注意したいのは、「Reactを覚えたからJavaScriptを覚えた」ではないことです。ReactはJavaScriptの上にある道具なので、詰まったときは結局JavaScript本体へ戻ります。逆に、JavaScriptの基礎があると、React、Vue、Svelte、Node.jsの見え方がかなり変わります。

7. 一覧でまとめてみる

最後に、名前と役割をまとめます。
細かい違いはありますが、最初はこの表くらいの粒度で十分です。

8. おわりに

ここまでお読みいただきありがとうございます。

JavaScript周辺の名前は、最初は本当にややこしいです。ReactもNext.jsもNode.jsも、同じ棚に並んでいるように見えますが、実際には役割が違います。

まとめる中で、JavaScriptつよっ！と思いました。言語と錯覚させるレベルの周辺技術がこんなに豊富なのか、と少し笑ってしまいました。