2022 年成為前端工程師的學習路線
想要在 2022 年成為一名前端工程師嗎？這篇文章將為你規劃一條完整的學習路線，從基礎的 HTML、CSS、JavaScript，到進階的框架和工具，讓你能夠循序漸進地達成目標。
嗨！不知不覺又過了一年！不知道大家 2021 這一年過得如何？最近開始有聽到幾個朋友也想要試著學習前端開發，剛好也看到了這一篇在講前端開發者所需要技術的整理，簡單節錄一下一起分享給有需要的讀者們。
接下來的分享基本上以這篇文章的內容為主，會以我的觀點節錄一些重點來跟大家分享，所以如果想看第一手資訊或是習慣看英文的朋友也可以點進去直接閱讀。
成為一個前端開發者需要的「基本」要素
沒錯，這篇文章是站在作為一個基礎的前端開發者的角度來設想需要的技能/工具，所以對於想要尋找 WebAssembly 或是 Svelte.js 之類新潮工具和技術的讀者們，這篇文章可能沒有你們想要的資訊。
2022 年想成為前端開發者的話，你可以接觸的工具跟技術 首先最基本的答案，也是你去問大部分開發者都會在第一時間得到的答案，就是 HTML、CSS 和 JavaScript。
接著就是圍繞著這三個基礎技術的工具，像是：
- 常常被提起的前端框架如 React ( 或是 Vue / Angular)
- 整合開發環境工具 VSCode 等等
工具的部分，可以進一步接觸的則有：
- 瀏覽器的開發者工具 （ Chrome 的話就是 Chrome Developer Tools )
- 套件版本管理器 NPM 還有程式碼打包器 Webpack
- 常常用來測試和開發 API 功能的 REST API 工具 Postman 或 Insomnia、GraphQL 下面讓我們一個一個來看這些提到的技術。
1. HTML
這是應該是每個想成為前端工程師的人會聽到的第一個技術，也是最古老的網頁技術之一。雖然他相對單純，但想要開發前端，不能不了解 HTML。在現代前端開發裡面，已經很少人單純用 HTML 來實作網頁頁面，因為目前的主流已經是用 React 或 Vue 之類的框架了。
但這些框架如果你多看幾眼就會發現，這些框架要能夠使用得上手，也必須對一些 HTML 裡面常見的標籤（如 <h1> 、<span> ）有基本的了解。關於 HTML 相關基礎可以參考這一堂 Udemy 的課程：
Learn HTML5 Programming From Scratch | Udemy
2. CSS, Flexbox and Grid
除了 HTML 之外，CSS 也是另外一個在網頁開發中很重要的元素，CSS 主要用來讓網頁看起來更生動華麗。最近使用純 CSS 撰寫的開發者已經越來越少了，相對的使用像是 Bootstrap、Tailwind 之類的 CSS 框架來做開發已經變得越來越主流了。
但因為目前 CSS 本身也在不斷的發展跟進化中，像是你現在會聽到的 Flexbox 跟 Grid。所以對於想學 CSS 的新手來說，還是建議從純 CSS 開始學習起會比較好，這邊推薦 CSS 一堂入門課程：
Advanced CSS and Sass: Flexbox, Grid, Animations and More | Udemy。
3. JavaScript
JavaScript 就不用說了吧，這是近幾年來幾乎是前端的中心，前端領域有很大一部分就是因為 JavaScript 的關係才得以引起風潮。
JavaScript 基本上掌管了網頁介面上的互動功能、甚至還有一些比較複雜的動畫特效，因此可以說是 JavaScript 讓整個網頁頁面活了過來。 而且更因為前端框架如（ Vue / Angular / React ）的流行，讓 JavaScript 不只能處理介面互動的部分，甚至利用 JavaScript 就能執行整個前端產品的開發。
JavaScript 演變至今也已經從前端領域跨足到網站後端領域，現在透過 Node.js 你甚至可以進行後端 Server 的商業邏輯開發，從這一點也可以看出 JavaScript 在網站開發裡的重要性。所以不管你是前端還是後端工程師，最好都花點時間來看看這個正在改變世界的語言。
這邊推薦一堂基本的入門課程給各位初學者（文章推薦的課程）：
書籍的話則可以參考本人的作品《 JavaScript 前端概念三明治》，在書中我會大量運用圖片搭配文字解說來幫助你了解 JavaScript 裡面比較抽象的運作原理，讓你在學習過程中比較不那麼害怕。
4. React.js
就像前面提到的，JavaScript 經過這幾年的發展，已經有很大的進步，現在你不需要撰寫單純的 HTML / CSS ，透過 React.js 這樣的 JavaScript 框架，你也能處理好網頁裡面畫面版型、頁面切換的部分（基本上就是網站所有大小事），這也是為什麼在現在講到要找前端工作的話，學習一個像 React 這樣的框架都是必須的 。
2022 年要學 React 框架的話，推薦這一堂課給初學者們，在這堂課裡面你會學習到 React 的最新功能 – Hooks：
當然前端框架除了 React ，也還有 Vue 跟 Angular 等等強大的框架 ，但是我（作者）還是會推薦使用 React，畢竟使用它的公司還是比較多。
5. Responsive Web Design (RWD)
RWD 的中文翻譯是「自適應網頁設計」，它是一種態度概念，基本上就是在實作網頁時要在同一時間考慮到各個裝置寬度（電腦、平板、手機）的排版。
這是一個雖然不太起眼但是很重要的網頁開發觀念，畢竟網頁和手機 APP 不同，具有跨平台和裝置的特性，所以 RWD 在網頁開發者中幾乎是個一定要學習的技巧。就算很多時候我們使用的工具都會幫我們處理這個部分，知道背後的運作原理還是非常重要的。
2022 年想學 RWD 技巧的話推薦這堂課給你參考：
6. NPM (Node Package Manager)
前面看過前端開發相關的語言和技術了，現在我們來看看前端的基本工具—— NPM。NPM 中文翻作「Node 套件管理工具」，它其實不是技術，而是一個工具，但是是一個前端開發時最常聽到也最常使用的工具，NPM 用來把網路上別人開發好的函式庫裝到你自己正在開發的專案裡面，讓你可以不用一直重複造輪子，可以走在巨人的肩膀上，在開發時就能直接使用許多方便的功能。
NPM 必須透過指令介面工具（ Command Line Tool) 才能夠被使用，而且 不只在開發前端時會用到，在使用 Node.js 開發後端功能時也常常的，所以想要學習 NP Ｍ 的使用方式，可以看一些簡單的 Node.js 課程。
這邊推薦這一堂課程給你：
7. VSCode
講到軟體開發的時候， IDE （ integrated development environment, 整合開發環境）是其中一個最重要的工具》。長久以來在網頁開發的領域裡面沒有一個堪被稱為 IDE 的工具，但是由微軟開發的 CSCode 這個產品則改變了這一切，如今 VScode 的竄紅已經不是新聞，如果你常常參加開發者的社群，不難發現 VSCode 是前端工程師們最常使用的一個 IDE 或編輯器。
IDE 之所以這麼方便就是因為他有很多好用的套件來讓你的開發體驗更為流暢、幫助你減少更多讓注意力分散的機會，像是程式碼高亮、程式碼區塊選擇、拼字檢查等等插件。
如果你想要成為一個有效率的網頁開發者，非常推薦你學 VSCode ，可以去看看有哪些快捷鍵、哪些方便的套件可以使用，這邊推薦一堂課程給你：
8. Chrome Developer Tools
Developer Tool 中文稱為「瀏覽器開發者工具」，是另外一個在做前端開發時常用的除錯工具。現在約有超過 70% 的使用者是使用 Ｃ hrome 來瀏覽網站，不過有很多網頁開發的初學者並不知道 Chrome 上其實有這個開發者工具（在網頁上點擊右鍵 > 檢查，就可以打開）。
透過開發者工具不只可以讓你看到 HTML 、 CSS 和 JavaScript 的原始碼，甚至也能透過改變 HTML、CSS 的數值來即時地看到想要嘗試的改變。這個工具強烈的好好學習，因為上面除了基本功能，也有很多更深入更仔細的的瀏覽器相關工具，這邊也推薦一堂課程給你：
9. Postman
又是一個一定要知道的前端開發工具 —— Postman。因為現在網頁開發中總是依靠 API 來拉取所需要的資料，所以你會需要像是 Postman 的 API 測試工具，你可以用 Postman 來送出一個 HTTP 請求、測試登入功能，或是藉此來觀察 API Server 回傳的資料細節，而且不管是哪一個網站的 API ，你都可以用 Postman 來做測試。
Postman 目前有提供 Chrome 套件和桌面版本，你都可以安裝來自己試試看，如果需要課程的話可以參考：
10. GraphQL
如同上面提到的，在網頁產品開發中有很大一部分是依靠 API 來傳送或拉取資料。因此在某些公司中，比較資深的前端工程師不只要負責串接 API，甚至也負責了後端 API 的邏輯開發。
不論是哪一種情境，你都會知道怎麼跟 API 來做互動，最常見的 Restful API 雖然可以同時滿足開發和使用的需求，但是這個方式對於網站來說還是會有一些小小的缺點，例如在同一個頁面可能因為邏輯的關係，就需要拉取很多隻 API ，或是因此拉到了某些其實不太需要的資料。
GraphQL 的出現就是為了解決這個問題，它也已經準備好要推動後端 API 開發的下一個層次，如果你想要走在最前面，會建議你學習這個技術。
這邊推薦課程給你：
GraphQL with React Course: The Complete Developers Guide | Udemy
（Mujing 註：前面幾個提及的工具或技術可能真的是比較常見、到每間公司幾乎都有可能會使用的，但是以我自己的經驗來講，目前來說在台灣 GraphQL 並不是到處都會使用，所以讀者可以自行斟酌要不要學習）
結語
以上就是 2022 年想要成為開發者所需要的基本技術和工具介紹。雖然你很有可能已經知道前端的三大基本元素：HTML、CSS、 JavaScript，但是他們仍然在不斷地進化和發展中，如 CSS 裡的 Grid 和 Flex 的出現、 JavaScript 則有像是 ES6 的改版和 WebAssembly 的效能解決方案等等。
儘管這篇文章的作者已經盡可能的列出最重要最基礎的相關知識，身為一個網頁開發者，還是有很多必須要學習的，像是 HTTP、 SSL 憑證等等（比較深入的知識）。
不過就慢慢來吧，階段性有所目標的成長比較不會讓自己筋疲力盡！那先寫到這囉，下次有看到值得分享的東西再來寫給大家！