我要成為前端工程師!給 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 語言特性是很枯燥無味的,如果也能學習一些知名的開發框架,如 AngularJSReact/Redux 都不錯,不但有助於解決工作上的難題,更能獲得許多解決問題的成就感。

如果有主題相關的闖關遊戲也可以試試看,例如 Codewars, Code Hunt 之類的。

找學習夥伴

如果有同事、夥伴、朋友也對寫程式有興趣,建議可以組織讀書會、分享會之類的活動。

多參加一些知名的 Facebook 線上社團,可以在上面發問,也可以分享一些自己的所見所得,如果心有餘力,還可以回答別人的問題,過程中你就可以交到不少志同道合的朋友。

JavaScript.twFront-End Developers Taiwan台中前端社群高雄前端社群node.js 台灣AngularJS.twReactJS.tw

找機會參加一些實體的社群聚會,畢竟在網路上交流技術還是有點虛,如果可以跟大家見見面,彼此見面交流一些技術心得,會有比較踏實的感覺。

分享學習心得

我強烈建議新手上路可以嘗試撰寫部落格,將所知、所見、所聞都寫下來,不僅僅是留下紀錄而已,更重要的是學習組織自己的思緒,將抽象的概念透過具象的文字表達出來,這對一些觀念的理解來說非常重要。

如果一開始不容易組織大量文字,也可以試著從手稿或筆記開始寫起,累積一些學習心得與想法,但若能公開發表出來,更能促使你將心得與想法整理得更清晰。

你也可以嘗試做些簡報 (Slides),將一些你學到的重要概念與技巧,透過簡要的版面配置整理出來,並且分享到 SlideShareSpeaker Deck 都可以。

手刻作品集

無論你學了多少東西,你如何證明你真的學會了呢?是的,你要留下你的學習紀錄,你要整理你的作品集,一個兩個是不夠的。

你可以參考 Jennifer Dewalt 的作品網站,他從第一天開始學習網頁技術開始,就決定每天寫出一個作品(網站),你可以從他的作品集中看出一個人的熱情與努力,相較於第一天與最後一天的作品,你會很驚訝一個人可以在 180 天內學到這麼多東西!

很多人也會透過建立自己的個人網站,放上自己的作品集,用以證明自己會寫網頁,你能做多炫就做多炫,沒有美感的人,到 WrapBootstrap 買個現成的版型也不錯,通常都不貴!

  • 結論

其實無論你想學甚麼程式語言都一樣,這些學習方法與經驗都可以參考,但是我總認為,一個開發人員不可以只學一種程式語言,因為你的思路會受到侷限。但你其實不用刻意去學兩三個語言,你總不能為了學兩三種語言,結果每個都會一點、每個都不太熟,這樣就本末倒置了。

無論如何,請先精通某個程式語言再說,從中學習到精隨,當有機會接觸下一個程式語言時,相對的會比較順利,也比較能比較不同語言之間的差異。不過我所看到的許多 JavaScript 新手,很多都是先學過其他程式語言然後才學 JavaScript 的,而這個轉換的過程,他們把其他程式語言的特性與概念,原封不動的套用在 JavaScript 開發上,結果當然是慘不忍睹,開發從頭到尾都是自行腦補的劇情,Bug 滿天飛啊!

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

(本文轉自 The Will Will Web,作者:Will 保哥的技術交流中心 ,未經作者同意不得轉載,圖片來源:speric
  • 延伸閱讀

程式語言百百種,只想賺錢的話該選哪一種?
史上最狂 pitch:直接現場 coding,讓創投的手機響起來!
想當神奇寶貝大師不必像無頭蒼蠅亂晃!美國大學講師把 IBM Watson 變神奇寶貝雷達

點關鍵字看更多相關文章: