「積立投資の複利効果をグラフで見せるツールを作りたい」「Electronでデスクトップアプリを開発してみたい」「Chart.jsで資産推移グラフを実装したい」——そんな要望に応える記事です。本記事では、月々の積立額・運用期間・利回りを入力すると将来の資産額をリアルタイムで計算・グラフ表示するシミュレーターの開発手順を、実際に動くWebデモを交えながら解説します。Electron + Chart.js + JavaScript ES6+の構成で、Windows・Mac・Linux対応のデスクトップアプリとして配布できます。
どんな場面で使えるか
ファイナンシャルプランナー・保険代理店のツールとして、顧客にNISAやiDeCoの複利効果を視覚的に説明するツールとして活用できます。Webブラウザ不要のデスクトップアプリなら、インターネット接続なしでも動作します。
家計管理・資産形成の自己学習ツールとして、「月3万円を20年間積み立てると利回り5%でいくらになるか」をその場で計算できます。グラフで元本と運用益の差が視覚化されることで、長期投資の効果が直感的に理解できます。
社内の研修・勉強会ツールとして、金融リテラシー向上のための社内ツールとして配布できます。Electronアプリなら社員のPCにインストールするだけで使えます。
| 用途 | 対象ユーザー | 配布形式 |
|---|---|---|
| 顧客向け説明ツール | FP・保険代理店・証券会社 | Electronアプリ（.exe/.dmg） |
| 家計管理ツール | 個人・家族 | Webアプリ・スマホ対応 |
| 社内研修ツール | 企業・団体 | 社内配布アプリ |
実際に動かしてみる（デモ）
以下は実際に動作するWebデモです。月々の積立額・積立期間・想定利回りを入力して「シミュレーション実行」を押すと、複利計算で将来の資産額を算出し、Chart.jsで資産推移グラフをリアルタイムに描画します。
積立投資シミュレーター
将来の資産形成をシミュレーション
投資条件を入力
シミュレーション結果
💡 このシミュレーターについて
複利計算
積立投資の複利効果を正確にシミュレーション。長期投資の威力を実感できます。
グラフ表示
資産の推移をビジュアルで確認。元本と運用益の内訳も一目瞭然です。
リアルタイム計算
条件を変更するとすぐに結果が更新。様々なパターンを簡単に比較できます。
複利計算の仕組み
複利とは、運用益を元本に加えてさらに運用する仕組みです。月次積立の複利計算式はシンプルで、毎月の積立後に月次利率（年利÷12）を掛けて増やす処理を繰り返します。
たとえば月5万円を年利5%で20年間積み立てると、元本合計は1,200万円ですが、最終資産額は約2,055万円になります。差額の855万円が複利効果による運用益です。積立期間が長いほど、後半にかけて運用益の伸びが加速するのが複利の特徴で、グラフで見ると明確にカーブが上向きになります。
開発手順（6ステップ）
STEP 1：開発環境のセットアップ
Node.js（v14以上）をインストールし、VS Codeでプロジェクトフォルダを作成します。Electronとelectron-builderをインストールします。
npm install electron --save-dev と npm install electron-builder --save-dev の2コマンドで準備完了です。Chart.jsはCDNから読み込むか npm install chart.js でローカルインストールします。
STEP 2：プロジェクト構造の作成
必要なファイルは4つだけです。package.json（プロジェクト設定とビルド設定）、main.js（Electronメインプロセス）、index.html（シミュレーター画面）、renderer.js（計算ロジックとグラフ描画）です。シンプルな構成なので初心者でも迷わず進められます。
STEP 3：Electronメインプロセスの実装
main.jsでアプリケーションウィンドウを作成します。ウィンドウサイズ・背景色・タイトルの設定、右クリックメニューの実装、macOS対応のライフサイクル管理が主な作業です。nodeIntegrationとcontextIsolationの設定はセキュリティに直結するため、本番環境では適切な設定を使用してください。
STEP 4：複利計算ロジックの実装
月次積立の複利計算アルゴリズムをJavaScript ES6+で実装します。毎月の積立額を加算しながら月次利率で増やす処理を繰り返し、年末ごとのデータを配列に記録します。Chart.jsに渡すデータ形式への変換、3桁カンマ区切りの数値フォーマット、ページ読み込み時のデフォルト値での初期計算も実装します。
STEP 5：Chart.jsでグラフを実装
Chart.jsの折れ線グラフで総資産と元本の2系列を描画します。塗りつぶし（fill: true）で面積グラフ風にすることで元本と運用益の差が視覚的にわかりやすくなります。Y軸のtickコールバックで「万円」単位表示、ツールチップで金額をカンマ区切り表示にすると見やすくなります。条件変更のたびに古いグラフをdestroyして再描画する処理も必要です。
STEP 6：テストとビルド
npm start で開発モード起動、npm run build で実行ファイルをビルドします。electron-builderがWindows（.exe）・macOS（.dmg）・Linux（.AppImage）向けのインストーラーを自動生成します。様々な入力値でのシミュレーション動作確認、グラフのレスポンシブ表示確認、ウィンドウリサイズ対応の確認を行います。
開発コストの目安
Electron + Chart.js + HTML/CSS/JSの構成なら、シンプルなシミュレーターを10万円程度から開発できます。Electronはオープンソースで無料、Chart.jsも無料です。
| フェーズ | 内容 | 費用目安 |
|---|---|---|
| フェーズ1（MVP） | 複利計算・グラフ・デスクトップアプリ化 | 10万〜20万円 |
| フェーズ2（機能追加） | 複数シナリオ比較・CSV出力・印刷機能 | 10万〜20万円 |
| フェーズ3（Web版） | スマホ対応・クラウド保存・共有機能 | 10万〜30万円 |
| コード署名（Windows） | インストール時の警告を防ぐ | 年間約2万〜5万円 |
| Apple Developer登録 | macOS配布に必要 | 年間12,980円 |
| サーバー（Web版の場合） | ホスティング費用 | 月500円〜3,000円 |
よくある質問
Electronアプリのファイルサイズはどのくらいですか？
Electronはアプリ本体にChromiumとNode.jsを内包するため、シンプルなアプリでも最低100MB前後になります。ファイルサイズが気になる場合はTauriという代替フレームワークを使うと数MB程度に抑えられますが、開発難易度は上がります。
Windows・Macどちらでも動きますか？
electron-builderを使えばWindows（.exe）・macOS（.dmg）・Linux（.AppImage）向けのビルドをそれぞれ生成できます。ただしmacOS向けビルドはmacOSマシンで行う必要があります。
Webアプリ版として公開することもできますか？
はい。デモで確認した通り、計算ロジックとグラフはブラウザでそのまま動作します。ElectronのmainプロセスをWeb用に差し替えるだけでWebアプリとしても公開できます。Netlify・Vercelなどの無料ホスティングサービスを使えばサーバーコストをほぼゼロにできます。
まとめ
積立投資シミュレーターはElectron + Chart.js + JavaScriptの組み合わせで、10万円程度から開発できます。複利計算ロジックはシンプルで、デモで確認した通りグラフと組み合わせることで直感的なツールになります。Webアプリ・デスクトップアプリ両対応なので、用途に合わせて配布形式を選べます。
開発のご相談や見積もりはお気軽にお問い合わせください。要件定義からリリースまで一貫してサポートします。