從閱讀程式碼進入 AI 協作

前面幾天先透過 Todo List，慢慢認識 React 與 TypeScript 中常見的寫法，例如 Component、Props、State、useEffect()、type、interface 和泛型。

今天開始從頭建立另一個 React + TypeScript 專案。我會將需求交給 AI，觀察它會怎麼完成第一版，再試著理解與修改它產生的內容。

這次要做什麼專案？

這次想做的是「漫畫與動畫收藏清單」。平常看漫畫或動畫時，作品可能處於想看、觀看中或已完成等不同狀態。當作品數量變多，就可能忘記有哪些還沒開始，或哪些已經看完。

整理出第一版需要的功能後，我把需求交給 AI，大致如下：

1.請使用 React、TypeScript、Vite 和一般 CSS，建立一個漫畫與動畫收藏清單。

2.使用者可以新增漫畫或動畫、選擇及修改觀看狀態、顯示與刪除收藏作品，並使用 localStorage 保存資料。

3.請將畫面拆成適合的 Component，但不要加入後端、UI 套件或需求以外的功能。

先讓它根據需求建立第一版專案。我負責決定專案要做什麼，AI 負責產生程式碼。完成後，我再運用前面學過的概念，理解它做了什麼，並思考有哪些地方需要修改。

AI 交出了什麼？

專案名稱：

manga-anime-watchlist

第一版包含了原先提出的主要功能：

• 輸入作品名稱
• 選擇漫畫或動畫
• 選擇想看、觀看中或已完成
• 將作品加入收藏清單
• 修改已加入作品的狀態
• 刪除收藏項目
• 使用 localStorage 保存資料

AI 也將專案拆成不同的檔案：

src/
├─ components/
│  ├─ AddItemForm.tsx
│  ├─ CollectionItem.tsx
│  ├─ CollectionList.tsx
│  └─ PageHeader.tsx
├─ constants/
│  └─ collection.ts
├─ types/
│  └─ collection.ts
├─ utils/
│  └─ storage.ts
├─ App.tsx
├─ App.css
├─ index.css
└─ main.tsx

從檔案名稱可以先大概猜出它們的用途：

• AddItemForm：新增作品的表單
• CollectionList：顯示整份收藏清單
• CollectionItem：顯示單筆作品
• PageHeader：顯示標題與收藏數量
• types：放置作品相關的型別
• constants：放置固定使用的選項
• storage：負責保存與讀取資料

雖然還沒有仔細閱讀每一個檔案，但和剛開始接觸 React 時相比，至少現在可以透過名稱和資料夾結構，先推測這個專案大概是怎麼組成的。

逐漸熟悉並看懂程式碼

打開 App.tsx 後，看到了之前認識過的 useState()：

const [items, setItems] = useState<CollectionEntry[]>(loadItems)

也看到了 Day 13 認識的 useEffect()：

useEffect(() => {
  saveItems(items)
}, [items])

除此之外，還能看到資料與函式透過 Props 傳給 Component：

<CollectionList
  items={items}
  onStatusChange={updateStatus}
  onDelete={deleteItem}
/>

看到這些程式碼也不代表我已經可以立刻解釋完整的執行流程，但至少能先嘗試看出用意：

• items 是保存收藏資料的 State
• useEffect() 會在 items 改變後執行
• CollectionList 接收收藏資料與處理函式
• 整個畫面被拆成多個 Component

當然也有還看不懂的地方

畢竟是讓 AI 直接協助產生程式碼，所以一開始也會預想到內容不會全部都是我已經學過的內容。

大致翻了一下，新增作品的函式中出現了：

function addItem(entry: Omit<CollectionEntry, 'id'>) {
  // ...
}

下拉選單也出現了：

event.target.value as WatchStatus

第一眼看到 Omit 和 as 時，我完全聯想不到這又是什麼東東。另外，雖然已經知道 useEffect() 的基本用途，但它為什麼會和 localStorage 放在一起、收藏資料又是怎麼被保存和讀取的，也需要從程式的執行流程慢慢理解。

這些陌生的內容不一定代表 AI 寫錯了，但也不能因為是 AI 產生的，就直接認為所有寫法都沒有問題。

將 AI 的第一版保留下來

我將這個專案上傳到了 GitHub：GitHub：manga-anime-watchlist

之後可以藉由這第一筆 Commit 回頭看 AI 根據第一份需求交出的原始版本。接下來如果理解或修改了某些程式碼，就可以另外建立新的 Commit。這樣不只能保留第一版，也能從紀錄中比較前後發生了哪些變化。

AI 寫完不代表專案完成了

這次所說的「把程式碼交給 AI」，並不是把思考也一起交出去。

AI 可以快速建立畫面、拆分 Component 並完成基本功能，但後續仍需要繼續慢慢去確認：

• 它是否正確理解需求
• Component 為什麼要這樣拆分
• State 放置的位置是否合理
• Props 如何在 Component 之間傳遞
• TypeScript 型別是否清楚
• 實際操作時有沒有問題
• 如果需求改變，應該從哪裡修改

從自己已經認得的部分開始，一邊閱讀 AI 產生的程式碼，一邊提出問題、進行修改與測試，慢慢了解這個專案究竟是怎麼運作。

今日回顧

• 開始建立新的漫畫與動畫收藏清單
• 專案使用 React、TypeScript、Vite 和一般 CSS
• 第一版程式碼由 AI 根據需求產生
• AI 將畫面拆成多個 Component，並另外整理型別、固定選項與儲存功能
• 專案裡同時出現了熟悉和陌生的寫法
• 第一版已經上傳到 GitHub，之後可以透過 Commit 比較修改紀錄
• AI 產生程式碼後，仍然需要自己理解、判斷、修改與測試

前面十九天比較像是在準備閱讀程式碼需要的基本工具，今天則正式把這些概念帶進另一個專案。
先這樣，下篇見!