個人開発でお金系シミュレーターサイトを作った話(React + TypeScript + Cloudflare Workers)

はじめに

個人開発で、日本の個人事業主やマイホーム購入検討者向けの金融シミュレーターサイト「r-tool-lab」を作りました。この記事では、使った技術やアーキテクチャ、詰まったポイントなどを備忘録としてまとめます。

GitHub、Vercel、Cloudflareを触るのも今回がほぼ初めてで、手探りで進めた部分も多いですが、同じように「お金系のツールサイトを個人で作ってみたい」という方の参考になれば嬉しいです。

作ったもの

r-tool-labでは、以下の3つのシミュレーターを公開しています。

• 住宅ローン + NISAシミュレーター(/loan-nisa)
  住宅ローンを組んだ場合とNISAで運用した場合を比較できるシミュレーター
• 手取り計算シミュレーター(/income)
  自治体ごとの国民健康保険料の違いまで踏み込んで計算する手取りシミュレーター
• マイクロ法人シミュレーター(/micro-corp)
  個人事業主のままでいるか、マイクロ法人化するかのコストメリットを比較するシミュレーター

技術スタック

分野	採用技術
フロントエンド	React + TypeScript
スタイリング	Tailwind CSS
グラフ描画	Recharts
状態管理	Zustand(永続化込み)
ホスティング	Cloudflare Workers
アクセス解析	Google Analytics / Google Search Console
ドメイン管理	Cloudflare Registrar

アーキテクチャのポイント

ホスティングはVercelからCloudflare Workersに移行

当初はVercelにデプロイしていましたが、商用利用に関する規約上の制約があったため、Cloudflare Workersに移行しました。個人開発でマネタイズを視野に入れる場合、ホスティング先の利用規約は事前にちゃんと確認しておくべきだったなと反省したポイントです。

状態管理はZustandで永続化

各シミュレーターの入力値はZustandで管理し、ブラウザをリロードしても入力内容が保持されるようにしています。Reduxほど大掛かりな仕組みは不要な規模感だったので、シンプルに書けるZustandを選びました。

共通コンポーネント設計

3つのシミュレーターで見た目や挙動を揃えるため、以下のような共通コンポーネントを切り出しています。

• Layout — ページ全体の共通レイアウト
• Card — 数値や結果を表示するカード
• SliderInput — 金額や年数などをスライダーで入力するコンポーネント
• StatRow — 計算結果を一覧表示する行コンポーネント
• SimulatorGrid — シミュレーター画面のグリッドレイアウト

税制・保険料まわりのロジック

税制関連の定数は src/constants/tax2026.ts に集約し、シミュレーターごとの計算ロジックは共通ライブラリとカスタムフックに分離しています。

特に手取りシミュレーターの国民健康保険料計算では、自治体ごとの違いをどこまで反映するかが悩みどころでした。所得割は青色申告控除後の所得(基礎控除33万円込み)をベースに計算していますが、自治体によっては内部調整によって理論値より実際の請求額が低くなるケースもあり、シミュレーションの精度を上げるうえで苦労した部分です。

詰まったところ・学んだこと

• GitHub・Vercel・Cloudflareがほぼ初めてだったので、デプロイ周りの基本的な設定だけでも最初は時間がかかりました
• 個人開発でも、TypeScriptの型エラーは握りつぶさずにちゃんと直すことを徹底したことで、後々のリファクタが楽になりました
• 税制・保険料計算のような「正確性が求められるロジック」は、共通の定数ファイルに集約しておくと、法改正などがあった際の修正が一箇所で済むので助かっています

サイトURL

おわりに

個人開発でここまで作るのは初めてでしたが、技術選定からデプロイ、税制ロジックの実装まで一通り経験できたのは大きな学びでした。今後はSEO面の強化や、シミュレーターの精度向上に取り組んでいく予定です。