我要成為前端工程師！給 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 要努力寫，這才是學習程式設計的不二法則，祝大家都能維持熱情，開心的成為專業的前端工程師！ ^_^