[career/01] 好的前端工程師需要什麼能力？不只是會寫 React

結論先講

好的前端工程師，不是「會用 React」的工程師。是能把設計稿變成快速、可維護、所有人都能用的產品的工程師。框架會換，但基本功不會過時。

如果你現在只會寫 React component，卻說不出 display: grid 和 display: flex 什麼時候該用哪個、不知道 Lighthouse 分數代表什麼、沒開過 DevTools 的 Performance tab——那你可能只是「會用框架的人」，還不算是好的前端工程師。

這篇文章幫你盤點：從 Junior 到 Senior，前端工程師的能力地圖長什麼樣。

1. HTML/CSS/JS 基本功：框架來來去去，這些不會變

很多人學前端是直接從 React 開始，跳過了最基礎的東西。這會在某個時間點反噬你。

HTML 你該知道的：

語意化標籤不是裝飾，<article>、<nav>、<main> 影響 SEO 和無障礙
<form> 的原生行為（不是所有表單都需要 preventDefault）
<img> 的 loading="lazy"、srcset、sizes

CSS 你該知道的：

Box model 不只是面試題，是你每天 debug 的基礎
Flexbox 和 Grid 的差別：一維 vs 二維，不是「哪個比較新」
CSS specificity 計算（為什麼你的樣式被覆蓋了？）
響應式設計不是加 media query，是思考內容在不同尺寸怎麼呈現

JavaScript 你該知道的：

Event loop、microtask vs macrotask（為什麼 setTimeout(fn, 0) 不是立即執行？）
Closure 不是面試題，是你寫 hook 的基礎
Promise、async/await 的錯誤處理（不是所有 Promise 都需要 try/catch）
ES Module 和 CommonJS 的差別（不是只有 import vs require）

實測：如果你能不用任何框架，純用 HTML/CSS/JS 寫出一個 responsive 的 todo app，你的基本功就及格了。

2. Framework：選一個深入，但知道其他的存在

面向	深入一個框架	每個都碰一點
面試	能回答深度問題	只能答表面
解 bug	看得懂 source code	只能 Google
架構決策	知道框架的限制在哪	不知道什麼時候該換方案
跳槽	底層概念通用，轉框架快	感覺會很多，其實都不精

你不需要同時會 React、Vue、Angular、Svelte。你需要的是：

深入一個：理解它的渲染機制、狀態管理哲學、生態系
了解其他：知道 Vue 的 reactivity 跟 React 的 re-render 差在哪，面試時能聊

具體來說，如果你選 React：

你該知道 Virtual DOM diffing 的基本概念
你該知道為什麼 useMemo 不是用來「加速所有東西」的
你該知道 Server Components 解決什麼問題
你該看過至少一次 React 的 source code（不用全看，看 useState 的實作就好）

3. Performance：不是選配，是基本要求

Web Vitals 不是 Google 的玩具，是用戶體驗的量化指標：

指標	衡量什麼	好的標準	常見問題
LCP	最大內容繪製	< 2.5s	圖片太大、字型載入慢
INP	互動延遲	< 200ms	主執行緒被佔用
CLS	視覺穩定性	< 0.1	圖片沒設寬高、動態內容插入

你該會的效能技能：

看得懂 Lighthouse 報告，知道每個建議的意思
懂得用 React.lazy / dynamic import 做 code splitting
知道什麼時候該用 SSR、SSG、CSR（不是 SSR 就是最好的）
Bundle analyzer 是你的好朋友（webpack-bundle-analyzer 或 @next/bundle-analyzer）
圖片最佳化：WebP/AVIF、responsive images、CDN

真實案例：某電商首頁 LCP 從 4.2s 降到 1.8s，只做了三件事——壓縮 hero image、preload 關鍵字型、移除未使用的 JS。不需要重構，不需要換框架。

4. Accessibility（無障礙設計）

這不是「加分項」，在很多國家是法律要求。台灣的《身心障礙者權益保障法》也有相關規範。

基本中的基本：

所有 <img> 都有 alt（裝飾性圖片用 alt=""）
表單 <input> 都有對應的 <label>
鍵盤可以操作所有互動元素（不是只有滑鼠能用）
顏色對比度符合 WCAG AA（4.5:1 以上）
用 semantic HTML 而不是一堆 <div>

進階但重要：

ARIA 屬性的正確使用（aria-label、aria-expanded、role）
螢幕閱讀器測試（macOS 有 VoiceOver，Windows 有 NVDA）
Focus management（modal 打開時 focus 要移進去）

5. 跟設計師溝通：看得懂 Figma 是最低要求

好的前端不只是「照著設計稿刻」：

能看出設計稿的 spacing 系統（8px grid？4px？）
能提出技術限制（「這個動畫在低階手機會卡」）
能建議替代方案（「用 CSS transition 取代 JS 動畫，效果一樣但效能更好」）
知道 Design Token 的概念，能跟設計師建立共同語言
能主動發現設計稿沒覆蓋到的 edge case（loading state、error state、empty state）

6. DevTools：你的日常武器

Chrome DevTools 不是只有 Console：

Tab	用途	你該會的操作
Elements	即時修改 DOM/CSS	修改樣式、看 computed styles、模擬 pseudo-class
Console	除錯	`console.table`、`console.group`、`$0` 快捷鍵
Network	看請求	過濾請求、看 waterfall、模擬慢網速
Performance	效能分析	找出 long task、分析 rendering pipeline
Application	儲存	看 cookies、localStorage、Service Worker 狀態
Lighthouse	整體評分	跑完看建議，但不要盲目追求 100 分

7. Testing：不是 QA 的工作

測試類型	工具	測什麼
Unit Test	Vitest / Jest	純邏輯、utility function
Component Test	Testing Library	元件行為（不是實作細節）
E2E Test	Playwright / Cypress	使用者流程
Visual Regression	Chromatic / Percy	UI 有沒有不小心改壞

重點不是覆蓋率 100%，是測對的東西。Testing Library 的哲學說得好：「測試應該模擬使用者怎麼用，而不是測試實作細節。」

8. Junior vs Senior 能力對比表

面向	Junior	Senior
HTML/CSS	能刻出設計稿	能判斷設計稿的可行性和效能影響
JavaScript	會用語法	理解底層機制，能解釋為什麼
Framework	會用 API	理解設計理念，能做架構決策
效能	不太關注	主動監控，知道瓶頸在哪
無障礙	不知道這是什麼	開發時就考慮進去
Testing	被要求才寫	主動規劃測試策略
溝通	接收需求	影響設計和產品決策
Debug	靠 console.log	系統性分析，善用 DevTools

FAQ

Q1: 前端工程師需要會後端嗎？

不一定要「會寫後端」，但你需要理解 API 是怎麼運作的。能看懂 HTTP status code、知道 REST 的慣例、能用 Postman 測 API——這些是基本要求。如果你能用 Node.js 寫簡單的 API，那是加分。

Q2: 要學 TypeScript 嗎？

2026 年，答案是 yes。不是因為它很潮，是因為它在大型專案中能顯著減少 bug。而且現在大多數公司的前端專案都用 TypeScript。

Q3: CSS-in-JS、Tailwind、CSS Modules，該選哪個？

沒有絕對的答案。重要的是理解每個方案解決什麼問題。Tailwind 適合快速開發，CSS Modules 適合元件化，CSS-in-JS 適合動態樣式。能說出每個的 trade-off，比選「對的」更重要。

Q4: 前端需要懂 CI/CD 嗎？

至少要會設定前端專案的 CI（跑 lint、test、build）。能設定自動部署到 Vercel/Netlify 是基本。更進階是理解 preview deployment、branch protection 等概念。

Q5: 從 Junior 到 Senior 大概要多久？

不是時間的問題，是能力的問題。我看過兩年就到 Senior 水準的人，也看過五年還在 Junior 程度的人。關鍵是你有沒有在每個專案中刻意練習上面提到的這些面向。

Terry Yao's Blog

分類

目錄