今年有越來越多企業開始跟我們接洽企業內訓的事,想請我幫他們培訓前端工程師,但你知道一個好的前端工程師絕對不是兩三個月可以養成的,需要多年的努力與磨練才會有點成績。而這幾年可謂前端正夯,有為數不少的人開始大規模的往前端開發移動,而我被問到最多的問題就是「請問 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等),如果你還是用一知半解的觀念去開發,你會花上大把大把的時間在除錯、鬼打牆、生悶氣、捶心肝諸如此類的事情上。
因為沒有好的觀念支持,你寫不出有品質的程式碼。沒有好的觀念支持,你也無法有效率的團隊合作,整個開發團隊如果有觀念懸殊的成員存在,影響的是全隊的品質與效率,因為一個人的程式出錯,很有可能會影響另一個人的開發效率,因為他所遇到的問題,可能來自於你寫的程式碼。
學習資源整理
我個人覺得自學成材是非常有可能的,因為我確實親眼目睹短時間內學會 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 這個主題上,有非常完整的圖文範例與解說。
- Eloquent JavaScript
- 中文書籍推薦
- 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 大全, 6/e (JavaScript: The Definitive Guide: Activate Your Web Pages, 6/e)
- 影音互動教學
- 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 教學課程也非常多,從入門到進階通通都有,部分課程有中英文字幕。
- JavaScript - Code School ( 每月 29 美金 )
結論
其實無論你想學甚麼程式語言都一樣,這些學習方法與經驗都可以參考,但是我總認為,一個開發人員不可以只學一種程式語言,因為你的思路會受到侷限。但你其實不用刻意去學兩三個語言,你總不能為了學兩三種語言,結果每個都會一點、每個都不太熟,這樣就本末倒置了。無論如何,請先精通某個程式語言再說,從中學習到精隨,當有機會接觸下一個程式語言時,相對的會比較順利,也比較能比較不同語言之間的差異。不過我所看到的許多 JavaScript 新手,很多都是先學過其他程式語言然後才學 JavaScript 的,而這個轉換的過程,他們把其他程式語言的特性與概念,原封不動的套用在 JavaScript 開發上,結果當然是慘不忍睹,開發從頭到尾都是自行腦補的劇情,Bug 滿天飛啊!
最後,我個人還是認為,書要認真讀、Code 要努力寫,這才是學習程式設計的不二法則,祝大家都能維持熱情,開心的成為專業的前端工程師!
專欄作者
熱門新聞
2024-09-29
2024-10-01
2024-10-01
2024-09-29
2024-10-01
2024-09-30
2024-09-30