Photo created by freepik
對於想要跨領域轉職軟體工程師的求職者來說，相較於後端的學習，前端領域似乎是一個可以相對快速進入的目標。但是在轉職前端工程師之前，你對於學習前端技術、人才市場、薪資行情了解嗎？
前端工程師需要具備哪些技術力、前端工程師的日常會有哪些任務？跟著這篇文章，帶你深入了解前端工程師，幫助你做足前端轉職準備，無程式開發經驗者，也可以成功取得夢想中的工作職位！
一、前端工程師該具備什麼樣的技能？
當你在購物平台的網頁上購買一箱飲料，你所看到的圖片、說明文字、購買按鈕、顯示的存貨數量等，都是經由前端工程師的巧手開發與排版後，才能呈現在你的眼前。前端工程師也負責與使用者介面相關功能的開發與維護，除了讓使用者能輕鬆與產品互動外，也需要確保所有資料能夠順利且快速地顯示給使用者看。
工欲善其事，必先利其器！以下整理出前端工程師的技能要求與使用的工具。
1、具備技術：
(1) 必備技能－HTML ＆ CSS
前端工程師一定要了解 HTML，HTML 是用來建構網頁的「標記語言」，必須了解如何撰寫 HTML 的結構，有助於未來學習 SEO 、無障礙網站的撰寫方式。
CSS (Cascading Style Sheets) 是一種樣式表 (StyleSheet) ，用來控制網站顯示的樣式，不論是在網站上看到的顏色、字體大小、形狀一切都來自於 CSS 不同的屬性。透過 CSS 可以讓網頁更生動！然而 CSS 不能單獨使用，必須與 HTML 一起使用，才能起裝飾作用。簡單來說，HTML 像是一個全身穿著基本服裝的人，CSS 則是飾品與化妝品。
(2) 必備技能－JavaScript ＆ jQuery
JavaScript 是一個簡單、以物件為基礎的敘述語言。主要運行於瀏覽器中的動態腳本語言。我們可以透過 JavaScript 做到像是：數據驗證處理、頁面動畫、資料串接、表單驗證等等與瀏覽器互動的行為，讓現在網站能被賦予更多、更強大的功能。
至於 jQuery，則 是一個以 JavaScript 來編寫的函式庫 (工具庫)，它簡化了 JavaScript 的方法，讓開發者能快速的在 HTML 文件裡面尋找 DOM 物件 (簡單來說，就是網頁上的元件)、綁定事件 (像是：一點擊”特定的送出按鈕“，就去進行某某某事) 。對於第一次接觸 JavaScript 的新手，使用 jQuery 的方法就能快速、簡單的實現 JavaScript 繁瑣的操作，雖然它已經行之有年，但是一個功能強大且相當好用的函式庫。
(3) 必備技能－前端框架
框架，是用來解決網頁開發上常碰到的前端底層程式問題，例如：資料的綁定、網頁路徑的切換、非同步資料的取得等。適用的情境，是在複雜性較高、較大型的網路應用程式上，在單純 JavaScript 需要很費力氣才能做到的開發情境下使用。
現在的網頁複雜度與互動性越來越高、介面上的變化也越來越多。如果只使用純 JavaScript 開發網頁，沒有模組化的話，在開發協作與維護上的成本會很高。
框架的選擇有很多種，目前主流的三大前端框架有 Angular, React, Vue，它們已經歷經了一段時間的考驗，擁有活躍的社群，也有豐富的官方文件與學習資源。
當你學到一定程度後，想要選擇一種框架學習時，也許會問：「選擇哪一種框架比較好？」這其實是許多前端新手會有的疑問，在選擇框架前會不斷搜尋比較文章，但是框架都是需要親自玩過，或是根據專案上的需求才能比較出之間的適合與否。不論是選擇哪種框架，他們背後的原理都有關聯、甚至設計原理有互相借鑑，因此不用擔心學了一個後、要再學另一個會是 ”從頭學起“。
(4) 必備技能－響應式網頁設計
響應式網頁設計 (Responsive Web Design, RWD) 是透過使用 CSS，使得網站在不同大小的螢幕視窗能有相對應的網頁排版的方式，使得各種裝置的使用者，像是電腦、平板、手機、電視等，在瀏覽同一網站時，都能呈現最佳、最理想的使用者體驗。
(5) 必備技能－API 串接
應用程式介面 (Application Programming Interface) 是指各種軟體組件之間一套明確定義的溝通方法。簡單來說，可以指兩個應用程式之間的互動，通常會以客戶端與伺服器端來說明。前端工程師在客戶端 (網頁上) 根據不同的需求，透過 API 向伺服器端索取資料，並呈現在畫面上供使用者觀看、使用。
前端工程師需要能夠理解閱讀後端的 API 文件，根據後端所開出的 API 規格來串接資料，再適時的溝通、規劃出當下最適當的資料規格，提升雙方的工作效率、減少未來可能的負擔。
(6) 必備技能－SEO 搜尋引擎最佳化
網站搜尋引擎最佳化（Search Engine Optimization），指的是讓網站順應搜尋引擎的爬蟲演算法進行修改，使網站更容易被使用者看到、搜尋到。與前端最直接相關的就是 HTML，HTML 除了決定頁面的結構外，內容所使用的語意化標籤與屬性，也會大幅的影響搜尋引擎的爬蟲解讀網站。
但，別忘了網站最終的目的為服務使用者，前端工程師提高網站的可見度固然重要，但如果網站內容不符合使用者的需求，或是使用者體驗不良，即使有新流量進來，最終也只是促使更高的跳出率。
2、具備工具
(1) 必備工具－版本控制
版本控制是程式開發時天天使用的準則與做法，透過版本控制，我們可以更新追蹤目錄 (資料夾) 和檔案的修改歷史，在不影響其他開發者的開發版本情況下，可以同時與多個開發者進行專案協作，必要時也能從特定時間點將舊版本的程式碼提出來，是軟體開發者的必備工具。
常見的版本控制系統有：CSV、SVN、Git
(2) 必備工具－CSS 預處理器
CSS 預處理器 (pre-processor)，是用另一種特定的語法規則撰寫 CSS，在編譯成原生 CSS 檔案，讓瀏覽器可以讀取。讓開發者透過像是變數 (varialbe)、混入 (mixin)、繼承(extend)、嵌套 (nesting) 等常見的程式或邏輯的特性撰寫 CSS，撰寫出更簡潔、可讀性高、可重複且易於維護的 CSS 程式碼。
網站頁面越來越多，不同頁面之間的 UI 會越複雜，就更需要使用結構化的方式來撰寫 CSS 語法，否則這些龐雜的 CSS 語法有可能會讓網站失去控制，導致檔案變成極其肥大的樣式表，讓頁面顯示效能低落，或是出現樣式的錯誤卻找不到問題的源頭。
常見的 CSS 預處理器有：Sass、LESS、Stylus
如果想要更了解前端與後端的差異，可以閱讀以下兩篇文章。
二、前端工程師需要哪些核心能力？
成為前端工程師除了需要具備上述的技術力以外，若能具備以下的四個特質，對於你在前端領域的發展與成長會很有幫助。
1、思考能力
前端工程師透過 HTML, CSS, JavaScript 把設計好的頁面轉換成網頁，這樣的轉換需要掌握許多抽象概念：變數、迴圈、函式等。接到開發網頁的需求時，會需要思考系統的使用流程，也會需要大量的抽象與邏輯能力將系統流程轉化為步驟，並對應到可以實作的功能上。
遇到程式碼卡關時，能夠判斷事情的輕重緩急，是程式碼的問題？或單純是自己打錯字？若是程式碼的問題，先判斷專案時程上是否有時間可解決，如無法就必須另尋解決方式或是暫停解決根本問題，並針對問題搜尋關鍵字，不論是閱讀前輩的技術文章或是官方文件等來解決並檢討，如果開發時間還有餘裕的話，可以再進行程式碼優化。
2、溝通表達能力
專案開發都是由多位團隊成員各司其職，共同打造出來的，因此具備跨部門的合作與溝通的能力也是相當重要的一環。
在開發產品時，軟體工程師首要目標需要先釐清需求邏輯與產品規格，在開發過程時才不會迷失製作方向。特別是專案複雜程度越高，溝通技巧就越是重要，甚至在遇到問題卡關的情況下，需要將自己所遇到的困境，或需求技術上的阻礙，有條理的傳達給夥伴知道，讓彼此的理解能有一定程度的同步，不僅大大提升開發效能，也能節省大量繞道的時間。
如果公司層級分層明顯，越會接觸不同領域的同事，像是需要與 PM 或是網頁設計師溝通，也許他們對於程式概念不清楚，工程師越需要具備這樣的能力，才可以有效傳達自己的想法給不同職務的人員。
3、美感與設計的理解力
有美感鑑別力的前端工程師，會讓整個網站更有質感。但如果真的沒有美感呢？那就細心一點，將設計師所提供的靜態設計細節呈現在網頁上面。
前端網站的變化其實有固定的狀態、脈絡及經驗可以累積，因此，能清楚知道每個流程設計背後的「why」及能有意識察覺到體驗問題的工程師，越能清楚知道用戶體驗的感受並做出相對應的功能優化與調整。
4、學習力
前端技術更迭相當快，經常有許多新的技術及應用出現，如果不能時常接觸新技術、新概念的話，很快就會被更高效、更好用的「 工具 」所取代。除了持續精進自我能力之外，還要不斷吸收及學習新知，願意搜尋更好的解決方式，才能為團隊帶來更顯著的價值，並提升自己的職場競爭力。
三、前端工程師的日常任務有哪些？
1、轉化設計為網頁
當前端工程師得到網頁設計草稿時，需要利用程式技術將設計轉換為互動性網頁，主要包含：頁面排版、不同的互動式元件 (下拉式選單、對話框等) 、網頁外觀或動畫等。在開發過程中，想像中的使用行為很難百分之百與實作行為相符，或是有時會出現資源不足無法實現的情況，都是需要不斷的進行測試與優化，並同時與網頁設計師討論解決方案。
2、優化網頁效能
網頁不只需要有吸引人的外觀，也需要擁有完整功能與即時反饋，不僅要貼合使用者操作流程的需求，也要提升使用者體驗的好感度，才不會將新流量轉換成跳出率。前端工程師的工作內容除了設計細節實作，也需要持續調整網頁效能，確保網站的性能達到最佳水平，包括加速頁面載入速度、減少資源的請求次數等，並在出現問題時能即時優化。
3、與後端伺服器溝通
現在多數的網頁需要從網路伺服器拿取資料來呈現在使用者的瀏覽器上，依據使用者的操作進行各種資訊的儲存與傳遞。這包含對自家伺服器、第三方服務，像是 Google、 Facebook 等，進行網路請求與回應的處理。也需要與後端開發人員協作，確保前後端的資料傳輸和頁面的呈現都能夠正常運行。
四、前端工程師的市場趨勢
根據 104 薪資情報，前端工程師的職缺數量約有 3000 筆，平約月薪大約落在台幣 42,000 元，但實際待遇會依據求職者資歷、背景、公司產業、發展狀況以及職務需求，所給的薪資行情會有不同。
若想知道軟體工程師在全球的趨勢，可以參考 Stackoverflow 2022 年的調查報吿，從調查報告可以知道，前端工程師的薪資在不同工程師的類別中並不突出，但相較於其他產業職務，它的待遇仍舊很有吸引力，加上進入前端的門檻較低，因此可說是轉職跨入軟體領域的熱門職涯選項。
五、結語
轉職，是一個勇敢的決定，而轉職成為前端工程師前，更需要有一定的準備和了解。這篇文章主要是希望能夠幫助想要轉職前端工程師的求職者，能更深入地了解這個領域，掌握必備技能和日常任務，為自己的職業生涯做好準備！
如果你想要了解轉職軟體工程師的課程，歡迎預約免費課程諮詢 ASTRO Camp 全端工程師實戰訓練營 ，在翻轉職涯的路上，五倍學院會一直陪著你前進。