現代網站解決方案
🤔 How to
成為軟體工程師 7 步驟

成為軟體工程師的 7 個步驟

如果說學習前端需要什麼工作技能，這個可以搜尋「frontend roadmap」，會有很多人整理出來的學習路線圖，這邊我們就不再贅述， 比較推薦的是這個網站：https://roadmap.sh/frontend (opens in a new tab)，裡面有很多學習資源，可以依照自己的需求來學習。

如同在分享中提到的，想成為廚師，不僅僅會把食材煮熟，還要會切菜、調味、裝盤，甚至是擺盤，這些都是廚師的工作，而不是只會煮食材就可以了。

同理，我們如果先成為現代化有產力的軟體工程師，也需要學習很多工作技能，而不是只會寫程式就可以了。

1. 認識開發環境

一般上，軟體開發者都會使用一個編輯器，來寫程式碼，像是 vscode、sublime、atom、vim、emacs 等等，這些編輯器都有自己的特色，像是 vim 和 emacs 都是使用鍵盤來操作，而 vscode、sublime、atom 都是使用滑鼠來操作，所以我們可以依照自己的喜好來選擇編輯器。

image

vscode 根據pypl (opens in a new tab)的數據統計，是最受歡迎的 IDE，所以我們就以 vscode 為例，來認識開發環境。

這個編輯器免費且開源，可以在這裡 (opens in a new tab)下載，安裝後，可以在左邊的側邊欄看到一些功能，像是檔案總管、搜尋、Git 版本控制、除錯、擴充功能等等。 且有非常多的擴充功能可以使用，像是可以安裝 Python、JavaScript、HTML、CSS、Markdown 等等的擴充功能，讓我們可以在 vscode 中開發這些語言。

學習 vscode

以下是 vscode 的學習資源：

  1. vscode 官方 youtube 頻道：vscode day 2023 (opens in a new tab)

  2. 100 秒了解 vscode：youtube (opens in a new tab)

  3. 各種不同的 theme 和 icon：vscode themes (opens in a new tab)

    image

依據你的個人喜好，設定好 vscode 的 theme 和 icon，可以讓你在開發時，更加舒適。

安裝擴充功能

image

當我們下載和安裝完畢之後，我們可以在左邊的側邊欄找到擴充功能，點擊後，可以搜尋我們想要的擴充功能，以下是一些常用的擴充功能：

  1. Live Server (opens in a new tab): 可以在本地端開啟一個伺服器，並且可以即時更新網頁。
  2. Prettier (opens in a new tab): 可以幫我們自動排版程式碼。
  3. Bracket Pair Colorizer (opens in a new tab): 可以幫我們將括號用不同的顏色標示，方便我們閱讀。
  4. Auto Rename Tag (opens in a new tab): 可以幫我們自動修改 HTML 標籤名稱。
  5. Auto Close Tag (opens in a new tab): 可以幫我們自動關閉 HTML 標籤。
  6. ESLint (opens in a new tab): 可以幫我們檢查 JavaScript 的語法錯誤。
  7. GitLens (opens in a new tab): 可以幫我們更方便的使用 Git 版本控制。
  8. Code Spell Checker (opens in a new tab) : 可以幫我們檢查英文拼字錯誤。
  9. Path Intellisense (opens in a new tab): 可以幫我們自動補齊路徑。
  10. Import Cost (opens in a new tab) 可以幫我們檢查引入套件的大小。

Homebrew

Homebrew 是一個套件管理工具，可以在這裡 (opens in a new tab)下載，或者直接複雜以下指令：

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

測試一下是否安裝成功：

brew --version

iTerm2

iTerm2 是一個終端機工具，可以取代 macOS 的終端機，有更多的功能 可以在這裡 (opens in a new tab)下載，如果你使用 Homebrew，可以直接複製以下指令：

brew install --cask iterm2

安裝好 iTerm2 之後，在安裝自己的喜歡的 theme 和 icon，可以參考這裡 (opens in a new tab)。

nerd font

如果安裝好之後，或許你會出現一些亂碼，那就是可能你沒有安裝字體，可以參考這裡 (opens in a new tab)。

Oh My Zsh

Oh My Zsh 是一個終端機的框架，可以讓我們更方便的使用終端機，可以在這裡 (opens in a new tab)下載，或者直接複製以下指令：

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

NVM

NVM 是一個 Node.js 的版本管理工具，之從 node js 發布以來，就有很多版本，而且每個版本都有 LTS 和 Current，所以我們可以使用 NVM 來管理我們的 Node.js 版本控制。

可以快速的切換 Node.js 的版本。

安裝 NVM，可以複製以下指令：

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

驗證是否安裝成功：

nvm --version

使用 NVM 安裝 Node.js：

nvm install node

安裝指定版本的 Node.js：

nvm install 14.17.0

使用指定版本的 Node.js：

nvm use 14.17.0

更多的詳情和指令，可以參考這裡 (opens in a new tab)

忽略以上步驟

我知道，如果你初來乍到，或者是剛開始學習程式，這些工具和指令可能會讓你覺得很困惑，甚至不知道要怎麼使用，但是我們可以慢慢的學習，不要一次學太多，可以先從編輯器開始，然後再學習一些擴充功能，再來學習終端機，最後再學習 NVM，這樣就可以慢慢的學習，不要一次學太多。

事實上，你只需要有一個編輯器，就可以直接進入第二步

2. 學習程式語言

在這個步驟呢，就是大部分人會開始學習的時候，市面上那麼多的程式語言，我們該如何選擇呢？

前端工程師必備的語言有：

  1. JavaScript: 這是一個非常熱門的語言，可以在瀏覽器中執行，也可以在伺服器端執行，甚至是在手機上執行，而且有非常多的框架和套件可以使用，像是 React、Vue、Angular、Express、Next.js、Nuxt.js、Electron 等等，所以學習 JavaScript 是一個不錯的選擇。
  2. HTML: HTML 是一個標記語言，可以用來描述網頁的結構。
  3. CSS: CSS 是一個樣式語言，可以用來描述網頁的樣式。
  4. TypeScript: TypeScript 是 JavaScript 的超集合，可以在 JavaScript 的基礎上，加上型別系統，讓我們在開發時，更加的安全。

其他工作上會用到的語言：

  1. JSON: JSON 是一個資料格式，可以用來儲存資料。
  2. YAML: YAML 是一個資料格式，可以用來儲存資料。
  3. SQL: SQL 是一個資料庫語言，可以用來操作資料庫。
  4. Markdown: Markdown 是一個輕量級的標記語言，可以用來撰寫文件，像是 README.md、blog.md 等等。

嬰兒期

一開始不建議就直接買課程無腦學習，相信我，絕大部分軟體工程師，自學能力都是必備的，但是我也不是說課程就是不好，是因為漫無目的的學習對你的學習效率不會有太大的幫助，所以我們可以先從網路上找一些免費的資源，來學習程式語言，大家可以先從免費的資源開始，如果覺得效益不佳，再換一個資源，直到找到適合自己的資源。

以下是一些免費的資源：

  1. 必讀 EN CS 50: 影片 (opens in a new tab)
  2. EN HTML & CSS 新手到專家：影片 (opens in a new tab)
  3. EN JavaScript 新手到專家：影片 (opens in a new tab)
  4. 快速上手 HTML & CSS：影片 (opens in a new tab)

少年期

當你學習到一定程度，就可以開始買課程來學習，這樣可以讓你的學習更加的有系統，而且可以學習到更多的知識，以下是一些課程，也是免費的。

  1. 推 EN egghead 免費課程: 影片 (opens in a new tab)
  2. EN scrimba 免費課程: 影片 (opens in a new tab)

3. 學習 Git 版本控制 和工具

Git 是工程師必備的工具，可以幫我們管理程式碼，並且可以和其他人一起協作，所以我們必須學習 Git 版本控制，而以下是一些學習資源：

學習 Git

  1. 推 EN egghead 免費課程: 影片 (opens in a new tab)
  2. 推 EN Git 快速上手 Fireship版 影片 (opens in a new tab)
  3. EN Git and GitHub for Beginners: 影片 (opens in a new tab)
  4. EN Git and GitHub Crash Course: 影片 (opens in a new tab)

預處理器

預處理器是一個工具，可以幫我們在開發時，更加的方便，以下是一些常用的預處理器：

HTML

  1. Pug: 官網 (opens in a new tab)
  2. Haml: 官網 (opens in a new tab):
  3. Nunjucks: 官網 (opens in a new tab)
  4. EJS: 官網 (opens in a new tab)
  5. liquid: 官網 (opens in a new tab)
  6. Handlebars: 官網 (opens in a new tab)
  7. Twig: 官網 (opens in a new tab)
  8. Mustache: 官網 (opens in a new tab)

CSS

  1. Sass: 官網 (opens in a new tab)
  2. Less: 官網 (opens in a new tab)
  3. Stylus: 官網 (opens in a new tab)

JavaScript

  1. TypeScript: 官網 (opens in a new tab)
  2. Babel: 官網 (opens in a new tab)
  3. 選擇 coffeescript: 官網 (opens in a new tab)
  4. 選擇 Elm: 官網 (opens in a new tab)
  5. 選擇 ClojureScript: 官網 (opens in a new tab)

JavaScript module bundlers

JavaScript module bundlers 是一個工具的總稱，主要作用可以幫我們將 JavaScript 的模組打包。

為什麼我們需要知道或使用它？主要有幾個原因：

  1. 支援語法：有些瀏覽器不支援 ES6 的模組系統，所以我們需要使用 JavaScript module bundlers 來幫我們打包。
  2. 壓縮：可以幫我們壓縮 JavaScript 的檔案，讓我們的網頁載入更快。
  3. 懶加載：可以幫我們將 JavaScript 的檔案分割成多個檔案，讓我們的網頁載入更快。
  4. 靜態分析：可以幫我們可以更加的了解我們的程式碼，比例如何使用了哪些套件，哪些套件沒有使用。
  5. 刪除沒有使用的程式碼：可以幫我們刪除沒有使用的程式碼
  6. 開發時的熱更新：可以幫我們在開發時，更加的方便，不用每次都重新整理網頁。

以下是一些熱門的 bundlers：

  1. 推 webpack: 官網 (opens in a new tab)
  2. 推 rollup: 官網 (opens in a new tab)
  3. 選擇 parcel: 官網 (opens in a new tab)
  4. 選擇 esbuild: 官網 (opens in a new tab)

4. 學習框架和用套件執行專案

非必要性

或許這跟一些軟體工程師的經驗有些不同，但是我認為，學習框架和套件，是非必要的，因為框架和套件都是為了解決問題而生的，所以我們可以先學習問題，再學習解決問題的方法。

也有一些軟體工程師主張一切自主，大部分情況下，他們都相信自己的技術，所以他們不會使用框架和套件。

這兩者都是可以的，但如果你的學習目的是為了找工作，那麼學習框架和套件是必要的，因為現在的公司，大部分都是使用框架和套件來開發，所以我們必須學習框架和套件，才能找到工作。

framework & library

框架可以想像成工程師的工具箱，裡面有很多工具，可以幫我們解決問題，這些工具都是由多位工程師協作開發，或者經過來回多次的修正 和集思廣益下的最佳實踐，就算最後你覺得不採用使用任何框架，但你也可以從學習框架的過程中，參考到很多的實踐方法，這些實踐方法，可以幫助你更加的了解如何開發軟體。

以下是一些熱門的框架和套件：

  1. 推 React: 官網 (opens in a new tab)
  2. 推 Vue: 官網 (opens in a new tab)
  3. 推 Next.js: 官網 (opens in a new tab)
  4. Angular: 官網 (opens in a new tab)
  5. jquery: 官網 (opens in a new tab)
  6. ruby on rails: 官網 (opens in a new tab)
  7. laravel: 官網 (opens in a new tab)
  8. Django: 官網 (opens in a new tab)
  9. spring: 官網 (opens in a new tab)

建議挑一個先學習，精通之後，再學習其他的框架，而且大部分框架的概念都是相同的，所以學習其他框架會更加的容易，在選擇這些框架的同時，你也會發現，這些工具 都好像跟著某種固定的模式來設計，這就是軟體工程師的設計模式，所以我們也可以學習這些設計模式，來幫助我們開發軟體，以下是一些設計模式：

關於這類型的設計模式，可以參考這裡 (opens in a new tab)

5. 專精於某個領域和分享

我不認為工作時間長，就能算是資深，反而是對於某種領域有深入的了解，才能算是資深，所以我們可以專精於某個領域，像是前端工程師可以專精於 React、Vue、Next.js、Nuxt.js、Electron 等等，這樣才能在工作上有更好的表現。

而專精，又是怎麼表現呢？是否能隨時背誦各種 API，或者是能夠解決各種問題，這些都是可以的，但是我認為，專精的表現，是能夠在某個領域，能夠解決各種問題，並且能夠分享給其他人，這樣才能算是專精。

能將知識內化，並且能夠分享給其他人，在某種程度上，也是強迫自己整理和梳理知識，這樣才能更加的了解知識，將它應用在各種現實問題中。

嘗試用不同方式解決同一個問題

當我們學習到一定程度，就可以開始嘗試用不同的方式來解決問題，這樣可以讓我們更加的了解問題，並且可以學習到更多的知識，和他們彼此的差異。

嘗試找出更好的方法

對於工程師的工作開放性思考，是非常重要的，我們確實很多時候，可以用最簡單的方式來解決問題。但是當問題越來越多，越來越複雜，我們就必須要找出更好的方法，千萬不能故步自封

分享

習慣的將知識轉化成筆記，也是非常重要的，甚至可以將這些筆記公開和分享，也可以促進自己的學習，也可以幫助到其他人。

6. 回報和實戰

軟體工程師的薪資平均在台灣約 50 萬 台幣起，低於 50 萬台幣的建議可以多看看。

而軟體工程師的薪水天花板到哪裡呢？這個目前我找不到公開數據，但就以我個人的經驗來說，軟體工程師的薪水天花板，是沒有上限的，只要你有能力，就可以拿到很高的薪水，大部分我認識的軟體工程師，薪水都在 100 萬台幣以上。

資深的軟體工程師，可以在 200 萬台幣以上，外商可以 300 萬台幣以上，這些都是有可能的。

實戰

盡可能的參與多種專案執行和建置，是最快累積經驗的方式，而且可以學習到很多的知識，像是如何與其他人協作、如何解決問題、如何設計系統等等，這些都是非常重要的。

一開始可以不需要太在意薪水，但是要確保自己的薪水不要太低，可以參考這裡 (opens in a new tab)。

7. 持續學習

你都能有耐心看到這邊了，那麼恭喜你，你的意志力很適合成為軟體工程師。

官網介面📚 Terms