🔧 阿川の電商水電行
- 剛高中畢業。沒有計劃，沒有方向，只有一台筆記型電腦，感覺自己大概該好好想想人生該做什麼了。八年後，我已經成為全端開發者，使用 Node、React、TypeScript 開發真正有用的生產級應用程式。
但關於學習編程，沒人會告訴你一件事：它並非一帆風順。它很混亂，充滿了失敗、彎路、放棄和回歸。這就是這個故事，一個真實的故事。
（順便說一句，這裡的某些年份可能有點偏差，重點不是確切的日期，而是艱苦的努力，我們都是從某個地方開始的。）
現在我使用Node.js 、React 和 TypeScript 來建立東西——這些東西我當時根本無法想像。
開始：HTML、CSS 和假裝我知道自己在做什麼 (2017)
2017年高中畢業後就開始了。我第一次接觸程式碼？ HTML和CSS。不是因為我有什麼計劃，而是因為YouTube上某個影片說「從這裡開始」。
我建過最醜的網站。藍色背景，到處都是 Comic Sans 字體，圖片大到破壞了佈局。但它成功了。我輸入了一些內容，刷新瀏覽器，我的程式碼就出現在螢幕上了。這徹底迷住了我。
大概花了一個月的時間玩HTML和CSS。建了一個作品集網站（尷尬），一個假餐廳菜單（更糟），還試圖抄襲谷歌主頁，結果慘敗。
但我其實在不知不覺中學到了很多：瀏覽器的工作原理、如何建立頁面、出現問題時如何在 Google 上找到錯誤訊息。這些基礎知識比我想像的更重要。
真正有幫助的資源：
-
W3Schools (https://www.w3schools.com/) - 每個人都討厭它，但它很簡單，適合初學者
-
MDN Web Docs (https://developer.mozilla.org/) - 已收藏每一頁，至今仍在使用
-
CSS-Tricks (https://css-tricks.com/) - 當我的佈局崩潰時（總是如此）
然後我就變得很自大了。 “HTML 和 CSS 很簡單，程式設計也很簡單。”
錯誤的。
在學校/大學度過的歲月：毫無進展的歲月（2017-2020）
令人不安的事實是——學校並沒有教我太多關於實際程式設計的知識。當然，他們有計算機科學課。我們「學」了循環和變數。但這些都記不住，因為感覺不到真實。
老師會給我們示範偽程式碼。我們會在紙上（沒錯，就是在紙上）寫一些 Java 程式碼。然後參加考試。通過。第二天就忘了一切。
程式設計就像死記硬背那些我永遠不會用到的數學公式。抽象、無聊、毫無意義。
我敷衍了事，但什麼都沒進展。課程雖然通過了，但如果你要我做點什麼，我都不知道從何下手。
回想起來，問題不在於我學不會，而在於我什麼都沒做。只是抄襲一些例子，然後在考試中反覆練習。
繞道而行：CCNA 與命令列覺醒 (2018)
2018年左右，我做了一個奇怪的決定。徹底放棄編程，轉而進入網路領域。我開始學習CCNA（思科認證網路工程師）。
聽起來很隨機，對吧？但事情是這樣的。
我使用思科的命令列介面設定路由器和交換器。命令如下：
Router> enable
Router# configure terminal
Router(config)# interface fastethernet 0/0
Router(config-if)# ip address 192.168.1.1 255.255.255.0然後我突然明白了。命令列這種東西，輸入指令就能立即看到結果，感覺……很強。就像我直接跟機器對話，而不是透過圖形介面。
我花了大概6-9個月的時間深入學習CCNA。學習了網路、IP位址、路由協定、VLAN等知識。說實話，我學得相當不錯了。
但整個過程中，我都存在著這樣一種揮之不去的感覺：“這很酷，但我想建置東西，而不僅僅是配置東西。”
那麼命令列體驗呢？它埋下了一顆種子。讓我對終端、腳本、自動化操作（而不是點擊按鈕）產生了好奇。
真正的開始：回歸程式設計（2018 年底）
2018 年末，我休息了一段時間，腦子裡有很多事情，想知道在透過 CCNA 學習後，我是否應該全心投入程式設計中
又開始程式設計了，但這次不一樣。這次我們腦子裡想著一個專案，因為我們快要開始做學校的專案了。
我在谷歌上做了很多研究，最後決定用一個招募系統。就像一個公司內部的招募公告欄，公司可以在上面發布職缺，學生可以申請。我選擇了這個專案。
我不知道自己在做什麼。
我還在摸索大學生活，你知道是怎麼回事──一半在努力打造事業，一半在努力撐過課業。但我決心要把這件事做好。
改變一切的學校專案：求職門戶
這個專案、這個工作門戶系統，一切終於有了進展。
我選擇 PHP 是因為我發現了一些教學課程，讓它看起來很簡單（其實不然）。我花了三個月的時間才搞定它。不只是課餘時間——我指的是熬夜、週末，甚至因為太著迷而放棄社交活動。
對於學習的人來說，範圍太瘋狂了：
-
公司註冊並發布職位
-
學生建立個人資料並申請
-
管理面板來管理一切
-
MySQL 資料庫儲存所有資料
-
帶有會話的登入/登出系統
-
履歷和文件上傳
我的朋友覺得我瘋了。 “你幹嘛做這麼多？只要做點簡單的就能通過考試。”
但我做不到。我被迷住了。這是我第一次做真正的事。一些人們會真正用到的東西，但記住這只是一個學校專案。
這段程式碼簡直是一場災難，我讀了又讀。到處都是 SQL 注入漏洞（我對安全性一竅不通）。大概 80% 的程式碼都是從 Stack Overflow 複製貼上過來的，20% 的程式碼是我在琢磨它是怎麼運作的。但它確實成功了。
然後我就碰壁了。網站感覺……死氣沉沉。一成不變。點擊按鈕，頁面刷新，等待。再次點擊，頁面再次刷新。感覺又老舊又笨重。
就在那時，我發現了 jQuery。我找到了一些關於加入動畫和實作無需刷新頁面即可提交表單的教學。之後我又花了幾週時間學習 AJAX，實現了無需重新載入整個頁面的功能。
突然間，求職入口網站變得生動活潑起來。點選按鈕時，按鈕會呈現動畫效果。招募資訊載入流暢，無需刷新。表單驗證即時進行。
當我在班上展示這篇文章時，我的朋友都驚呆了。老師們也感到困惑，因為這遠遠超出了他們的預期。一位老師甚至問我是不是從哪裡抄來的（我確實抄了一部分，但我理解了，這才是最重要的）。
顯然，我得了A。但更重要的是，我意識到了一件事：
這種互動性。這種 JavaScript 元素。正是這些讓網站感覺現代化的東西。這就是我想要做的。
如果你想看看我當時的程式碼有多混亂，這個專案仍然在 GitHub 上：https://github.com/elvis-sautet/job-portal-system
現在回想起來，我有點尷尬，但我也很自豪。正是這個專案讓我成為了一名開發者。
JavaScript：當它最終變得有意義時
在完成求職入口網站專案後，我不再使用 PHP 了。 JavaScript 才是真正神奇的地方，我還想學習更多。
開始正式學習 JavaScript。不是從課程開始，而是從建構開始。
javascript.info (https://javascript.info/) 成為了我的聖經。免費、全面，而且不會把你當傻子。
經歷過：
-
變數（let、const、var——說實話，我仍然對 var 感到困惑）
-
函數（花了很長時間才理解返回值）
-
陣列和物件（物件可以包含函數，真是令人震驚）
-
DOM 操作（getElementById 成了我最好的朋友）
-
非同步 JavaScript（回調、承諾、非同步/等待 - 這讓我絞盡腦汁）
建構了我能想到的一切：
-
計算器（顯然）
-
Todo 應用（建構了 10 次）
-
費用追蹤器（因為我破產了）
-
隨機報價產生器
-
使用免費 API 的天氣應用
這次的關鍵差異是什麼？我做的是真正想用的東西。不是教學專案，而是我自己的專案。
我甚至進入了 nodejs，掌握了 JS，Net Ninja 也在推動我理解 Node，哈哈。
拯救我的 YouTube 頻道：
網路忍者（https://www.youtube.com/@NetNinja）
Shaun 的 JavaScript 播放清單簡直是傳奇。他講解起來就像在跟真人說話，而不是跟電腦科學教授說話。
Web 開發簡化(https://www.youtube.com/@WebDevSimplified)
Kyle 讓複雜的事情變得簡單。他的 React Hooks 影片終於讓我在幾週的困惑之後明白了 Hooks 的意義。
使用 Mosh 程式設計（https://www.youtube.com/@programmingwithmosh）
Mosh 的教學風格條理清晰，非常適合基礎知識的學習。
Traversy媒體（https://www.youtube.com/@TraversyMedia）
布拉德的速成課程比任何付費課程都教會了我更多的實用技能。
但我學到了一個訣竅：看不是學。我會看一個影片，暫停一下，然後試著自己動手做一個，完全不看。弄壞了，修好。就是這樣。
我每天要花 6-8 小時編寫程式碼。毫不誇張地說，從早上、下午到晚上。我的筆記型電腦基本上就是我身體的延伸。我父母覺得我在浪費時間。我的朋友覺得我太沉迷了。
我確實如此。正是這種執著，才成就了今天的我。
React：差點讓我崩潰的框架（2021 年底-2022 年）
大約在 2021 年 12 月下旬，我到處都能看到 React 的身影。招募資訊裡需要它。開發者們也都在討論它。於是，我決定一頭栽進去。
我幾乎完全放棄了編碼。
React 第一個月完全沒用。元件？ Props？ State？看起來像 HTML 但其實不是 HTML 的 JSX？這到底是什麼鬼？
我嘗試學習了三次才明白：
第一次嘗試：看了10小時的課程。什麼都沒明白。腦子痛。放棄了。
第二次嘗試：嘗試建立一些東西。花了一周時間與錯誤作鬥爭。再次放棄。
第三次嘗試：回歸基礎。慢慢閱讀React 文件(https://react.dev/)。一次一個概念。建立一些小範例。直到理解之後才繼續前進。
就在那時，我終於明白了。 React 並不是什麼魔法。它只是 JavaScript，只不過換了一種 UI 思維。
我的突破性專案？一個使用 OMDB API 的電影搜尋應用程式。輸入電影名稱，查看結果，點選查看詳情。簡單到可以完成，複雜到可以真正學習。
然後我做了一件鞏固我理解的事情：我從頭開始重建了它，沒有看教學。那時我才知道我真的學會了，而不是照搬。
有效的 React 資源：
-
React 官方文件 (https://react.dev/) - 從這裡開始，認真點
-
freeCodeCamp React 教學 (https://www.freecodecamp.org/) - 長而詳盡
我深入研究了它，嗯，它點擊了，但不是那麼多，但是嘿，我也深入研究了 nodejs，我在當地得到了演出，建立了專案，甚至我對 React 和 node 感到滿意，但我不是“大師”，我只是在某個地方。
TypeScript：Boss 等級（2023-2024）
2024 年初，TypeScript 已無所不在。招募資訊要求使用 TypeScript。高級開發人員對它深信不疑。是時候升級了。
他們說：「這只是帶有類型的 JavaScript。」 「很簡單，」他們說。
他們撒謊了。 TypeScript 太讓人沮喪了。
我寫的所有程式碼都出錯了。 「這怎麼會出錯？用 JavaScript 寫就好了！」成了我每天面對虛空的吶喊。
然後我找到了馬特波科克。
Matt Pocock (https://www.mattpocock.com/ 和 https://www.youtube.com/@mattpocockuk) 是 TypeScript 的大師。他在Total TypeScript (https://www.totaltypescript.com/tutorials) 上發布的免費教學改變了一切。
他解說 TypeScript 的方式簡單易懂，不學術，也不複雜，非常實用。
實際有效的 TypeScript 學習路徑：
-
YouTube 上的 Matt Pocock 的 TypeScript 初學者播放列表
-
Total TypeScript 上的免費 TypeScript 初學者教學
-
TypeScript 官方文件（https://www.typescriptlang.org/docs/）－掌握基礎知識後很有用
-
將 JavaScript 專案轉換為 TypeScript（雖然痛苦但有教育意義）
您真正需要的 TypeScript 基礎：
-
變數和函數的型別註釋
-
物件介面
-
聯合型別（
|運算子） -
基本泛型
-
實用程式類型，例如
Partial、Pick、Omit
您首先可以跳過的內容：
-
高級通用技巧
-
映射類型
-
條件類型
-
聲明文件
當你真正需要的時候再去學習。別讓自己太累。
那些真正讓我變得更好的事情（真正的教訓）
讓我跳過那些激勵性的廢話，直接告訴你真正讓我提升的東西：
1. 我關心的建設專案
別再開發待辦事項應用了。開發一些你想用的東西吧。
我建造了：
-
習慣追蹤器（使用了一年）
-
副專案創意管理器（仍在使用）
-
Chrome 擴充功能在工作期間阻止 Twitter（節省了我的工作效率）
-
個人財務儀錶板（幫我擺脫破產）
當你使用自己開發的東西時，你會發現 bug，你會加入功能，你會在乎如何讓它變得更好。
2.閱讀其他人的程式碼
在 GitHub 上找到了一些專案。程式碼比較小，大概 500-1000 行。把它們通讀一遍。
學到了：
-
實際專案的結構
-
我在教程中從未見過的圖案
-
用更好的方法做我已經知道的事情
-
如何瀏覽程式碼庫
大概讀了30-40個專案。從中學到的東西比任何課程都多。
3. 部署一切
建了點東西？部署它。我不在乎它醜陋不堪或破損不堪。把它放到網路上去。
-
Vercel (https://vercel.com/) 用於前端 - 免費，耗時 2 分鐘
-
Railway（https://railway.app/）用於全端 - 取代 Heroku
-
Netlify（https://www.netlify.com/）適用於靜態網站 - 也免費
線上擁有真實專案 > 永遠在本地主機上擁有專案。
4. 寫下我學到的東西
大約從 2022 年開始在DEV.to (https://dev.to/) 上寫作。關於我所發現的東西的短文。
查看我在Dev.to上的帖子。
寫作迫使你去理解。人們會評論提出更好的解決方案。你也能從中學習。
5. 數小時。愚蠢的數小時
沒有捷徑。我每天要花 6-8 小時編寫程式碼，有時甚至更多。週末也一樣。每天早起，晚上加班。
不是因為我自律，而是因為我癡迷。我無法停止思考那些我試圖解決的問題。
如果你沒有一點執著，這條路會很難走。找到讓你對程式設計著迷的原因吧。
如果今天重新開始，我會走的路
根據我現在所知道的一切，以下是從零開始我要做的事情：
第 1-2 個月：HTML、CSS、JavaScript 基礎
第 1-2 週：HTML 和 CSS 基礎知識
-
W3Schools 基礎（https://www.w3schools.com/）
-
建立 3 個簡單頁面（作品集、登陸頁面、任何內容）
第 3-6 週：JavaScript 基礎知識
-
javascript.info (https://javascript.info/) - 閱讀以下部分：變數、函數、陣列、物件、循環、條件
-
建構：計算器、成績冊、隨機報價產生器
-
無需框架。只需原生 JavaScript。
第 7-8 週：DOM 操作
-
學習 querySelector、addEventListener、innerHTML
-
建造：待辦事項應用程式、計數器、簡單遊戲（石頭剪刀布）
資源：
-
javascript.info (https://javascript.info/)
-
MDN 網路文件 (https://developer.mozilla.org/)
-
網路忍者 JavaScript 播放列表
第 3-4 個月：現代 JavaScript + Async
-
ES6+ 功能：箭頭函數、模板文字、解構、擴展/休息
-
Promises 和 async/await
-
取得 API，使用 API
建置：天氣應用程式、GitHub 個人資料檢視器、電影搜尋
第 5-6 個月：React
在 JavaScript 成熟之前，不要碰 React。真的。
準備就緒後：
-
React 官方教學（https://react.dev/learn）
-
建立 3-4 個小專案（您的想法，而不是教程）
-
深入學習 Hooks：useState、useEffect、useContext
第 7-8 個月：Node.js 和後端
-
Express.js 基礎知識
-
REST API 概念
-
資料庫（MongoDB 或 PostgreSQL）
-
身份驗證（JWT 或會話）
建置：全端應用程式（待辦事項、部落格或簡單的 CRUD）
第 9-10 個月：TypeScript
現在就學習 TypeScript，而不是之前。
-
Matt Pocock 免費教學（https://www.totaltypescript.com/tutorials）
-
TypeScript 文件（https://www.typescriptlang.org/docs/）
-
將 JavaScript 專案轉換為 TypeScript
11-12個月：作品集與求職準備
-
建構3-5個真實專案
-
部署一切
-
寫下你所學到的東西
-
練習面試（不幸的是，這是必要的）
-
申請職位
哪些內容需要完全跳過
跳過：在需要之前設計模式
單例、工廠、觀察者——當你感受到它們解決的痛苦時，學習這些。
跳過：同時使用多個框架
選擇 React 或 Vue。精通其中之一。之後如有需要，再學習其他。
跳過：教學地獄
如果您已經觀看了同一主題的 3 個以上教程，請停止觀看。開始建造。
跳過：憑證
沒人問我的 Udemy 憑證。我還是去建立專案吧。
跳過：完美主義
交付可執行的程式碼。稍後再進行重構。永遠無法交付的完美程式碼毫無價值。
我的資源書籤（真的）
學習：
-
javascript.info (https://javascript.info/)
-
MDN 網路文件 (https://developer.mozilla.org/)
-
W3Schools（https://www.w3schools.com/）
-
React 文件（https://react.dev/）
-
TypeScript 文件（https://www.typescriptlang.org/docs/）
-
Node.js 文件（https://nodejs.org/docs/）
Youtube:
-
Web 開發簡化 (https://www.youtube.com/@WebDevSimplified)
-
使用 Mosh 進行程式設計（https://www.youtube.com/@programmingwithmosh）
-
Traversy媒體（https://www.youtube.com/@TraversyMedia）
對於 TypeScript：
-
Matt Pocock（https://www.mattpocock.com/ 和 https://www.youtube.com/@mattpocockuk）
-
總 TypeScript（https://www.totaltypescript.com/）
社區：
-
DEV.to (https://dev.to/) - 寫下你所學到的東西
-
freeCodeCamp (https://www.freecodecamp.org/) - 結構化課程
部署：
-
韋爾塞爾（https://vercel.com/）
-
Netlify (https://www.netlify.com/)
沒人告訴你的令人不安的真相
比你想像的要花更長的時間
我已經八年了（2017-2025），每天還在學習。學習沒有「完成」的一天。科技發展太快了。
你會不斷覺得自己很愚蠢
即使是現在，看到程式碼我也會想「這是什麼？」這種感覺永遠揮之不去。習慣於「不知道」的感覺吧。
獲得第一份工作很殘酷
我大概申請了100多個工作才找到第一份工作。不過，有了第一年的工作經驗後，一切就變得容易多了。
冒名頂替症候群是真實存在的
我有時也會在 Google 上搜尋「如何讓 div 居中」。高級開發人員仍然會用 Google 搜尋一些基本的東西。我們都在摸索著。
你不需要知道一切
精通一個技術棧。 JavaScript、React、Node、TypeScript。這足以讓你找到工作，並建立真正的產品。
我現在在哪裡（2025）
如今，我已成為全端開發者。我使用 Node.js、React、TypeScript 和 PostgreSQL 進行開發。我能夠建立人們實際使用的生產級應用程式。
我不是天才，也不是 10 倍工程師。我只是一個花大量時間編寫程式碼、破壞程式碼、修復程式碼、從錯誤中學習的人。
從 2017 年那些醜陋的 HTML 頁面，到 CCNA 考試的彎路，再到 2020 年的 PHP 求職門戶專案，再到如今的生產應用程式，這段歷程並非一帆風順。它充滿著混亂，充滿了失敗、放棄和回歸。
但我還是會這麼做。或許可以跳過 CCNA 考試那一年（雖然那段命令列經驗有幫助）。儘早專注於建置。少花點時間在教學地獄。
但核心保持不變：製造產品、運送產品、破壞產品、修復產品、學習、重複。
如果你今天開始
你現在的處境比我 2017 年時要好。有更好的資源、更好的工具、AI 來幫助除錯（但不要完全依賴它）。
但基本原理是一樣的：
投入大量時間編寫程式碼。建立你真正在乎的專案。即使不完美也要交付。坦然接受失落感，因為這種感覺永遠不會消失。
從 HTML 和 CSS 開始。然後深入學習 JavaScript。不要急於學習框架。
然後是 React。然後是 Node。然後是 TypeScript。
一步一腳印，一個專案一個專案，一個小時一個小時。
幾年後，當你回首往事時，你會意識到你已經取得了比你想像中更遠的進步。
這就是我的故事，真實的故事。沒有捷徑，沒有一夜成名，只有八年堅持不懈的努力，不斷學習，以及無數個凌晨三點盯著錯誤訊息，琢磨著哪裡出了問題。
如果這引起了你的共鳴，請分享給正在學習程式設計的人。我們都需要真實的故事，而不僅僅是精彩片段。
關注我的旅程：
我仍在學習，仍在建置，仍在犯錯。來打個招呼吧。
艾維斯·索特
全端開發人員 | JavaScript | TypeScript | React | Node.js
有問題嗎？覺得我哪裡錯了？在 Twitter 上聯絡我吧。我只是一個正在努力解決這些問題的開發者。
1) --- 會變成分隔線（上一行必須是空白）
2) # 會變成一級標題
3) ## 會變成二級標題
4) ### 會變成三級標題
5) **粗體文字**會顯示粗體文字
6) ```當第一行與最後一行會顯示程式碼
7) 請搜尋 Markdown 語法，了解各種格式
