我要成為前端工程師！給 JavaScript 新手的建議與學習資源整理

今年有越來越多企業開始跟我們接洽企業內訓的事，想請我幫他們培訓前端工程師，但你知道一個好的前端工程師絕對不是兩三個月可以養成的，需要多年的努力與磨練才會有點成績。而這幾年可謂 前端正夯 ，有為數不少的人開始大規模的往前端開發移動，而我被問到最多的問題就是「請問 JavaScript 要怎麼學？」或「請問 JavaScript 該怎樣入門？」諸如此類的問題。大家都知道，對於一門程式技術來說，「會寫」與「會教」是兩個截然不同的領域，會寫 JavaScript 的人到處都是，但是會教的人就相對少很多了。我這幾年教授 JavaScript 開發實戰課程已經超過 15 梯次，在將近 500 位學員裡面，我所看到的大部分學員都是對 JavaScript 不勝理解，普遍處於一種一知半解、模糊不清的狀態。另一方面，我在公司內部也帶過不少工程師，總是有人會想學習 JavaScript 但不知道如何入門的情況，這讓我陷入深思，該如何幫助一個人學習 JavaScript 從入門到精通呢？本篇文章將說說我個人的一些想法與建議。

渴望學習

先別說 JavaScript 如何從入門到精通，我們就先來看看我所看到的實務情況，所我看到許多正積極前往前端工程發展的人，無不渴望學習、無不渴望進步，但學習路徑為何？沒人說得準！每個人都是獨立的個體，有著不同的學習速度與理解。當然，如果你願意投資自己，跑去各家教育訓練機構報名課程，讓專業講師教你逐步上手當然很棒，但並非所有人都有這個機會或意願做這件事，畢竟學費不便宜。大部分的 JavaScript 開發人員，其實都是靠著自己的熱情與興趣自主學習而成的。

一般來說，有人問我怎樣學習 JavaScript 的時候，我都會建議他們先買一本 犀牛書 回來看，但這本書有 1,096 頁啊！

這本書就算你買得回來，但真的有心看完的人又有多少呢？我所看到的狀況是，大家第一時間先被這本書的厚度給嚇傻了，都把這本書當成「 參考書 」了，也就是反正先買回來擺著，等出問題再來翻翻看就好，反正程式邏輯不管甚麼語言都一樣啦，我只要寫得出來就好了，寫不出來就先找 Google 大神啊，不然就搜尋 Stack Overflow 看看有沒有類似的解答！真正 悲劇 的是， 通常你都找的到解答 ！

悲劇的開始

各位看官，你看到這裡一定覺得有點怪，既然都找的到答案了，為什麼還算是個「 悲劇 」呢？

這牽扯到「大腦科學」的領域，人類大腦的結構極其複雜，在接觸外界事物的時候，很多時候無法處裡太多細節，甚至於有很多時候，大腦所接收到的資訊是有片段的、缺漏的，無論是過多的資訊或是過少的資訊，人腦都會在很短的時間內自動做出判斷。講簡單一點，各位聽過什麼是「 腦補 」嗎？就是「 腦內補充 」的意思，源自於動漫方面的用語，現在很多年輕人都知道這個詞彙，意指「 在頭腦中對某些情節進行腦內補充，對漫畫中、小說中以及現實中自己希望而沒有發生的情節在腦內幻想 」。

在程式設計的領域中，有許多抽象的概念，就是因為某些概念難以思考，某些技術難以理解，所以我們才稱呼他「抽象」，也就是說，抽象的事物是無法思考的，當你的腦中對某種技術、程式語言或是框架擁有這種「抽象」的感覺，那麼就代表你不夠了解他，你還沒辦法融會貫通，也沒辦法舉一反三。相對的，人的大腦在學習一件事情時，當然會設法盡力理解，以求日後能夠舉一反三。

我認真的問你，當你從網路上看到一段程式碼可以解決你的問題時，請問你的第一反應是甚麼？ (1) 查書？ (2) 繼續 Google？ (3) 自行看程式碼腦補劇情？ 請作答！

我把這三個選項一一拆解，告訴你為什麼很自然的會選擇 (3) 這個答案！

1. 查書 ：你真的知道你的問題出現在書籍的哪一頁嗎？這本 犀牛書 有 1,096 頁啊，你連認真翻完他都有難度了，你會因為一個小問題從第一頁找到最後一頁嗎？別傻了！
2. 繼續 Google ：這是個很合理的選項，因為你想學得更深入，好，請問你要下什麼關鍵字進行搜尋？你連 犀牛書 裡面出現的專有名詞都沒看過了 (因為你沒讀完過)，你能打出甚麼像樣的關鍵字？你能查到甚麼重要且完整的搜尋結果？有限！
3. 自行看程式碼腦補劇情 ：是的，我們查到的程式碼看起來很簡單，每一行拆開我都看的懂阿，合在一起應該是這個意思吧！嗯，我覺得我理解了，就這樣吧，下次遇到相同問題再說！

認真的同學，想必這三個選項都會嘗試，但書上寫的跟你遇到的好像有點不太一樣，你遇到的可能是複合式的觀念問題，例如 Closure + Hoisting 的問題；繼續 Google 到的內容好多喔 (而且都英文)，看不完耶，先收藏好了，以後有空再看 (跟你買犀牛書卻不看完是一樣道理，你永遠不會打開你的網址書籤的)；自行看程式碼腦補劇情，我自己理解出來的，跑出來結果也對，應該沒錯吧，反正就邏輯啊！

不好意思，以上劇情我假設的有點武斷，並非每個人都這樣想，但是大家都會會心一笑，因為每個人都幹過這種事，因為 自動腦補 是 最有效率的學習方法 ， 只是你學到的觀念可能錯的 ！

大家都好忙

為什麼我們總是不斷尋找有效率的學習方法？因為大家都很忙，每天忙著開發程式，每天忙著救火，只要不忙的時候 (而且被發現)，就會立刻被塞入一堆工作，工作都沒時間了，何時才有空學習啊！

大家都很清楚，從事軟體開發要從入門到精通沒有甚麼捷徑，就是要花時間練習、練習、再練習，寫 Code、寫 Code、多寫 Code，所以「 做中學 」是大家公認最可行的唯一解，無論被安排了什麼工作，反正不會就學，開發時間估長一點即可，如果時間內做不完，難道你咬我嗎？所以說啊，在「甲方」公司上班是幸福的，我曾經看過有公司因為是幸福企業，只要你有做不出來的理由，專案永遠可以無限期 Delay！ ( 不要笑，這是真的 )

現在每間公司多多少少都需要仰賴 IT 系統的支持，很多公司都有自己的開發團隊，大多用來開發公司內部所需的系統，其實這個「 做中學 」方案，是個 不得不 的選擇，因為很多時候你並沒有更好的選擇，所以目前的選擇就是最好的選擇！( 咦?! 好熟悉的一句話! )

在台灣，中小企業佔了 90% 以上，許多公司都是傳統產業，沒有良好的技術學習環境，所以能招募到高手的機會很低，再加上優秀的軟體人才極度缺乏，真正的高手大家都搶著要，所以不得已只能聘用有點經驗、又不太有經驗的開發人員，進到公司在落實「 做中學 」策略，讓大家慢慢進步，反正有做事就會進步，也會越來越熟，總有一天可以獨當一面。

做中學 ( Learning by Doing )

如果你問我的意見，我也會說「 做中學 」是唯一解，因為我也是這樣帶人的，我知道「做中學」不是最有效率的解法，但是確實唯一可行的解法！

哪裡沒效率？在一知半解的情況下，學習過程會大量累積「錯誤的觀念」( 請記得人會自動腦補劇情 )。事實上，你在自我理解的過程中，並不知道那些觀念是對的，你工作的周遭不見的有人可以幫你點出正確的觀念，而大多只能幫你點出解決問題的方法，你遇到一個問題，可以問到一種解法，重點在於你無法舉一反三，當你無法活用你所學習到的知識，你就無法累積更多的自信，無法累積自信，你就會一直處於一種一知半解的狀態。發現了嗎？這是一種老鼠賽跑的迴圈，這樣的學習方式會讓你一直傾向使用「已經會」的技術來解決問題，那麼你的學習領域就會受限，自然無法進步太多，在未來的世界裡，不可諱言的， 進步太慢 就是 退步 ！

所以一直以來，我的教學風格都很強調一點，那就是「建立觀念」比「寫 Code」還重要，網路上幾乎可以搜尋到任何你需要的程式碼，所以看完別人的程式碼還能夠寫出類似的應用才厲害，也就是能夠舉一反三的能力。但是，如果你不寫 Code，學會再多的觀念，你也會漸漸忘記，到頭來等於沒學！

所以你問我「 做中學 」重不重要？我會說： 超級重要 ！但是，在 有觀念打底 的情況下去「 做 」，保證「 學 」的更扎實，更有自信，也更加有趣，這是我從事軟體開發 20 多年的秘密，請大家不要告訴大家！

培養自信

如果你未來想成為一個 專業的 前端工程師，你要知道一件事，絕對不能因為剛學會 jQuery 就心滿意足，也不能因為學不會 Node.js 就失去了熱情。你要不斷肯定自己，你要知道從看不懂 jQuery 到能夠自己寫出正確的程式碼是一段很有成就感的事，這是你努力學習的成果。但如果你試圖跳級打怪，被對方秒殺也只是剛好而已。你需要時間成長，一步一步來，這也是「做中學」不可或缺的理由之一，因為 你不可能在短時間學會所有觀念與技能 ！

如果有人跟你說：「你都出來工作幾年了？還寫出這種程式碼？」請不要跟他做朋友，因為他把事實講出來了，想在心裡還可以接受，但當面講出來就是不行！

請相信自己「沒有什麼事情是學不會的，只是時間長短的問題」，在學習的道路上，你會發現經常有許多神人出沒在你身邊，他們會讓你感覺，他們會的一切都是渾然天成、與生俱來的，請相信我，這一切都是幻覺。這些想法，全部都是你自行腦補的劇情，在這個世界上，我相信有天才存在，但不會是你，也不會是我，更不會是你身邊的人，他們只是在你看不見的時候偷偷努力而已。

我分享一個自己的小故事，在我小時候曾經有一次要跟同學出遊，我想跟我父親借用傳統相機 (需要換底片的那種)，他只跟我說一句話：「你不會換底片」。我說：「你教我，我就會啦」。他說：「不可能啦，小朋友不會換底片」。但我跟他盧了很久，最後他終於借我了，而且還示範一次換底片的過程給我看，他問我：「有沒有學會？」我當然說：「會阿，這很簡單」。出遊回來後，我拍了好多捲底片，我拿去沖洗之後發現，只有第一卷底片是好的，其他的全部都沒有裝成功，而第一卷是我父親示範給我看的那捲。

你可以想像，當時的我非常受傷，有種被戳中要害的感覺，且真的覺得自己學不會、自己沒有天分，我花了好多年的時間，才用自己的努力證明自己、相信自己，原來我可以學會很多我以前學不會的事，而且學習的速度會隨著你會的東西越多而學得更快。很多時候你覺得別人很強，學東西很快，那是你不知道他自己學過多少東西，你只是起步比人家晚而已，沒甚麼好自卑的！

要成為一個 專業的 前端工程師，過程中會遇到許多阻礙，這些阻礙可能會來自於你的家人、你的朋友、你的客戶、你的同事、甚至於是你的老闆，但最大的阻礙其實還是你自己，當你擁有正確的學習心態，不再跟別人比較，為自己做出實質的努力 (不要只掛在嘴邊說你想學習)，你才有可能有達陣的一天！

會寫得多、看懂得少

JavaScript 幾乎成為 Web 世界的標準程式語言，無論在你再怎樣不喜歡它，它就是在那裡，就是 Number One，所有瀏覽器唯一支持的程式語言。而這個世界，幾乎所有的軟體都在 Web 化，除了網站之外，像是 Mobile App ( Titanium , NativeScript , React Native )、網路遊戲 (Web Game)、穿戴式裝置 (Apple Watch)、… 幾乎都朝著 Web 化的方向前進，你說花點力氣投資在 JavaScript 不對嗎？

偏偏我所看到的是，大部分人都會寫、也能寫 JavaScript，但真正理解 JavaScript 的人卻很少，非常的少。當你開始採用一個完全依賴 JavaScript 的框架時 (例如 Node.js、AngularJS、React、... etc.)，如果你還是用一知半解的觀念去開發，你會花上大把大把的時間在除錯、鬼打牆、生悶氣、捶心肝、... 等諸如此類的事情上。因為沒有好的觀念支持，你寫不出有品質的程式碼。沒有好的觀念支持，你也無法有效率的團隊合作，整個開發團隊如果有觀念懸殊的成員存在，影響的事全隊的品質與效率，因為一個人的程式出錯，很有可能會影響另一個人的開發效率，因為他所遇到的問題，可能來自於你寫的程式碼。

學習資源整理

我個人覺得自學成材是非常有可能的，因為我確實親眼目睹短時間內學會 JavaScript 的人，並且完全依賴網路上優質的、免費的學習資源就可以學到非常紮實的觀念，以下我列出一些學習資源給大家參考：

• 免費線上資源
  • Eloquent JavaScript
    一本開放、免費且非常優質的 JavaScript 線上電子書，曾榮獲 Mozilla 與多人 贊助 ，章節結構清楚明瞭，內容不拖泥帶水，各種格式的電子書、 範例程式 通通可以線上取得。
  • Speaking JavaScript: An In-Depth Guide for Programmers
    一本寫給已經有其他程式語言基礎的人看的書，從入門到進階可以在短時間內學會許多重要的觀念。
  • Programming JavaScript Applications
    一本寫給有點 JavaScript 開發經驗的人看的書，內容精簡扼要，也是有網路上知名人物 Eric Elliott 撰寫的書籍，品質有保證！
  • Train with Programming Challenges/Kata | Codewars
    透過闖關的方式練成 JavaScript 達人，這網站在註冊的時候，會先讓你選擇程式語言，如果你選擇 JavaScript 的話，他會問你兩個 JavaScript 的問題，要你在線上改 Code，你必須回答正確才能讓你註冊帳號，所以你適合給已經入門的人練功。註冊成功後，可以點擊 Kata 開始練等級 (kyu)，他有八個困難等級，共有 1,158 關，每一關通過後還可以看到全世界其他人有哪些不同的解法，非常有趣。
  • Exploring ES6: Upgrade to the next version of JavaScript
    一本針對 ECMAScript 6 進行詳細闡述的書，可免費線上觀看，本書的主要對象是已經擁有 ECMAScript 5 開發經驗的 JavaScript 開發人員，完整補充 ECMAScript 6 的重要觀念與特性。
  • ECMAScript 6 入门
    一本開源的 JavaScript 語言教學，主要針對 ECMAScript 6 引入的語法與特性進行解說，內容也相當完整。此書為簡體中文
  • JavaScript Promise 迷你书（中文版）
    一本由 日文版 翻譯過來的電子書，專注在 ES6 的 Promise 這個主題上，有非常完整的圖文範例與解說。
• 中文書籍推薦
  • JavaScript 大全, 6/e (JavaScript: The Definitive Guide: Activate Your Web Pages, 6/e)
    從最基礎的 JavaScript 語言特性講起，非常適合初學者閱讀，只怕你覺得他太厚而中途放棄而已！
  • Speaking JavaScript｜簡明完整的 JS 精要指南 (Speaking JavaScript)
    專為初學 JavaScript 的程式設計師而寫的書，其厚度是 JavaScript 大全的一半而已，本書英文版寫得很好，中譯版當然可以參考，也可以多買英文版中英對照著看！
  • JavaScript 應用程式開發實務 (Programming JavaScript Applications: Robust Web Architecture with Node, HTML5, and Modern JS Libraries)
    用簡單明瞭的方式解說 JavaScript 的重要細節，其厚度是 Speaking JavaScript 的再一半厚度而已，非常適合已入門的 JavaScript 開發人員閱讀。
  • JavaScript－優良部份 (JavaScript: The Good Parts)
    我最喜歡的一本書，僅 164 頁，闡述所有 JavaScript 的優良部分，適合進階的 JavaScript 開發人員閱讀。
• 影音互動教學
  • JavaScript - Code School ( 每月 29 美金 )
    Code School 是國內外備受好評的互動式線上學習網站之一，只要不排斥英文，他有文章、影片、互動練習 (真的讓你輸入程式碼練習) 等方式逐步教學，也非常適合初學者自學之用，透過這個網站所設計的學習路徑來學習 JavaScript 可以在短時間學會如何開發！
  • JavaScript Lessons - Screencast Video Tutorials @eggheadio ( 每月 19.99 美金 )
    eggheadio 網站提供高品質的預錄影片，透過專業的講師講解 JavaScript 的各個面向與觀念，只要英文聽力還不錯，也是強烈建議可以花點小錢線上學習，他們每個影片都有完整的文字稿 (Transcript)，也可以順便練英文喔！
  • JavaScript - Pluralsight ( 每月 29 美金 )
    Plualsight 儼然成為全美最大的線上教學平台，擁有 4,500 門課程，其中優質的 JavaScript 教學課程也非常多，從入門到進階通通都有，部分課程有中英文字幕。

學習方法

前陣子我才聽到一句很有哲理的話：「 努力不一定會成功，但不努力一定很輕鬆 」 XD

學習沒有捷徑，只能靠自身努力，別無他法！

這是一場腦內革命，過程並不輕鬆，但即便不輕鬆，這過程卻可以很有趣，記得要不斷找樂子、獲取成就感，如果可以，找個一起學習的夥伴，否則真你會撐不下去。

以下我來分享一些學習 JavaScript 的方法供新手參考：

• 找樂子
  • 不要每天都寫 Code，你會彈性疲乏，適度的平衡工作、學習與生活也是很重要的，但是請記得還很菜的時候，要把學習放重一點。
  • 很多人會適時地玩些線上遊戲來轉移彈性疲乏的注意力，有時候解 Bug 解不出來的時候，也可以嘗試一些完全不同的事情，擴展你的思考領域。
    請參考這篇文章： 為什麼你睡了11個小時還會累? 原來我們的休息方式都錯了
• 找成就感
  • 培養自信是學習過程中非常重要的一環，不斷接受挑戰，並且一一突破，過程中就會有源源不絕的成就感出現。
  • 站在巨人的肩膀上開發真的很棒，學一些現成的函式庫來用 ( 例如 jQuery , jQuery UI )，會有助於累積成就感，開發起來也會比較有趣！
  • 多找一些跟學習主題相關的資料來看，看懂一個自己原本不懂的資料，本身也是很有成就感的一件事，不過記得要學著分享，分享才能產生快樂。
  • 光是學習 JavaScript 語言特性是很枯燥無味的，如果也能學習一些知名的開發框架，如 AngularJS 或 React / Redux 都不錯，不但有助於解決工作上的難題，更能獲得許多解決問題的成就感。
  • 如果有主題相關的闖關遊戲也可以試試看，例如 Codewars , Code Hunt 之類的。
• 找學習夥伴
  • 如果有同事、夥伴、朋友也對寫程式有興趣，建議可以組織讀書會、分享會之類的活動。
  • 多參加一些知名的 Facebook 線上社團，可以在上面發問，也可以分享一些自己的所見所得，如果心有餘力，還可以回答別人的問題，過程中你就可以交到不少志同道合的朋友。
    • JavaScript.tw
    • Front-End Developers Taiwan
    • 台中前端社群
    • 高雄前端社群
    • node.js台灣
    • AngularJS.tw
    • ReactJS.tw
  • 找機會參加一些實體的社群聚會，畢竟在網路上交流技術還是有點虛，如果可以跟大家見見面，彼此見面交流一些技術心得，會有比較踏實的感覺。
• 分享學習心得
  • 我強烈建議新手上路可以嘗試撰寫部落格，將所知、所見、所聞都寫下來，不僅僅是留下紀錄而已，更重要的是學習組織自己的思緒，將抽象的概念透過具象的文字表達出來，這對一些觀念的理解來說非常重要。
  • 如果一開始不容易組織大量文字，也可以試著從手稿或筆記開始寫起，累積一些學習心得與想法，但若能公開發表出來，更能促使你將心得與想法整理得更清晰。
  • 你也可以嘗試做些簡報 (Slides)，將一些你學到的重要概念與技巧，透過簡要的版面配置整理出來，並且分享到 SlideShare 或 Speaker Deck 都可以。
• 手刻作品集
  • 無論你學了多少東西，你如何證明你真的學會了呢？是的，你要留下你的學習紀錄，你要整理你的作品集，一個兩個是不夠的。
  • 你可以參考 Jennifer Dewalt 的作品網站，他從第一天開始學習網頁技術開始，就決定每天寫出一個作品 (網站)，你可以從他的作品集中看出一個人的熱情與努力，相較於第一天與最後一天的作品，你會很驚訝一個人可以在 180 天內學到這麼多東西！
  • 很多人也會透過建立自己的個人網站，放上自己的作品集，用以證明自己會寫網頁，你能做多炫就做多炫，沒有美感的人，到 WrapBootstrap 買個現成的版型也不錯，通常都不貴！

結論

其實無論你想學甚麼程式語言都一樣，這些學習方法與經驗都可以參考，但是我總認為，一個開發人員不可以只學一種程式語言，因為你的思路會受到侷限。但你其實不用刻意去學兩三個語言，你總不能為了學兩三種語言，結果每個都會一點、每個都不太熟，這樣就本末倒置了。無論如何，請先精通某個程式語言再說，從中學習到精隨，當有機會接觸下一個程式語言時，相對的會比較順利，也比較能比較不同語言之間的差異。不過我所看到的許多 JavaScript 新手，很多都是先學過其他程式語言然後才學 JavaScript 的，而這個轉換的過程，他們把其他程式語言的特性與概念，原封不動的套用在 JavaScript 開發上，結果當然是慘不忍睹，開發從頭到尾都是自行腦補的劇情，Bug 滿天飛啊！

最後，我個人還是認為，書要認真讀、Code 要努力寫，這才是學習程式設計的不二法則，祝大家都能維持熱情，開心的成為專業的前端工程師！ ^_^