小編精選 - 技術文章翻譯 · 06月18日

整理了一下那些看起來像語言一樣盯著你的 JavaScript 周邊技術，例如 React、Next.js 等

前言

晚上好，我是 miruky。
因為我原本是文組出身，所以剛開始學程式時，常常會想：「React 跟 Next.js 是程式語言嗎？那是什麼？」畢竟它們因為太常被使用，反而一副彷彿自己就是程式語言的樣子，氣勢十足，不是嗎？（主觀感想）而像 TypeScript 這種名稱裡還帶有「Script」的正式語言，也進一步加深了我的誤會。

像我這樣的人，應該不少。具體來說，就是 React、Node.js、Next.js、Vue、Angular、Svelte 這些。順帶一提，奇妙的是，我在剛開始學的時候，卻很快就理解 jQuery 不是語言（為什麼）。然而，其他這些傢伙，卻都一副好像是另一種語言的樣子，靜靜地站著。

這篇文章會盡量用淺白的方式，整理有名的 JavaScript 周邊函式庫、框架、執行環境，以及開發工具。比起細部 API 的使用方法，更著重於理解「它是什麼、在哪裡使用」。更深入的部分，就交給技術書了。

1. 分清 JavaScript 本體與周邊工具

首先，JavaScript 本身是一種程式語言。它是一種用來在網頁中加入複雜功能的腳本語言，也是可在瀏覽器中執行的代表性程式語言。
另一方面，React 和 Next.js 並不是 JavaScript 本身。它們是用 JavaScript 製作，或是用來撰寫 JavaScript 的工具。

先來分一下名稱的種類。

種類淺白意思範例語言用來撰寫指令的語言JavaScript、TypeScript執行環境執行 JavaScript 的地方瀏覽器、Node.js函式庫只借用必要零件的工具React、jQuery框架連同應用程式的做法一起提供的工具Angular、Vue、SvelteWeb 框架路由、渲染、資料取得、建置等，負責組裝整個網站或應用程式的工具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 目前仍常見於舊網站、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（View）是一個能保留 HTML、CSS、JavaScript 感覺來開發 UI 的框架。它是一個以標準 HTML、CSS、JavaScript 為基礎，用來建構使用者介面的 JavaScript 框架。
和 React 一樣，Vue 也是用元件來製作畫面，但 Vue 比較容易寫出接近 HTML 模板的寫法。

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

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

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

Vue 提倡「漸進式 JavaScript 框架（Progressive JavaScript Framework）」，可以從既有頁面的一部分導入，一步步擴大到完整的應用程式開發。

2-4. Angular 與 AngularJS

這裡的名稱很容易搞混。
AngularJS（Angular.js）是以前廣泛使用的舊框架，長期支援已於 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（節點 JS）不是函式庫，也不是框架，而是 JavaScript 的執行環境。它是一個以非同步事件驅動方式運作的 JavaScript 執行階段。
它可以在瀏覽器之外，也就是在自己的電腦或伺服器上執行 JavaScript。像是讀取檔案、架設 HTTP 伺服器、連接資料庫等，這些在瀏覽器中不方便處理的工作都能做到。
以下是 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（Express）是用來在 Node.js 上建立 Web 伺服器與 API 的框架。它是一個給 Node.js 使用的、極簡且彈性的 Web 應用程式框架。
就算只有 Node.js 本身，也能建立 HTTP 伺服器。不過，路由、Middleware、請求處理每次都手動組裝會很麻煩。Express 就是用來輕量地幫你補上這些部分。
這裡同樣是 ES Modules 形式的範例。

import express from "express";

const app = express();

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

app.listen(3000);

Express 是一種只提供最基本零件的工具。認證、資料庫、驗證等功能，則由開發者自行組合。
也因為如此，它的機制容易看懂，所以常被當作學習 Node.js 伺服器的入門工具。

3-3. NestJS、Deno、Bun

還有幾個常見的名字，像是 NestJS、Deno、Bun。
NestJS（Nest JS）是用來在 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（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（Nuxt）是用 Vue 來開發 Web 應用程式的、偏向全端的框架。它是用 Vue 製作正式 Web 應用程式的基礎。
就像 React 對應 Next.js 一樣，Vue 對應的是 Nuxt。你可以一邊用 Vue 元件做畫面，一邊由 Nuxt 幫你處理頁面結構、伺服器端渲染、資料取得等功能。

4-3. SvelteKit

SvelteKit（Svelte Kit）是用 Svelte 來開發 Web 應用程式的框架。
如果 Svelte 是製作 UI 元件的工具，那 SvelteKit 就是包含頁面、路由、伺服器處理、資料取得在內的基礎。它能在保留 Svelte 直覺寫法的同時，讓你組出整個應用程式。

4-4. Astro 與 React Router、Remix

Astro（Astro）在部落格、文件站、行銷網站、電商網站這類以內容為主的 Web 網站中很常被提到。它很適合以文章與圖片為中心呈現的網站。
它的特色之一，是可以只在需要的地方混用 React、Vue、Svelte 等框架。它傾向於不要把大量 JavaScript 傳到整個頁面，而是只讓需要的部分動起來。

React Router（React Router）原本廣泛被用作 React 應用程式的路由函式庫。現在的 v7 版本中，作為 Framework Mode 也能處理伺服器渲染、資料取得、表單處理等功能。
Remix（Remix）v2 的主要功能已整合到 React Router v7 中，官方也建議新專案從 React Router v7 開始。另一方面，Remix 3 則是正在開發中的新全端框架，但截至 2026 年 6 月仍是 Beta 版。
另外，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（Vite）是一個讓前端開發更順手的 Web 建置工具。
當你用 React 或 Vue 開發時，它會把你寫的程式轉換成能在瀏覽器中執行的形式，啟動開發用伺服器，並且在你修改後立即反映到畫面上。

npm create vite@latest

Vite 本身不是用來建立應用程式的框架。
比較像是開發中的工作場域：桌子、電源、工具架，以及試運轉裝置都幫你準備好。

5-3. TypeScript

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 太強了！居然有這麼多讓人誤以為是語言的周邊技術，忍不住有點想笑。

那麼，下次再見。

參考連結

JavaScript 的基礎

UI 函式庫與框架

Web 應用程式框架

執行環境與開發工具

原文出處：https://qiita.com/miruky/items/b892d9ff73495ca4b68d

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。

0個讚 0留言 4瀏覽

共有 0 則留言

登入之後發表留言

文字內容提供幾種功能：
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式

小編精選 - 技術文章翻譯

精選技術文章翻譯，幫助開發者持續吸收新知。

🏆 本月排行榜

🥇

站長阿川

📝16 ❤️1

492

🥈

我愛JS

評分標準：發文×10 + 留言×3 + 獲讚×5 + 點讚×1 + 瀏覽數÷10

本數據每小時更新一次

整理了一下那些看起來像語言一樣盯著你的 JavaScript 周邊技術，例如 React、Next.js 等

整理了一下那些看起來像語言一樣盯著你的 JavaScript 周邊技術，例如 React、Next.js 等

前言

目錄

1. 分清 JavaScript 本體與周邊工具

2. 在瀏覽器端製作畫面的工具

2-1. jQuery

2-2. React

2-3. Vue

2-4. Angular 與 AngularJS

2-5. Svelte

3. 在伺服器端執行 JavaScript 的工具

3-1. Node.js

3-2. Express

3-3. NestJS、Deno、Bun

4. 連網站整體做法都一起處理的工具

4-1. Next.js

4-2. Nuxt

4-3. SvelteKit

4-4. Astro 與 React Router、Remix

5. 支援開發的工具們

5-1. npm

5-2. Vite

5-3. TypeScript

6. 推薦的學習順序

7. 用列表整理看看

8. 結語

參考連結

JavaScript 的基礎

UI 函式庫與框架

Web 應用程式框架

執行環境與開發工具

小編精選 - 技術文章翻譯

🏆 本月排行榜