Dev Log: Building a Browser-Local Taiwan DCA Investment Calculator

這是 LocalPapa Notes 開發紀錄系列的最新篇。這次的主角是台股定期定額試算器——一個讓你在瀏覽器裡算清楚「每個月存多少、存幾年、報酬率多少，最後會變多少錢」的工具。

為什麼要做這個工具

定期定額（DCA，Dollar-Cost Averaging）是台灣最主流的理財入門路徑，尤其台股零股、ETF 定期定額近年大幅普及。但市面上常見的試算工具有幾個問題：

把你的數字送上伺服器。 輸入月投金額和年數，按下「計算」，請求就飛出去了——這是不必要的隱私風險。
只給一個答案。 大多數工具預設一個固定報酬率，但真正有用的問題是：「保守 5%、穩健 8%、積極 12%，三種情境下結果差多少？」
缺乏手續費意識。 台灣買 ETF 有券商手續費（通常 0.1425%，可能有折扣），這個小數字長期下來會侵蝕本金。

我們的目標很清楚：全程本地運算、支援多情境比較、把手續費納入計算。

核心數學：逐月累積的複利

試算的核心是一個迴圈，每個月執行一次：

`` 每月實際投入 = 月投金額 × (1 - 手續費率) 月利率 = (1 + 年化報酬率)^(1/12) - 1 本月期末餘額 = 上月餘額 × (1 + 月利率) + 每月實際投入 ``

用年化報酬率換算成月利率，是為了讓複利按月滾動、貼近實際 ETF 定期定額的運作方式。手續費直接在每筆投入時扣除，而非期末統一扣——這讓費用的複利效果也一併被計算進去。

三個情境，一張表

工具最核心的設計是多情境並排比較：

| 情境 | 年化報酬率 | 說明 | |------|-----------|------| | 保守 | 5% | 市場平均偏低估算 | | 穩健 | 8% | 台股長期平均附近 | | 積極 | 12% | 強勢多頭年份 |

三欄同步更新，讓使用者一眼看出「報酬率的差距長期下來有多誇張」。這是純粹本地運算的優勢——三套計算同時跑，沒有任何延遲。

Canvas 面積圖：讓複利「看得見」

數字之外，我們加了一張 Canvas 面積圖，X 軸是年份，Y 軸是金額。

藍色虛線：累積投入金額（直線增加）
綠色實線 + 填色：資產總值（隨時間加速上揚）

兩條線之間的「綠色面積」就是累積獲利，而且這個面積會隨時間越來越大——複利的滾雪球效果在圖上一目了然，比任何文字說明都直觀。圖表響應式，視窗縮放時自動重繪。

年度明細表：逐年追蹤

結果區最下方是一張年度明細表，列出每年底的：

累積投入金額
資產總值
累積獲利
報酬率（%）

這讓使用者不只看終點，也能看整段路的軌跡——哪一年開始「獲利超過本金」，複利的拐點在哪裡，清清楚楚。

常見問題的設計

FAQ 區段處理了幾個使用者會真正問到的問題：

報酬率要填多少才合理？ 台股長期年化大約 8–10%，ETF 可以參考過去十年 CAGR，但不代表未來。
手續費要怎麼填？ 台灣標準手續費 0.1425%，券商通常有折扣方案（如六折），填 0.085% 更接近實際。
有沒有考慮通膨？ 沒有。這個工具算的是名目報酬，通膨調整讓工具邏輯複雜化，而且通膨對「存不存錢」的行動影響不大。

全程本地的意義

輸入月投金額代表你的財務規劃。這個數字不應該離開你的瀏覽器。

整個試算在你的裝置上完成，關掉網路也能跑，不需要帳號、不需要登入、計算結果不經過任何伺服器。

這個工具解答的問題

和系列的其他工具一樣，這個工具回答的還是同一個核心問題：這件原本要靠線上服務才能做的事，能不能完全在瀏覽器裡、即時完成、而且比線上服務更可信任？

對 DCA 試算來說，答案是：可以，而且還更快。

想追蹤系列更新？把 LocalPapa Notes 加入書籤。

This is the latest post in the LocalPapa Notes dev-log series. The subject this time is the Taiwan DCA Investment Calculator — a tool that lets you answer "how much will I have if I invest a fixed amount every month, for X years, at Y% return?" entirely in the browser.

Why we built this

Dollar-cost averaging (DCA) is the most common entry point into personal finance in Taiwan, especially as fractional-share and ETF periodic investing has grown massively in recent years. But most DCA calculators on the market have a few problems:

They send your numbers to a server. You type your monthly investment and hit "calculate" — and that request leaves your device. That's an unnecessary privacy risk for financial information.
They give one answer. Most tools let you set one return rate, but the real question is: "what's the difference between a conservative 5%, a steady 8%, and an aggressive 12% over time?"
They ignore fees. Buying ETFs in Taiwan incurs brokerage fees (typically 0.1425%, often discounted). That small percentage chips away at principal over decades.

Our goal was clear: compute entirely locally, support multi-scenario comparison, and factor in fees.

Core math: month-by-month compound accumulation

The engine is a loop that runs once per month:

`` net monthly = monthly amount × (1 - fee rate) monthly rate = (1 + annual rate)^(1/12) - 1 end-of-month balance = previous balance × (1 + monthly rate) + net monthly ``

Converting the annual rate to a monthly rate lets the compounding roll monthly, which matches how ETF periodic investing actually works. The fee is deducted from each contribution at entry, not at the end — so the compounding effect of the cost is also captured.

Three scenarios, one table

The centrepiece of the tool is side-by-side multi-scenario comparison:

| Scenario | Annual return | Notes | |----------|--------------|-------| | Conservative | 5% | Below-average market estimate | | Balanced | 8% | Near Taiwan stock market long-run average | | Aggressive | 12% | Strong bull-market years |

All three columns update in sync. Users can see at a glance how dramatically a difference in return rate compounds over decades. This is where local computation shines — three full simulations run simultaneously, zero latency.

Canvas area chart: making compounding visible

Beyond the numbers, we added a Canvas area chart with years on the X-axis and amount on the Y-axis.

Blue dashed line: cumulative amount invested (grows linearly)
Green solid line + fill: total portfolio value (accelerates over time)

The green area between the two lines is the cumulative gain — and it widens as time goes on. The snowball effect of compounding is visible in a way no text can match. The chart is responsive and redraws automatically when the window resizes.

Year-by-year breakdown table

Below the chart, a year-by-year table shows for each year-end:

Cumulative amount invested
Total portfolio value
Cumulative gain
Return rate (%)

This gives users the full trajectory, not just the endpoint — which year does the gain exceed the principal? Where's the compound inflection point? It's all there.

FAQ design decisions

The FAQ section addresses questions real users actually ask:

What return rate is realistic? Taiwan's market has averaged roughly 8–10% annually over the long term; ETFs can be benchmarked against their trailing 10-year CAGR, but past returns don't guarantee future ones.
What fee rate should I use? The standard Taiwan brokerage fee is 0.1425%; many brokers offer discounts (e.g. 60%), putting the effective rate around 0.085%.
Does this account for inflation? No. This tool computes nominal returns. Adding inflation adjustment complicates the model without meaningfully changing the core message: invest regularly.

Why fully local matters here

Your monthly investment amount is part of your financial picture. That number shouldn't leave your browser.

The entire simulation runs on your device. It works offline. No account, no login, no data passes through any server.

The same question, again

Like every other tool in this series, this one answers the same core question: can something that used to require trusting an online service be done entirely in the browser, instantly, and in a way that's actually more trustworthy?

For DCA simulation, the answer is: yes — and faster.

Want to follow the series? Bookmark LocalPapa Notes.