ai coding 讓我開始害怕自己忘記怎麼思考

最近我有個習慣讓我有點不安——我發現我在用 AI 寫程式的時候，根本不會先想「這要怎麼做」，而是直接打開對話框，把需求貼進去，等結果出來。

有一天我突然意識到：如果 AI 今天消失了，我還會寫程式嗎？

一個讓我驚醒的小需求

事情是這樣的。我在做一個功能，有個欄位裡面存了多家公司的 tag，產品需求是：超過 3 家公司的時候，不要全部列出來，改成顯示一個「Open Model」的 tag，使用者點擊之後跳出彈跳視窗看明細。

以前的我，會直接這樣跟 AI 說：

「這欄位裡面抓出來的公司，如果超過 3 家直接幫我顯示 open model 的 tag，點開之後我要可以看到明細」

這樣說沒有錯，功能也會動。

但我發現一件事：我完全不知道 AI 怎麼做到的。

我不知道它用什麼資料結構存公司清單，不知道它怎麼判斷數量，不知道 modal 是怎麼觸發的。如果它生出來的東西有 bug，我甚至不知道要從哪裡下手。

---

我決定改變問法

後來我強迫自己先想一遍流程，再跟 AI 說：

「這個欄位抓出來的公司清單，幫我用陣列變數先儲存起來。如果公司數量超過 3 家，顯示 Open Model 的 tag，使用者點擊之後跳出彈跳視窗，裡面列出完整的公司明細。」

差在哪裡？

我在說這句話之前，腦袋裡已經跑過一遍：

• 先用陣列把資料存起來
• 判斷陣列長度是否超過 3
• 超過的話渲染 tag
• 點擊觸發modal 顯示明細

AI 只是幫我把這個邏輯寫成程式碼，邏輯是我的。

---

用程式碼來說明差異

讓我用實際的例子讓這個差異更具體。

「結果導向」的問法，AI 可能生出這種東西：

function CompanyTags({ companies }) {
  if (companies.length > 3) {
    return <span className="tag">Open Model</span>;
  }
  return companies.map(c => <span className="tag">{c}</span>);
}

功能是有了，但你看到這段 code 可能還是霧煞煞——modal 呢？明細呢？你可能要再問一次，然後 AI 幫你加上去，結果整個邏輯散在各地，你也不知道為什麼。

「邏輯導向」的問法，你腦袋裡有架構，AI 生出來的東西才是完整的：

import { useState } from "react";

function CompanyTags({ companies }) {
  const [isOpen, setIsOpen] = useState(false);

  // 1. 用陣列變數儲存公司清單（companies 本身就是陣列）
  // 2. 判斷數量是否超過 3 家
  const isOverLimit = companies.length > 3;

  return (
    <>
      {isOverLimit ? (
        // 3. 超過就顯示 Open Model tag
        <span
          className="tag open-model"
          onClick={() => setIsOpen(true)}
          style={{ cursor: "pointer" }}
        >
          Open Model
        </span>
      ) : (
        // 沒超過就正常列出
        companies.map((company, i) => (
          <span key={i} className="tag">{company}</span>
        ))
      )}

      {/* 4. Modal：顯示公司明細 */}
      {isOpen && (
        <div className="modal-overlay" onClick={() => setIsOpen(false)}>
          <div className="modal-box" onClick={e => e.stopPropagation()}>
            <h3>公司清單</h3>
            <ul>
              {companies.map((company, i) => (
                <li key={i}>{company}</li>
              ))}
            </ul>
            <button onClick={() => setIsOpen(false)}>關閉</button>
          </div>
        </div>
      )}
    </>
  );
}

這版你看得懂：陣列在哪、判斷在哪、modal 怎麼開、怎麼關。哪裡出問題，你知道要去找哪裡。

---

兩種問法的本質差異

	結果導向	邏輯導向
你在做什麼	描述你要什麼	描述怎麼做到
AI 的角色	幫你解決問題	幫你把想法寫成 code
出 bug 時	不知從何下手	知道要去哪裡找
長期影響	邏輯能力退化	持續在練習拆解問題

---

其實這不是 AI 的問題

仔細想想，這個問題不是 AI 造成的，而是我讓自己跳過了思考的步驟。

以前沒有 AI 的時候，我要自己 Google、自己拼湊、自己想架構——那個過程雖然痛苦，但正是那個過程在鍛鍊邏輯。

AI 的出現，讓這個過程可以跳過。但跳過不代表不需要。

所以我現在給自己定了一個規則：

在打開 AI 之前，先在腦袋裡或紙上把步驟拆一遍。

不需要想到 code 層級，但至少要想到：資料怎麼存、判斷條件是什麼、觸發什麼事件、呈現什麼結果。

這樣 AI 就回到它該有的位置——是工具，不是大腦。

---