JavaScript 全端網頁工程師的系統化養成》#1 程式設計入門學習的有效策略

學會如何打造軟體應用程式、創造價值、解決問題，進而提升人類的生活品質。適合零基礎入門者的有效策略，透過系統化的步驟，自學成為業界水準全端工程師。

from : Alpha Camp [全端 Web App 開發] 學習地圖 — 2020

只要 Google 搜尋「程式入門」、「自學網頁設計」、「轉職工程師」、「網路軟體開發學習」等關鍵字，不難找到許多內容豐富、條理清晰的資訊。再進一步循線搜尋「前端 後端 全端」、「 HTML/CSS/Javascript」，你可能會找到更多免費或付費的學習資源。

但網路應用程式開發是個龐大且不斷擴充的知識／技能體系。為避免不小心就鑽進死胡同，若能在「探索和體驗」的過程中「縱觀全局」同時「練就入門技能」，不僅一舉數得且能協助自己做出下一步的決策。

依據以上考量，加上對於「幫助人們發展有意義、有價值的職涯」這項使命的共鳴，我選擇 Alpha Camp （簡稱 AC）作為我開發者旅途的學習夥伴。

AC 提供從零基礎到專業工程師的「完整學習方案」，不只是寫程式、架網站，而是幫助我們去理解商業邏輯，透過應用程式（軟體）解決企業與客戶的問題。在實作中培養完整的開發者專業加上思維，並教導如何發掘使用者需求，才足以貼近業界實踐。

這篇文章摘錄我完成第一學期的學習體驗，及現階段所認知成為一位 JavaScript 全端工程師入門的有效策略。在接下來幾個月內，我會按學習歷程，分享系統化養成的重點。

目錄

1⃣️ 縱觀全局的系統化學習流程
— I. 跟電腦做朋友
— II. 解決問題有撇步
— III. 打造溝通的介面：網站設計

2⃣️ 成果導向的學習體驗：社群、文化與教練
— I. 互助競合的同儕
— II. 刻意練習的文化
— III. 技術面與學習上的教練

3⃣️ 自我管理與修煉
— I. 確立目的：知道為何而戰
— II. 認識學習風格：成為高效能學習者
—III. Get Things Done：成為高效能工作者

1⃣️ 縱觀全局的系統化學習流程

I. 跟電腦做朋友

李老師告訴小朋友：「以前我的數學也常常不及格，但是我越討厭數學，我就越不會。後來我花了很多時間，逼自己去瞭解它、接近它，跟它做朋友。把它的底摸得清清楚楚，就把它打敗了。所以呢，不管是英文也好，數學也好，你們不要因為考得不好，就討厭它、避開它，感覺上好像自己被它們打敗了，其實它們都沒有打敗你，是你自己打敗了你自己。」
—— 電影《小孩不笨》

同樣，要學好軟體開發，也要跟電腦做朋友。那究竟什麼是軟體？它跟電腦的關係又是什麼？

「人類為了外包大腦的部分工作，發明程式；而程式就是一系列運行在電腦上的指令，目的是產生能解決問題的軟體。」

STEP 1 認識語言：先練習撰寫一支簡易小程式

就像學習第二外語，若不實際練習對話，很難真正學會。程式語言也是在練習撰寫的過程中逐步學會的。如果只是卯起來背單字，是無法學會對話的。

好！那我們就來 寫程式 吧！

首先，要理解電腦執行程式的基本流程：

from: WHAT MAKES COMPUTER A COMPUTER

程式碼的指令，會經由「輸入（input）➡️ 儲存（storage）／處理（processing）➡️ 輸出（output）」的流程，完成人類需要的結果。

再來，逐一掌握可用的元素：

接著，應用在生活中，嘗試解決一些簡單的問題！

例如：打造一台購物計算機，練習將數學邏輯轉換成程式邏輯。

STEP 2 理解邏輯：用程式邏輯讓電腦代勞判斷和簡單的自動化

• 練習用「If-else」判斷分歧狀況

if ( 執行條件1 ) {
  執行程序1
}
else if ( 條件2 ) {
  執行程序2
}
else {
  執行程序3
}

• 練習用「迴圈」重複執行程式碼

// while 迴圈：通常是知道目的地（執行結果）時使用，預期求出過程
while (執行條件) {
  執行程序
  迭代變化
}
// for 迴圈：通常是知道執行次數時使用
for (宣告; 執行條件; 迭代變化) {
  執行程序
}
// 在迴圈內加入 break 跳脫迴圈
if (跳脫條件) {
  break
}

• 嘗試打造重複執行的小遊戲：擲骰子十局積分賽

STEP 3 練習溝通：打造軟體要靠你和電腦以及團隊間的協作

• 讀懂電腦的訊息幫助你 Debug

1. 閱讀錯誤訊息
   - 變數未定義 ... is not defined
   - 符號錯誤 Invalid or unexpected token（ex. ‘hello” 或 “全型引號“）
   - 指令錯誤 ... is not a function（ex. console()）
   - 未定義屬性 Cannot read property'...' of undefined（在未賦值的變數下定義子變數）
   - 無窮迴圈
2. 評估錯誤原因
3. 找出可能有錯的段落
4. 檢查
   - 忘記宣告？
   - 使用 console.log() 或 typeof

• Coding style & // 註解 協助你與團隊協作

coding style 是一種「風格」，目的是讓別人更有效率地閱讀你的程式碼。提高「程式碼的可讀性 （Code Readability）」，可以協助團隊順利進行打造軟體的任務。

from: Redbubble

注意縮排、換行、與空白鍵，詳細可參考 JavaScript Standard Style Guide。

II. 解決問題有撇步

人類善於使用「直覺思考」來解決問題，因為我們腦中已具備許多基本認知；然而在我們撰寫程式時，電腦並不具備這些「初始設定」。在面對簡單問題時，也許我們給予電腦少數步驟的指令就能解決問題；但處理較複雜的問題時，若我們不習慣將問題拆解為具體步驟，即使我們學會了各種語法，還是可能有卡關的情況。而運算思維（computational thinking）就是一種思考模式，將人類的「直覺思考」拆解為電腦能懂的步驟。

STEP 4 運算思維：一種解決問題的思考框架

運算思維是包含在擬定問題並表述解決方法，且以電腦 ——無論人體或機器都能有效掌握的方式中的思考進程。
—— Jeannette Wing，微軟研究院全球副總裁

Google 將運算思維拆解為四大步驟：

• 拆解問題 Decomposition：將複雜的問題拆解成較易解決的小問題
• 辨識模式 Pattern Recognition：盤點問題是否存在規律或趨勢
• 歸納提煉 Abstraction：找出產生規律的公式
• 演算法 Algorithm：發展成逐步執行的步驟來解決問題

STEP 5 演算法：將直覺思考轉化為執行步驟

在數學與電腦科學領域中，演算法是一組有限的指令，這組指令已經被充分定義，可以在電腦上實作，通常用於解決問題或執行運算。
— — Wikipedia, Algorithm

from: Facebook

簡單來說，演算法可以比喻為食譜：當相同食材（輸入值），經過同樣食譜（演算法）烹調時，會得到預期中的餐點（輸出結果）。而實務上，演算法通常透過虛擬碼及流程圖來表示：

III. 打造溝通的介面：網站設計

介面 （interface）：指的是人與機器之間的溝通媒介。而網路應用程式的介面，就是瀏覽器所顯示的畫面，我們稱使用者介面（user interface）。

STEP 6 產品思維：從問題到解方、從需求到產品

寫程式的目的是為了開發軟體，而軟體為人們的生活帶來價值。

在軟體開發的生產線裡，工程師除了負責「開發」，也就是把「點子」變成可用的軟體，也需要參與評估可行性的任務，包含協助測試、修改、迭代，將點子變成具體的產品。其中會牽涉的設計工具，包括：

• 使用者人物誌 Persona：根據使用族群的行為以及喜好所虛構出的角色，呈現出動機、偏好、行為和習慣。
• 使用者故事 User story：在敏捷開發 (agile) 中，是所有溝通人的媒介，用以表達核心功能

As a < type of user >, I want < some goal > so that < some reason >.

• 線框稿 Wireframe：用非常簡單的灰階顏色、線條、符號或框線，來表達網頁排版架構（UI/UX）的頁面草稿。
• 使用者流程圖 User flow：構思使用者在網站上完成目標所需的步驟。

STEP 7 善用工具：引進第三方服務讓開發更便利

• Dev tool：是一套內置於 Google Chrome 中的 Web 開發和測試工具，可用來對網站進行迭代、測試和分析。
• font Awesome：為提供圖示 (icon)的第三方服務 ，使用說明可以參考這篇 《5 分鐘快速了解 FontAwesome 5》。
• Google font：為 Google 提供的第三方字體 (font-family) 資源服務，使用說明可以參考這篇 《如何引用 google 雲端字體到網頁設計中》。
• Random User Generator：為提供虛擬人物資訊及頭像的第三方服務。
• lorem ipsum／亂數假文產生器 Chinese Lorem Ipsum：在「沒有文案但又要做排版」的時候，開發者會使用的假內容產生器。

STEP 8 切版實戰：使用 HTML + CSS 打造靜態網頁

• 取得設計稿：可以 Google 自己喜歡的網頁或設計文件，我喜歡參考 BFA的簡報素材 中「無止盡設計靈感」的區塊。
• 分析網頁結構：依照由上而下、由大到小、由左至右的分析原則畫出 Wireframe。
• 定義 HTML 結構：規劃 HTML 標籤，將內容都放進純 HTML 的網頁。
• CSS 樣式與排版：運用 CSS ，調整排版與樣式風格，產出與設計稿一致的網頁。

例如：為自己喜歡的英雄設計一張名片 :D

2⃣️ 成果導向的學習體驗：社群、文化與教練

無論是買書、網路資源、線上課程自學，常常會遇到幾種問題：

• 買了卻沒上或上不完
• 上了課卻不知道學會沒
• 學了卻不知是否能與業界接軌

為解決上述問題，可以分三個層面來探討：

I. 互助競合的同儕

一個人走得快，一群人走得更快、更遠、更久。

TIP 1 樂於交流

閱讀同一份教材，由於各人的背景、經歷、觀點不同，造成理解有所差異、摘錄的重點也會不同。當與團體一起學習時，會因為交流而積累更多收穫，甚至產生指數級的倍增。

TIP 2 多方觀摩

雖源自同一份題目或作業，但觀摩他人作品時，卻往往能突破盲點、啟發創意。若能進一步反思他人邏輯，並給予回饋，將教學相長。

TIP 3 享受競合

無論是容易被慣性影響或者紀律嚴謹的人，一旦找到可敬的對手，都能燃起更多鬥志，激發更多推動成長的動力。同樣，遇到頻率相當的夥伴，也能因為彼此的提攜，進步神速。

II. 刻意練習的文化

我相信人有獨特天賦，刻意練習讓天賦發光

TIP 4 有效提問

在這個充滿「Open source 文化」的軟體界，互相幫助似乎是一種內建技能。然而，提問的技巧卻能決定他人是否幫得上自己：

• 具體提問：優先表達目的及具體問題
• 除錯過程：排除或嘗試解決問題的過程及思考邏輯（包含 Google 的關鍵字及閱讀資訊後的觀點）
• 參考資料：程式碼、截圖或其他用以解決問題的參考資料

TIP 5 即時反饋

你會使用 1小時更新一次定位的導航軟體嗎？

在導航時，只要延遲幾秒鐘，都可能來不及轉彎。在學習的路上，唯有即時、不斷且大量的反饋，才能持續縮短自己與目標間的差距。

TIP 6 勤於產出

from: The Learning Pyramid

根據 研究，教導他人（即時應用所學知識或技能）的學習吸收效率最高。例如：產出筆記、心智圖、框架或結構圖、思考並回答他人問題等。

TIP 7 反覆迭代

瘋子，就是重複做同樣的事情還期待會出現不同的結果。
Insanity: doing the same thing over and over again and expecting different results.
——愛因斯坦 Albert Einstein

from: 經理人

如果把學習一項技能當成打造客戶會買單的產品，猶如 豐田管理模式 的 精實創業 學習循環。真正有效地前進是不斷「嘗試、驗證、微調」的過程。

III. 技術上與學習上的教練

TIP 8 最佳實踐

最佳實踐（best practice）是一個管理學概念，認為存在某種技術、方法、過程、活動或機制可以使生產或管理實踐的結果達到最優，並減少出錯的可能性。
——維基百科

現代科技「秒新分異」、資訊爆炸、趨勢暗潮洶湧，所謂的最佳實踐只會出現在業界的戰場上，因此有業界工程師為導師或教練，才能夠提供更貼近前線的觀點。

TIP 9 學會學習

學習是一門需要不斷打磨的工藝，有效的學習方式能縮短攫取知識、習得技能的距離。稱職的教練，能引導你按最適合自己的步調和途徑來學習。

P.s. 這邊推薦一本教會我如何閱讀（學習）的啟蒙經典 《如何閱讀一本書》，未來撰寫好書分享系列文章時，再來為各位導讀這本書。

TIP 10 深刻反思

卓越的教練能協助你思考，包含：

• 引導你釐清問題
• 透過重述並確認彼此的理解
• 透過一連串深度提問協助探尋盲點
• 給予不同角度的思考空間

3⃣️ 自我管理與修煉

I. 確立目的：知道為何而戰

不管學習程式或軟體開發的動機是什麼？可能是體驗、轉職、成為T 型人才、創業、打造自己的產品項目。然而這些都是階段性的里程碑，職涯卻是無限的，一個匹配的無限目標才能長久驅使自己前進：

Simon Sinek Infinite Goal (3 mins)

II. 認識學習風格：成為高效能學習者

許多教育研究發現，通過更加了解自己的學習方式，可以成為更有效率的學習者。

TYPE 1 主動型 (Active) v.s.反思型 (Reflective)

• 主動型的學習者傾向於積極參與某活動、先嘗試看看、做實驗、和多人合作或交流，來理解所獲得的資訊。
• 反思型的學習者則較偏好獨自思考、追根究柢，做筆記或重點整理學習。

TYPE 2 感受型 (Sensing) v.s. 直覺型 (Intuitive)

• 感受型的學習者比較實際且謹慎，善於學習具體的事實、用固有的方式去解決問題而不愛突發狀況，但能耐心完成細項。
• 直覺型學習者則喜歡以快速而創新的方式完成工作，善於理解新概念、發覺事物間的關聯或可能性，但不喜歡重複而規律的事物。

TYPE 3 視覺型 (Visual) v.s.文字型 (Verbal)

• 視覺型學習者在使用圖片、圖表、架構圖或影片等具體事物的呈現中會有較佳的學習表現。
• 文字型的學習者則在閱讀文字說明或是口述講解有較好的學習效果。

TYPE 4 循序型 (Sequential) v.s. 總體型 (Global)

• 循序型學習者傾向於從頭開始、按部就班地學習，一步一步循著邏輯去找出答案。
• 總體型的學習者則偏好跳躍式學習，他們通常在理解一定程度的資訊後，會突然間領悟到資訊的關聯性。他們能用創新的方式歸納資訊，但是卻不一定能夠解釋如何辦到。

III. Get Things Done：成為高效能工作者

時間是很有趣且公平的資產，每人每天都是 24 小時，一分一秒都不會少，不像金錢可以儲蓄投資生息。不管善用或揮霍，時間都兀自流逝。

「時間無法管理，能管理的只有自己。」

RULE 1 安排次序和比重，逐步完成

• 列出各種生活事項並分門別類，例如：人際關係（包含婚姻家庭、職場、重要生活圈）、價值創造（涵蓋支薪與否的所有工作和斜槓項目）、生活治理（舉凡財富管理、健康管理、生命次序等）、終身學習（囊括任何想學習和自我提升的事物或技能）。
• 為每個類別和個別項目設定比重，予以排序並權衡時間後，逐一完成之。

RULE 2 深度工作 & 深度放鬆

深度工作力是專注於高認知需求任務而不分心的能力，它能讓你快速學習，以更少的時間創造更好的成果。

簡單來說，深度工作即是進行高價值產出的工作，須制定儀式和規則，幫助自己進入高度專注的狀態，但也必須安排放鬆時間盡情分心。在這個資訊爆炸、社群盛行、即時通訊的時代，尤其要強制斷線，避開分心來源。有興趣請看這本書 《Deep Work 深度工作力：淺薄時代，個人成功的關鍵能力》 ，之後會摘錄成一篇文章來分享。

RULE 3 善用工具打造數位分身/助理

• 透過 RULE 1 主動篩選資訊來源（包含文章、書籍、影片等傳遞資訊的媒介）及收件匣（善用 Gmail 篩選器 自動化管理）
• 透過 GTD 原則篩選並安排任務，同時清空腦中思緒（目前使用 Trello + Planyway + Google Calendar）
• 透過 蕃茄鐘工作法 及 深度工作 的原則執行任務（目前使用 Pomello）

更多有關打造數位分身的概念可以參考這篇 《我如何設計個人化 Notion ：打造數位分身》。