新手轉職要知道的網頁開發小知識

隨著資訊科技的進步，帶起一股學習程式的風潮，寫程式不再是男性專屬，而是不分男女老幼、不分行業都能學習的技能，特別是現在許多產業的趨勢，希望可以找到跨領域人才，可以結合程式與專業知識的應用提升企業營收！你身邊是否也有越來越多朋友加入寫程式的行列呢？

剛接觸程式領域的人，因為網站開發的技術有不同領域，你可能會被前端工程師、後端工程師以及全端工程師這些常見的工程師職位弄的一頭霧水，而這些工程師彼此的工作內容有哪些差異？這篇文章將帶你認識網頁開發領域常見的程式語言及工作內容的不同。

網頁程式語言百百種，到底有什麼差別？

由於程式語言有非常多種可以選擇，各有不同用途及特色，我們需要先了解「應用領域」所使用的程式語言，再依照自身的興趣選擇並學習，不論最後你是選擇哪種程式語言入門，都需要認識網頁基礎的架構與概念。

想要踏入工程師領域，不得不提到前端、後端程式語言的差別，它們所做的內容和效果都各不相同，在網頁開發上都扮演著重要的角色，就讓我們來了解這兩者的差別吧！

前端 (Front-End) 是什麼？

回想一下你以前瀏覽網頁的經驗，當打開一個網站後，你所看到炫炮的動態效果，又或是在瀏覽網站時，點擊按鈕會出現的提示訊息等效果，這些都是屬於前端的範疇。

前端的工作是製作瀏覽網站時所看到的畫面，包括看到的網站背景、顏色、字形和圖片等等，任何在網站所看到的視覺內容，皆屬於前端語言所寫出來的效果，前端設計需要兼顧美感與實用。 如下圖：

前端工程師還要能夠使用後端所提供的應用程式開發介面 (Application Programming Interface, API) 和前端程式進行串接，讓使用者在瀏覽器操作時，可以將資料傳送到後端伺服器，在後端伺服器進行運算後取得運算結果。

常見前端語言有哪些？

說到前端，最常見的就是由「前端設計三元素」 HTML、CSS、JavaScript 三種技術所構成。

如果你想要自己動手寫出一個簡單的網站介面，需要先學會 HTML，再來是學著用 CSS 來讓網站看起來更美觀，如果要在你的網站中加上動態的效果，就會需要用到 JavaScript。

我們就來了解 HTML、CSS、JavaScript 的主要功能：

1. HTML (HyperText Markup Language)

是一種用來建構網頁的「標記語言」而非程式語言，是用來描述網站的架構及資訊。如果將網頁譬擬為一個人，那麼 HTML 就如同人的骨架，透過這個骨架可以達成很多事：像是呈現網頁、瀏覽器的網站資訊等等。

2. CSS (Cascading Style Sheets)

是一種「樣式表 (StyleSheet)」用來控制網站顯示的樣式。如果 HTML 是骨架的話，那麼 CSS 就像是衣服，透過 CSS 可以設定網頁的字體大小、字型、顏色、框線、陰影、背景甚至是做一點小動畫！除了這些效果外，CSS 最主要還能製作成 RWD (Responsive Web Design) 響應式網頁，使頁面不管是在任何尺寸下都有適合的瀏覽樣式。

如果想你認識前端跟我們生活的關聯，可以閱讀『認識網頁開發從生活開始』。

3. JavaScript

是寫網頁需要的第一個（目前可能也是唯一）的程式語言，主要是輔助 HTML 實現網頁功能，增加網頁的互動式效果。JavaScript 就像是神經元素，有了 HTML 的身體骨架、CSS 的衣服美化，我們能透過 JavaScript 讓骨架移動、改變樣式、獲取資料等。JavaScript 還有個優點，可以在 Mac、Window、iOS、Android 等「跨平台」裝置上運行，目前主流瀏覽器皆支援 JavaScript。

開始學習 JavaScript 程式語言時，常見的實作教學會搭配函式庫 jQuery 或框架（例如 React.js 或 Vue.js）學習，可以開讓網站開發事半功倍！

後端 (Back-End) 是什麼？

後端主要著重在功能與資料儲存。後端服務不僅可以被前端調用，還可以被 APP 或其他後端服務調用，像是：使用者留言、買東西下訂單、加入會員等資料，都會透過後端的程式存放到網站的資料庫內，裡頭會分門別類儲存資料，當有需求時，會再透過後端程式，將這些資料送往前端的畫面中，來完成前端使用者的需求回應。這些就是屬於後端的範疇。

後端工程師則是著重在使用程式語言撰寫網站，在後端伺服器上運作的商業邏輯、資料庫處理和提供 API 給前端開發人員。在後端開發中，開發人員不必擔心它看起來如何，只需要關心它如何工作，和資料庫進行交互以處理相應的業務邏輯，以及確保功能的實現，平台的穩定性及性能，並且在底層設計上符合要求。

常見後端語言有哪些

對於後端是如何執行工作，你已有初步的了解了，那麼，現在業界常用的後端程式語言有哪些呢？ 每個程式語言都有各自的擁護者，甚至也有知名網站自行開發程式語言使用，如果你要入手第一個程式語言的話，需要衡量整體的需求，才能準確選擇適合自己的工具！ 以下整理比較常被提及的程式語言、該語言的特色，以及哪個網站是透過該語言所開發的：

1. Go：效能高，速度快。

Google 所開發的 Go 語言近年來大受歡迎，Go 語言主要用於開發後端網頁，語法簡潔，不僅能到達靜態語言的安全和效能，也能達到動態語言開發維護的高效率，並且可以直接指定編譯成各種平台版本。 網站範例：Google、Youtube

2. Node.js：效率快，前後端可以一起使用。

統一前後端的語言，將程式碼標準化，實現全端開發。對於懂 JavaScript 語法的工程師，在學習 Node.js 上比較容易上手。可以跨平台在 Windows、OSX 和 Linux 上運作。擁有上千個套件的套件管理系統 - npm ，容易在系統中找到需要的功能，不需要再重頭寫，提升了工程師開發的速度。

網站範例：Trivago

2. PHP：適合新手、語法簡潔、市場接受度高。

目前是使用者最多的後端程式語言，是一種直譯式語言，不需經過編譯，可以直接執行。連結資料庫方便，設定也簡單。適合新手的程式語言，語法簡潔不複雜，適合於短時間內建置出簡單的網站。支援眾多伺服器，市場接受度高，工作機會也不少。

網站範例：Tesla、Slack

3. Python：適合新手、結構簡單、跨平台支援。

程式語法定義明確清晰，程式碼講求簡潔，加速了寫程式的速度，因此非常適合新手入門。同時可運用在多種平台上，多用於數據分析與資料探勘相關的程式編寫。

網站範例：Udemy、Uber

4. Ruby：新手友善、高效率、開發快速，

為近年來非常受歡迎的程式語言，語法像英文，寫出來的程式碼可閱讀性也相當高。最有名的是其開發出來的框架 — Ruby on Rails（也稱做 Rails），大大縮短工程師開發的時間。Ruby 靈活性相當高，在面對複雜強大的創新環境時，也能用自然的語法完成任務，且不排斥與其他程式語言或跨平台工具的相容，節省許多大量開發的精力。

網站範例：Airbnb、Github、Shopify

全端 (Full-stack) 是什麼？

顧名思義就是綜合前端工程師與後端工程師的角色，必須兼具網站的的多項知識，包含伺服器維運、資料庫維護、版面調整、使用者體驗、系統設計、專案管理、需求溝通等等基礎的認知與實務經驗，也因為兼具前後端網站開發的能力，全端工程師常常會是在公司內支援各部門的重要角色呢！

在團隊合作的基礎下，能熟悉彼此相關的技術可以省下更多溝通成本，才進而發展出了「全端」的角色。

那麼多程式語言可以選擇，對跨領域轉職的人來說，應該要從哪個語言下手比較好？

如果你已經有特定的目標，也清楚知道自已將來想要跨入的領域，那就朝著訂定的目標前進，有明確動機的學習者並不會有選擇程式困難的問題。

如果是初次想學程式，但又不確定自己的興趣領域，且不知道要如何選擇的情形下，可以參考 Ruby 圈的前輩高見龍老師的文章『「自學程式現場」新手應該要學什麼程式語言？』

高見龍老師有二十年的程式開發經驗，十多年的程式授課經歷，並經常受邀至各大專院校演講與國內各大企業開課，高老師表示「哪一種程式語言不重要，重要的是找到讓你學會第一個程式語言的方法」。

程式語言的邏輯基礎是相通的，當學會了一種程式語言，再轉換為另一個程式語言會輕鬆許多，但前提是，你需要找到一個自己喜歡且可以持續很久的學習方式，以及「適合自己的教材」來入門你的第一個程式語言。

新手轉職成網站工程師比你想像中的還容易

對於技術有一定的理解基礎後，再來選定一個目標前進，只要維持著正確的心態學習，轉職成網站工程師不再只是本科系才做得到的事情。

如果你對職涯還有些疑惑，都歡迎聯繫我們，預約免費職涯諮詢，讓 ASTRO Camp 為你打開全新的職涯大門！

---

👩‍🏫 課務小幫手：

✨ 想要再自我精進技能嗎？ 五倍學院開設眾多實體課程與線上課程
✨ 想要三個月轉職網站工程師嗎？ 五倍學院有 ASTRO Camp 全端工程師實戰訓練營