# 「自學程式現場」什麼是前端工程師？

> 「我不是本科生，適合寫程式嗎？」「我想學程式，應該學哪個程式語言」或是「我已經三十好幾，現在轉職會不會太晚？」這樣的討論，是每個想轉職軟體工程師的人心中，一定曾冒出來的問題，我希望可以透過我自己過往的自學以及教學經驗，幫助大家順利往理想的道路前進

Published: 2021-09-20
URL: https://kaochenlong.com/frontend-developer

---

前端工程師，英文全名是 Front-End Developer 或 Front-End Engineer，有時也會縮寫成 F2E。

現在大家聽到這個職稱，想到的大概就是可以在網站上做很炫的特效的工程師，但在當年我一開始學習寫程式的年代，並不存在這個名詞。一來那個時候就是一個人從 HTML、CSS 的切版到資料庫的架設、存取甚至連主機的架設跟設定都得一條龍自己包辦（硬要用現代的名詞講就是所謂的「全端工程師（Full Stack Developer）」，但我其實沒有很喜歡這個名詞）。

二來也是因為網路技術的發展十分迅速，印象中，當年 Google Map 剛推出的時候，超炫的地圖拖拉、放大縮小功能，整個把 AJAX 這個名詞給炒紅了，自那之後就越來越多 JavaScript 的應用。

當年只是用來做簡單的表單驗證的 JavaScript 已經複雜到不是一個人可以輕鬆搞定的程度了，於是逐漸特化出「前端工程師」這樣的角色出來。即然有「前端」，那自然也有相對的「後端」工程師，但請繼續容我在後續的文章再介紹。

其實手機 App 的開發者很常常也需要存取網站的 API 然後呈現在 App 裡，所以在我認定裡手機 App 工程師也算是前端。以下我就以網站的前端工程師來舉例說明，到底當一個網站前端工程師的工作內容有哪些，以及需要具備哪些的技術。

<!-- more -->

## 網站前端工程師所需技術

我認為一個合格的前端工程師要學的技術很多也很雜！但最少最少最少一定需要具備的有三個技能：

- HTML
- CSS
- JavaScript

### HTML

學習難度：★★☆☆☆

HTML 是一種標記語言（Markup Language），用來描述網站頁面的結構，例如 `<h1>` 用來代表最大的標題，`<p>` 代表的是段落，而 `<ul>` 跟 `<li>` 等標記則是用來表示列表等等。

就以學習上來說，這應該算是在這三項技術裡最容易的。

### CSS

學習難度：★★★★☆

HTML 負責網頁的結構，CSS 則是負責樣式。有些人可能覺得 CSS 不就調調顏色、設定按鈕的圓角而已嗎？那你就太小看 CSS 了。光是要把設計師的設計稿精準的重現成網頁格式，有時候還得面對不同廠牌的瀏覽器，例如 Chrome、IE、Firefox 跟 Safari（Safari 還有分電腦版的跟桌機版的不同）。

現在大家都習慣用手機上網，所以要做出適應各種大小尺寸的 RWD（Responsive Web Design）也是 CSS 的守備範圍。

近年來 CSS 的發展越來越厲害，甚至不需要 JavaScript 的程式碼就能做出很炫的效果，有興趣可到 [CodePen](https://codepen.io/) 看看那些厲害的人拿 CSS 做了什麼變態的事。

### JavaScript

學習難度：★★★★★★★★★★...xN（咦？）

JavaScript 又簡稱 JS，這應該算是當一個前端工程師最難的上手的大魔王等級技能，要學的深度跟廣度都很驚人，如果你不覺得 JS 很難學，如果不是天生神力，就可能表示你還學的不夠透徹。

JS 有多難學以及該怎麼學，請容我之後用另外的文章再專門介紹。

另外，在這個「自學程式現場」的系列文章裡，我會實際拍幾部短片讓大家感受一下 JavaScript 寫起來是什麼樣子，也歡迎大家到時候可以跟著影片動手寫看看。

## 網站前端工程師的工作內容是什麼？

假設，客戶想要做一個工作職缺媒合網站，專案開始的時候，通常負責這個專案的 PM 會先把功能條列出來跟客戶確認，同時也會跟前、後端開發者們確認工時以及可行性。

開始動工後，最源頭也許是網頁設計師先做出設計稿，客戶確認設計稿合乎需求後，就會進到下個步驟，開始把設計稿想辦法透過 HTML 跟 CSS 技術轉換成網頁，這個步驟通常業界都會叫它做「切版」。

「切版」的工作切分比較不一定，每家公司不一樣，而且也跟人員的配置有關。切版有時是由網頁設計師自己處理，也可能是由前端工程師來進行。切完版後，如果沒有太複雜需要跟後端資料庫做互動的話，也許再做一些選單或做一些頁面上的特效就差不多可以收工了。

但通常都沒有這麼好命，我就以「收藏職缺」的功能為例，網站使用者在登入網站之後，看到喜歡的職缺，按下收藏按鈕。這時通常在前端會需要使用 JavaScript 發動一個請求（HTTP Request），並且把相對應的參數，例如職缺的編號，一併跟著這個請求傳給後端程式。

後端程式收到請求並且處理完之後，會回應訊息給前端的程式，由於剛剛前端來的請求通常是「非同步（asynchronous）」，也就是前端程式收到後端給的資訊後，會依據成功或失敗以及得到的訊息做出回應。如果成功，就要把那顆按鈕做一些樣式上的變換，也許是讓按鈕變深色，好讓使用者知道剛剛的「收藏職缺」功能生效了；如果失敗，要再看失敗的原因是什麼，然後適當的在頁面上告知使用者出了什麼問題。

所以，前端工程師要做的事其實很多，不是只有切切版就叫前端工程師，有時候得與網頁設計師一起協作，把設計變成真的會動的東西；也得跟後端工程師協作，討論資料要怎麼傳、API 要怎麼串接等事情，如果後端工程師沒辦法生 API 給你用，你可能得自己先想辦法弄個模擬的 API 來測試。

除了各種廠牌的瀏覽器最好都能正常運作外，還得支援各種行動裝置，讓網站在手機上也能順利操作，同時效能還不能太差...。

所以如果只會切版的，我通常會稱它叫「切版員」。

## 容易找工作嗎？薪水如何？

還算容易，在人力銀行上搜尋「前端工程師」或「Frontend」等關鍵字就可以搜尋到不少的職缺，也常常在社群網路上可以看到公司或獵頭主動來張貼職缺，薪資也都滿漂亮的。

薪資要看工作地點也得要看產業，台北、高雄會高一些，另外博奕產業也會高一些。就以我自己的體感，在台北的 Junior 前端工程師，差不多月薪在 40,000 元上下，比較菜的可能會被砍個二、三千塊，比較有談判籌碼的也許可以談到月薪 45,000 或更高。另外博奕業加成差不多是 5,000 ~ 10,000。

至於前端的面試該怎麼準備、要不要刷題、要不要學框架、框架要學哪一款，又或是要怎麼變強或怎麼談薪水，還請期待這個系列後續的文章介紹 :)

...to be continued ✌️