系列：從現場踩坑到 AI 工具 — IT Diagnostic Agent 開發實錄

一個工程師最容易犯的錯

當你決定做一個 Web 工具，第一個念頭通常是：「用 React 還是 Vue？」

這是一個工程師的本能反應——先選技術棧，再想其他事。

我也差點這樣做。

但我在動手之前問了自己一個問題：「這個工具，最重要的一件事是什麼？」

答案是：它必須在任何環境下都能跑。

現場 IT 的真實環境

我在東南亞管過工廠、辦公室、飯店的 IT 基礎建設。這些地方的共同特點：

• 網路不穩定（某些廠區的網路品質非常差）
• 設備老舊（Windows 7 仍然存在）
• IT 人力有限（一個人管好幾個地點）
• 緊急狀況往往在最糟的時機發生

在這種環境下，一個「需要 Node.js、需要安裝套件、需要後端伺服器」的工具，根本沒有辦法使用。

純靜態 HTML 的優勢

純靜態 HTML 的意思是：整個工具就是一個 index.html 檔案，不需要任何後端，不需要任何安裝。

這帶來幾個關鍵優勢：

1. 零部署成本
丟到 GitHub Pages、Nginx、甚至直接用瀏覽器打開本地檔案，都能跑。

2. 離線可用（部分功能）
決策樹的邏輯是純 JavaScript，不需要網路。只有呼叫 AI API 的部分才需要連線。

3. 極低的維護負擔
沒有後端，就沒有伺服器要管、沒有資料庫要備份、沒有依賴套件要更新。

4. 安全性簡單
純靜態沒有 Server-side 的攻擊面，API Key 的安全問題交給使用者自己管理。

不用 React 的理由

React、Vue、Svelte 都是很好的框架，但它們都有一個共同的前提：你需要一個建置流程（Build Process）。

npm install
npm run build
npm run dev

這對習慣現代前端開發的工程師來說是家常便飯，但它帶來了：

• 需要 Node.js 環境
• 需要管理 node_modules（動輒幾百 MB）
• 部署時需要建置步驟
• CI/CD 需要額外設定

對 IT Diagnostic Agent 這種「越簡單越好」的工具來說，這些都是不必要的複雜度。

能用原生 JavaScript 解決的問題，就不需要框架。

純靜態也能做到的事

很多人以為純靜態 HTML 能做的事很有限，但實際上：

• 狀態管理：用 JavaScript 物件和 localStorage 就夠了
• 多語言（i18n）：自己寫一個簡單的 i18n 物件（Day 08 會詳細說明）
• 深色/淺色模式：CSS Variable + JavaScript toggle
• API 呼叫：原生 fetch() 就能呼叫 Claude、Gemini、OpenAI API
• RWD 響應式設計：CSS Flexbox + Media Query

這些都不需要框架。

什麼時候該用框架？

這不是在說框架不好，而是在說工具選擇要跟需求匹配。

如果 IT Diagnostic Agent 有以下需求，我會考慮用框架：

• 需要複雜的狀態管理（多使用者、多會話）
• 需要伺服器端渲染（SEO 需求）
• 需要大型團隊協作開發
• 需要複雜的元件複用

但這些需求都不存在。

過度工程化（Over-engineering）是 IT 工具專案最常見的死因之一。

實際的技術選擇

最終的技術棧非常簡單：

index.html       ← 所有內容
style.css        ← 樣式（後來整合進 HTML）
script.js        ← 邏輯（後來整合進 HTML）

後來甚至把 CSS 和 JS 都內嵌進 HTML，讓整個工具真的就是一個單一檔案。

這個決定讓部署變得極其簡單：複製一個檔案，就完成了。

今天的反思

「用什麼技術」永遠應該是「需求決定」，而不是「潮流決定」或「習慣決定」。

純靜態 HTML 在 2026 年不是最潮的選擇，但它是這個工具最正確的選擇。

簡單，有時候才是最好的架構。

明天預告： 純靜態 HTML 做好了，接下來要部署到 GitHub Pages。這個過程看起來很簡單，但我踩了好幾個坑，特別是那個 master vs. main 的分支問題，相信很多人都遇過。

作者：Rich Chang | IT 基礎建設工程師 | 越南・柬埔寨・台灣