工作經歷 Work Experience
日本 NEC 集團｜統智科技股份有限公司
資深前端工程師 Senior Frontend Engineer
2024.11–2025.08｜Taipei, Taiwan
工作職責與團隊帶領
- 擔任前端組 Leader，帶領 3 名前端工程師，負責技術指導、任務協調與開發問題排解
- 參與前端架構設計與技術決策，透過 Code Review 維持程式品質與團隊開發一致性
- 協助團隊成員釐清技術問題與設計思路，透過技術討論、Code Review 與文件建立進行經驗分享與知識傳承
- 與 PM、Backend 及相關團隊協作，參與需求釐清、技術方案評估與開發落地
前端架構與工程化改善
- 推動 Vue 2 → Vue 3 技術升級，重新整理元件架構與 TypeScript 型別設計，提升系統可維護性與後續擴充能力
- 導入 Monorepo 架構，整合多個應用與共用套件，改善跨專案程式碼共享與維護方式
- 重構 i18n 多國語系架構，統一 JSON 結構、Key 命名與管理規則，降低多語系功能的維護成本
- 提案並導入 Node.js 至內部開發流程，擴充前端團隊的開發工具與應用範圍
開發規範與知識分享
- 從 0 到 1 建立前端開發規範，包含 Conventional Commits、Branch Naming、ESLint、Prettier 等團隊共同開發標準
- 規劃共用元件與專案資料夾結構，提升不同專案間的開發一致性與可維護性
- 建立 Onboarding Guide，整理開發環境、專案架構與團隊開發流程，降低新人熟悉專案的門檻
- 建立並維護 Frontend Wiki，將架構設計、開發規範與實務經驗文件化，作為團隊知識共享與技術傳承的基礎
主要技術： Vue 2 / Vue 3、TypeScript、JavaScript、Node.js、Monorepo、i18n、ESLint、Prettier、Git
藍星球資訊股份有限公司
2017.10–2024.11｜Taipei, Taiwan
職位歷程： 前端工程師 → 高級前端工程師 → 主任（前端組）
主任（前端組）
2022–2024
團隊管理與技術帶領
- 擔任研發部前端組組長，帶領 4 名前端工程師，負責團隊管理、人力配置、任務規劃與成員績效考核
- 依據專案需求、時程與團隊成員能力進行工作分配，協調多個專案的前端開發資源
- 作為 PM 與 RD 之間的溝通橋樑，協助需求釐清、技術可行性評估與開發落地
- 負責團隊 Code Review，透過 GitLab Merge Request 檢視程式品質、實作方式與開發一致性
- 協助團隊成員處理開發與技術問題，透過技術討論與經驗分享進行知識傳承
工程改善與知識分享
- 建立新人訓練與 Onboarding 機制，協助新進工程師熟悉開發流程、專案架構與團隊開發方式
- 擔任前端讀書會組長，規劃內部學習與技術分享主題，推動團隊技術交流與知識共享
- 參與公司後台系統架構與維運流程改善，提升共用功能的維護與開發效率
代表專案
- 桃園市儀表板（RD Leader）：導入 Nuxt 3，參與前端架構規劃與城市數據視覺化平台開發
- 桃園資料開放平台（RD Leader）：擔任專案 RD 主要溝通窗口，協調開發事項與 Issue 分配，參與地方政府資料平台建置
獎項與成就
- 111 年度最佳表現獎：獲公司年度績效表揚，由總經理親自頒發
高級前端工程師
2019–2022
- 擔任多項專案 RD Leader（專案 RD 主要協調角色），負責開發事項協調、Issue 分配與專案進度推進
- 負責前端需求實作與任務拆解，並與 PM、UI/UX、Backend 協作完成專案交付
- 參與公司後台系統模組化與前端架構改善，累積大型專案架構與長期維護經驗
- 評估既有技術與後續維護需求，在新專案導入 Vue 2，將專案開發由原先以 jQuery 為主的模式轉向 Vue 元件化開發，後續負責專案持續採用 Vue 技術棧
代表專案
- 灃食飲食常識庫
- 國家人權博物館檔案系統（RD Leader）
- 臺史博校園生活記憶庫、臺灣報刊資料庫、影音資料庫、大溪文化資源網（RD Leader）
- 電商平台改版（RD Leader）
前端工程師
2017–2019
- 負責網站前端功能開發、互動功能與資料呈現，與 UI/UX、Backend 協作完成專案需求
- 參與文化典藏、政府開放資料與知識管理平台等不同領域專案，累積不同類型資訊平台的開發經驗
- 主要使用 JavaScript、jQuery、HTML、CSS 進行前端開發，建立前端開發與跨團隊協作基礎
代表專案
- 臺北市議會新聞知識系統
- 臺北市政府資料開放平台
- 國家漫畫史料調查與典藏計畫
- 臺灣歷史博物館研究資源管理系統
- 經濟部標準檢驗局知識管理入口網
主要技術： Vue 2 / Vue 3、Nuxt 2 / Nuxt 3、TypeScript、JavaScript、jQuery、HTML、CSS、Git / GitLab、a11y
工程實務 Engineering Cases
公司後台模組化
背景與問題 Background
公司承接的專案大多需要建置後台管理系統。雖然各專案的業務內容與資料欄位不同，但介面結構與操作模式高度相似。
| 類型 | 內容 |
|---|---|
| 共通結構 | Header、Footer、Sidebar、列表頁、詳目頁、編輯頁 |
| 專案差異 | 主題顏色、顯示欄位、表單內容與資料相關設定 |
每個新專案若重新實作相似頁面，會產生重複開發並增加初期建置時間；各頁面若分別判斷角色與操作權限，也會使邏輯分散、提高後續調整與維護的複雜度。
工程目標
- 降低重複開發：將共用 Layout、列表頁、詳目頁與編輯頁模組化，讓不同專案主要處理實際差異
- 統一權限管理：集中管理頁面與操作功能的權限規則，避免判斷邏輯散落於各個頁面與元件
設計 Design
1. 權限控制 Permission Control
後台系統需要依照不同角色控制可存取的頁面與可執行的操作，因此將權限機制集中管理，避免各頁面各自實作權限判斷。
| 權限層級 | 控制範圍 |
|---|---|
| 頁面層級 | 控制使用者能否進入特定頁面；沒有權限時，即使手動輸入 URL 也無法進入 |
| 元件／操作層級 | 控制頁面中的按鈕、操作功能等 UI 是否依使用者權限顯示 |
權限規則集中後，新增角色或調整權限可從統一的位置處理，也不需要在每個按鈕分別撰寫授權判斷。
2. 列表頁模組化 Config-driven List
後台列表頁通常包含篩選、表格與分頁等共通結構，因此將這些 UI 與操作模式封裝為可配置的共用元件。
各專案提供以下 Config 設定，即可產生所需的列表頁：
- 顯示欄位與欄位設定
- 查詢與篩選條件
- 列表操作功能
- 各專案需要的其他設定
共通的頁面結構與行為集中維護，各專案則保留調整顯示欄位及操作功能的空間。
3. 編輯頁動態欄位 Schema-driven Form
編輯頁使用 Object 定義 UI Schema，透過 type 決定對應的表單元件，例如 input、select、date，以及其他專案需要的欄位型態。
{
label: '商品名稱',
field: 'name',
type: 'input',
required: true
}| Schema 設定 | 用途 |
|---|---|
| 欄位名稱與資料 Key | 定義欄位與資料的對應關係 |
| 顯示順序 | 調整欄位排列 |
| 欄位型態 | 決定使用的表單元件 |
| 必填設定 | 定義欄位是否必填 |
| 專案欄位配置 | 配合不同專案調整表單內容 |
共用元件再根據 Schema 產生對應的編輯頁，讓不同專案主要透過調整欄位設定完成表單需求，而不需要重複撰寫大量相似的 Form UI。
主要考量包括：
- 減少重複實作：將相似的表單結構抽離為共用元件
- 提升調整效率：新增、移除或調整欄位時，優先從 Schema 設定處理
- 維持一致性：統一不同後台專案的表單結構與元件使用方式
- 降低維護成本：集中維護共通的表單行為與 UI
工程考量 Engineering Considerations
模組化的目標不是抽象化所有功能，而是共用高度重複且相對穩定的結構與行為。
| 考量 | 處理方式 |
|---|---|
| 共用性 | 優先抽離反覆出現的 UI 結構與操作模式 |
| 可配置性 | 透過 Config / Schema 處理欄位、查詢條件與操作功能等差異 |
| 可維護性 | 集中管理共通邏輯，避免相似程式碼分散在不同專案與頁面 |
| 擴充彈性 | 無法由既有 Config / Schema 涵蓋的特殊需求，保留客製實作空間 |
隨著後期專案的客製化需求增加，也持續調整共用化的範圍。例如早期部分特定功能因 API 回傳格式較固定，曾能納入共用設計；後續因不同專案的 API 與業務需求差異增加，便不再將其作為固定的 Config 項目，而是保留各專案自行處理的彈性。
Layout、權限控制、列表頁與編輯頁以共用元件、Config 或 Schema 統一處理；專案特有的業務需求則保留個別實作彈性，在共用與客製化之間取得平衡。
專案經歷 Projects
以下為任職藍星球資訊期間參與的專案，依時間由近至遠排列。
建置前後台，以 Open Data 為主體。
Role： RD Leader
Tech Stack： Vue 3 / Nuxt 3
- 擔任專案 RD 主要協調角色，負責與 PM 溝通及 RD 工作分配
- 參與前、後台開發
桃園市儀表板
建置城市數據視覺化前台，以圖表呈現及圖表間的資料連動為主要功能。
Role： RD Leader
Tech Stack： Nuxt 3
- 擔任專案 RD 主要協調角色，負責與 PM 溝通及 RD 工作分配
- 提議並導入 Nuxt 3，成為公司專案中首個採用 Nuxt 3 開發的專案
- 參與城市數據視覺化與圖表間資料連動功能開發
某電商平台改版
既有電商系統改版，除原有功能外，包含購物流程優化、非會員購買，以及特定商品需單獨結帳等需求。
Role： RD Leader
Tech Stack： Vue 2 / Nuxt 2 / i18n / GTM
- 擔任專案 RD 主要協調角色，負責與 PM 溝通及 RD 工作分配
- 負責前、後台商品相關功能
- 負責購物車相關功能
- 串接 GTM
- 實作多國語系（i18n）
各分類包含大量資料欄位，並具有上稿審核流程；主題專區提供近 20 種元件供使用者編輯內容。
Role： RD Leader
Tech Stack： Vue 2 / Nuxt 2 / a11y
- 擔任專案 RD 主要協調角色，負責與 PM 溝通及 RD 工作分配
- 參與前、後台功能開發
- 實作無障礙相關需求
Role： RD Leader
Tech Stack： Vue 2 / Nuxt 2 / a11y
- 擔任專案 RD 主要協調角色，負責與 PM 溝通及 RD 工作分配
- 負責所有前、後台前端開發
- 實作無障礙相關需求
Role： RD Leader
Tech Stack： Vue 2 / Nuxt 2 / Chart.js
- 擔任專案 RD 主要協調角色，負責與 PM 溝通及 RD 工作分配
- 負責所有前、後台前端開發，包含首頁、典藏資料介接等功能
- 改寫圖片編輯套件
- 使用 Chart.js 實作圖表相關功能
經濟部標準檢驗局－知識管理入口網
Tech Stack： JavaScript / jQuery / Gridstack
- 負責首頁相關功能
- 負責知識文件資料介接
- 負責帳號權限相關功能
- 使用 Gridstack 實作版塊拖曳功能
國立臺灣歷史博物館－研究資源管理系統
Tech Stack： JavaScript / jQuery / Bootstrap
- 使用 Bootstrap 進行頁面切版
- 負責部分模組資料介接
- 整合影片播放套件
- 改寫圖片剪裁套件
文化部－國家漫畫史料調查研究及數位典藏計畫
Tech Stack： JavaScript / jQuery
- 負責後台部分模組資料介接
Tech Stack： JavaScript / jQuery / ECharts
- 參與前、後台前端開發
- 負責新聞資料介接
- 負責圖表資料介接
- 負責部分帳號權限相關功能
- 使用 ECharts 實作圖表相關功能