過去的職涯兩年多，我原本是一名 UI/UX 設計師。

在前一份工作裡，我接觸最多的是各式各樣的網頁畫面與介面重構。

那時候的世界對我來說很單純：

打開 Figma、整理 Flow、把畫面畫漂亮，確認使用者操作起來合理，接著把設計稿交給前端工程師。

然後就很容易進入一個設計師與工程師之間非常經典的場景。

「這個應該做得到吧？」

「……可以是可以。」

「那就這樣做？」

「但實作上可能會有一些問題。」

而當年的我，大概只聽懂第一句。

現在立場對調之後，我才慢慢明白，那個工程師當年的沉默可能不是在思考人生，而是在腦中計算：

「這個設計到底要多寫幾百行？」

以前的我可以很快樂地產圖。

這裡動畫一下、那裡滑一下，這個元件要跟著畫面跑，那個區塊最好還可以漂亮地展開。

設計稿上的一句：

「這裡順順地出現就好。」

背後可能已經有一名前端工程師默默吐血。

但那時候的我，甚至連最基本的 HTML 都還沒有真正理解。

我的程式能力，大概就是 Hello World

如果要問當時的我：

「妳會寫程式嗎？」

我的程度大概是這樣：

<h1>Hello, World!</h1>

看到這行，我還可以很有自信地說：

• <h1> 是大標題
• Hello, World! 是畫面上會出現的文字
• </h1> 是把標籤關起來

很好。

我的魔法值大概就到這裡。

再往下一點，只要 JavaScript 開始出現：

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  console.log("被按了");
});

我的腦袋就會瞬間冒出一大堆問題。

btn 應該是按鈕吧？

document 又是誰？

為什麼中間一直有 .？

"click" 看英文是點擊！但…為什麼要放在括號裡？

() => {} 又是什麼東西？

最重要的是——

到底哪一行先執行？

有趣的是，這些東西如果一個一個查，我其實都查得到答案。

const 是宣告變數。

querySelector 是找元素。

addEventListener 是監聽事件。

很好。

全部都查完了。

然後我重新看一次整段程式碼。

還是看不懂。

我決定離開熟悉的設計世界

後來我決定離開純設計的領域，開始正式學習程式。

那是一段將近半年的學習過程。

從 HTML 手刻網頁開始，慢慢碰 CSS、JavaScript、Git，再一路接觸更多前端相關的內容。

一開始我其實想得很簡單。

以前學設計工具的時候，就是：

今天學一個功能。

明天再學一個功能。

用久了之後，自然就熟悉了。

所以我那時候也天真地以為：

「把 JavaScript 的語法全部學會，我應該就會寫程式了吧？」

結果事情完全不是我想的那樣。

上課沒多久，我就發現自己的學習速度開始跟不上。

老師已經進入下一個章節，我的靈魂還停留在上一頁：

「等一下……剛剛那個 function 到底為什麼會被執行？」

別人在寫作業，我在查語法。

別人在 Debug，我在 Debug 自己的人生。

甚至到後來，我上課期間做得最多的事情之一，好像不是寫 Code，而是跑去跟 ChatGPT 心靈療傷。

「我是不是不適合寫程式？」

「為什麼別人看一次就懂？」

「為什麼我昨天才學過，今天又忘記？」

「這東西我是不是已經問第三次了？」

答案通常是：

對。

第三次了。

然後我發現，我好像是金魚腦

我真的很容易忘。

學一個，忘一個。

再學一次。

過幾天再忘一次。

最後只好再學第三次。

有時候看著身邊的人學得很快，難免會開始懷疑：

是不是只有我需要花這麼多時間？

但理解得比較慢，好像也沒有什麼作弊的方法。

我唯一能做的，就是花更多時間把同一件事情拆開。

不懂就問。

問完還是不懂，就換個方式問。

文字看不懂，就畫流程圖。

流程圖還是不懂，就找一個最小的例子自己跑一次。

直到有一天，我慢慢發現：

我的問題可能不是記憶力真的只有七秒。

而是以前的我一直在記「拼圖」，卻不知道整張圖長什麼樣子。

我以為會語法，就代表會寫程式

這可能是我學程式早期最大的誤會。

學 JavaScript 的時候，我陸續認識了：

if
for
function
map
filter

後來也開始接觸 React。

每一個東西單獨拿出來，好像都知道它是什麼。

老師說：

「這是 map。」

我點頭。

「這是 useEffect。」

我再點頭。

「這是 API。」

很好，我繼續點頭。

我曾經以為，只要把這些東西全部記起來，它們有一天就會自動組成一個完整的程式。

直到真正開始碰專案之後，我才發現——

根本不是這樣。

如果上課是在一片一片認識拼圖，

那真實專案大概就是有人突然把三千片拼圖全部倒在桌上，然後跟妳說：

「這個 Bug 看一下。」

我：

「……哪一片先？」

那時候我才真正發現：

我缺的其實不是更多語法，而是把這些語法串成「流程」的能力。

原來我真正看不懂的是「流程」

以前看到這段：

const btn = document.querySelector("#btn");

btn.addEventListener("click", () => {
  console.log("被按了");
});

我會把它拆成很多名詞：

• const
• btn
• document
• querySelector
• addEventListener
• click
• 箭頭函式

但後來我開始換一個方式看。

不是問：

「這個單字叫什麼？」

而是問：

「現在到底發生了什麼事？」

如果把剛剛的程式碼變成流程，其實是：

找到畫面上 id="btn" 的元素
        ↓
把它存進 btn
        ↓
幫 btn 註冊 click 事件
        ↓
先等待
        ↓
使用者真的點擊按鈕
        ↓
執行 () => {}
        ↓
console.log("被按了")

突然之間，那段原本像咒語一樣的程式碼，好像沒有那麼可怕了。

我後來才慢慢理解：

程式碼不是一堆互不相關的單字。

它其實一直都在描述：

• 誰做了什麼？
• 什麼時候做？
• 誰觸發誰？
• 資料從哪裡來？
• 資料最後去了哪裡？

只是以前的我，還看不到那些線。

真正開始工作後，我才看到拼圖完整的樣子

後來很幸運地，我有機會進入一家科技公司，正式接觸真實的前端專案。

也是從那時候開始，我才慢慢看懂以前學過的東西，究竟會出現在什麼地方。

以前學 onClick，我只知道：

點下去會執行一個東西。

但真正進到專案後，一個使用者點擊可能是：

使用者點擊
    ↓
觸發 onClick
    ↓
執行 function
    ↓
呼叫 API
    ↓
後端處理資料
    ↓
回傳 response
    ↓
前端更新資料
    ↓
畫面重新 render

以前學過的那些東西，其實一直都在。

只是以前我看到的是一塊一塊的拼圖。

工作之後，才開始慢慢知道它們應該放在哪裡。

也開始遇到更多以前課堂上沒有真正感受到的問題：

• 為什麼 API 明明是 200，畫面卻還是舊資料？
• 這個 Bug 到底是前端問題，還是後端問題？
• 為什麼一進頁面 API 就自己打出去了？
• 為什麼 useEffect 又執行了一次？
• Request、Response、State 到底是怎麼串在一起的？
• 別人 Code Review 說這樣不能寫，原因到底是什麼？

這些問題，也成為後來我真正開始學會「工程」的地方。

這 30 天，不是一個大神的教學

這裡不會是一個資深工程師站在山頂上告訴大家：

「這很簡單，只要這樣、這樣、再這樣就好了。」

因為直到現在，我仍只是一個修煉中的麻瓜，並不是那些身經百戰、超級厲害的工程師大神。

這裡比較像是一個：

還在修煉中的初階魔法師，留下自己的修煉筆記。

接下來的 30 天，我會重新整理那些曾經真的把我卡住的東西。

JavaScript、React、API、前後端資料流、Debug、Git、後端架構、Cloud、Security……

有些可能是很基礎的問題。

甚至基礎到有人會覺得：

「這不是大家都知道嗎？」

可是沒關係。

因為以前的我真的不知道。

而且我相信，現在一定也有人正坐在電腦前，看著某一段程式碼想著：

「所以……到底哪一行先跑？」

如果有的話，

歡迎加入金魚腦俱樂部。

寫給跟我一樣的麻瓜

這一路，我走了很多繞路。

直到現在，我也不敢說自己找到的是最好的學習方式。

但這些坑，確實都是我自己踩進去過的。

那些看不懂的程式碼、莫名其妙的 Bug、被 Code Review 打回來的地方、搞不清楚的 API、第一次看到後端架構時滿頭問號的瞬間，都是真的。

所以我想把它們留下來。

不是因為我已經成為了一個很厲害的工程魔法師。

而是因為我還記得：

當一個什麼都看不懂的麻瓜，是什麼感覺。

如果你跟我一樣，不是那種看兩次就可以融會貫通的主角型腦袋；

如果你也常常學了又忘、忘了再學；

如果你偶爾會看著別人的進度，懷疑自己是不是走得太慢——

希望接下來這 30 天的修煉筆記，也能陪你一起走一小段。

🪄 今日修煉心得

有時候不是我記不住，而是我還沒有找到能把知識串起來的那條線。

看不懂一整段程式碼時，與其逼自己記住每個語法，不如先問：

「現在到底發生了什麼事？」

下一篇，想從這個問題繼續往下拆：

為什麼每一個單字我都查得懂，程式碼組起來卻還是看不懂？