0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

ライフプランシミュレーターをReact(Vite)+TypeScript+PythonでWEBアプリ化したい!

Posted at

はじめに

「自分の家計、本当にこれで安心だろうか?」

この問いは、多くの人にとって“漠然とした不安”として心の奥に残っているものだと思います。私自身もその一人でした。積立NISAやiDeCo、保険や住宅ローンなど、一応それらしい制度には乗っているつもり。でも、定年後の生活費や突発的な支出を想定した“構造的な計算”をしたことがあるかと言われると、答えは「NO」でした。

業務でPower BIやPythonを使うようになり、データの力を感じるようになっていた中、「自分の人生もデータで可視化できないか?」という発想に至ったのが始まりです。個人向けの家計アプリやファイナンシャルプランナーが使うようなテンプレートではなく、“自分自身のデータ”を用いて“自分に最適化された構造”で未来を描いてみたい。そんな動機からライフプランシミュレーターの自作に取り組み始めました。

この記事では、Power BIによる初期分析、M言語による積立・運用ロジック構築から始まり、React + TypeScript によるWebアプリのモックアップ開発、そしてVercel上での試験公開までのプロセスを記録しています。あくまでこれは試作段階であり、現時点では固定データによる可視化調整とUI構成の検証が目的です。最終的な構想としては、Pythonバックエンドによる動的計算処理とGoogleスプレッドシート連携による入出力の自動化を想定したWEBアプリに仕上げていきたいなと考えています。

Power BIでの第一歩:制度を構造化する

最初に取り掛かったのは、Power BIによる分析ダッシュボードの構築でした。家計の可視化というと「円グラフ」や「月次の出費分析」が思い浮かびますが、私の関心は「年次の資産推移」と「制度による資産制約の影響」を見極めることにありました。

そのため、以下のような年次ベースのデータテーブルをPower Query(M言語)で整備していきました:

  • 年齢テーブル
  • 収支テーブル
  • 積立設定テーブル
  • 積立記録テーブル(再帰処理)
  • 運用結果テーブル(利回りの年次変化対応)

特に積立記録テーブルでは、年間上限、停止年齢、元本累積、iDeCoとNISAで異なるルールといった複雑な制度条件をすべてM言語で条件分岐・ループ処理しながら実装しており、実際の制度とかなり整合性の高い挙動を再現できています。

この構造は、単なるビジュアルだけでなく、制度理解の深化に非常に役立ちました。

可視化とモックアップの狙い

Power BIでは以下のようなグラフとテーブルを作成しました:

  • 折れ線グラフ:現金・NISA・iDeCoの資産推移
  • KPIカード:資産寿命(枯渇年)、最終年残高
  • テーブル:年齢・収支・積立・評価額の詳細

開発してみたPowerBIレポート
スクリーンショット 2025-06-20 081311.png

しかし、Power BIはアプリとして配布したり、都度の更新を気軽にするにはやや敷居が高く、ファイル共有やライセンス制限が足かせになります。そのため、UI設計と可視化の手触りを試す意味で、React + TypeScript によるモックアップを作成しました。

Webアプリモックアップの技術構成と実装状況

現時点の実装は以下の構成です:

  • React + TypeScript
  • Recharts(グラフ)
  • Tailwind CSS(デザイン)
  • Vercel(ホスティング)

もうプログラムを勉強したのは遠い昔で、こんなモダンな環境構築をしたこともなかったので、Git+Github⇒Vercelというデータ展開がこんなあっさりできちゃうのは驚きでした!

またRechart.jsやTailwind CSSという非常にリッチなライブラリが無料で手に入るとめちゃくちゃ開発スピードが加速することもあり、UI設計でモチベーションがもりもり上がってきました。

開発中画面
スクリーンショット 2025-06-20 081745.png

今後の構想と課題:M言語からPythonへ

現在の計算処理はPower Query(M言語)で構築されており、非常に強力な反面、Webアプリとの連携は難しいです。今後の構想としては:

  • M言語で構築したロジックをPythonに完全移植
  • pandasとNumPyを用いた積立元本の再帰ロジック再構築
  • StreamlitやFastAPIによるAPI実装で、バックエンド処理として動的計算
  • Googleスプレッドシートからの読込・書き出しを gspread や pygsheets で接続

などを考えています。

M言語とPythonで大きく異なるのは、評価タイミングメモリモデルです。Power Queryはステップ単位で明確な依存関係を持ち、再帰処理も関数型的に組めます。一方でPythonでは逐次実行モデルを前提にしているため、ループや状態遷移を明示的に定義する必要があり、変数の扱いやデータ構造の設計思想が変わってきます。

その変換をどうスムーズに行うか、テーブル設計とロジック設計を再整理する必要があります。

今後

今後は

  • 評価コメントをChatGPTに生成させて結果表示する
  • 入力系の設計(質問形式でなるべく入力工数の高さを感じさせない作りに)
  • ビジュアルの改良(堅いテーマなのでカジュアル・ポップな感じに)

といった部分を中心としながら、先に書いた開発のキモである「計算処理を担当するバックエンドをPythonで処理する」というところの作りこみに着手していきたいと思ってます。

ある程度形になったらQiitaで公開します!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?