はじめに
最近、FIRE（Financial Independence, Retire Early） に興味を持ち始めました。「自分はいつ自由になれるのか？」を知りたくて、React の勉強も兼ねてFIRE計算機（FIRE Calculator） を自作してみました。
自己紹介
- 現役SES
- Web開発勉強中
- 未経験からプロントエンドエンジニアへ
🚀 完成したもの
FIRE Calculator
現在の年齢、貯蓄額、投資のリターン率などを入力すると、FIRE達成年齢と資産推移をシミュレーションできるアプリです。
👉 デモサイトはこちら: https://fire-calculator-v1-1.vercel.app/
👉 GitHubリポジトリ: https://github.com/Cyoukakitsu/fire--calculator--v1.1
🛠 使用した技術スタック
- Programming: TypeScript
- Framework: NextJS
- Styling: Tailwind CSS + DaisyUI
- Deployment: Vercel
🔥 設計
🖼️ 実際の画面
1. トップページ & イントロダクション（ダックモード付け）
キャプション：PC版のトップページ。レスポンシブ対応済みです。
2. 現状・目標・戦略の入力（3つのカード）
- Your Situation: 現在の年齢や貯蓄額を入力。
- Your Retirement: FIRE後の年間支出額や、予想インフレ率を設定。
- Your Investing Strategy: 株式・債券・現金の投資配分（ポートフォリオ）と想定利回りを設定。
3. 初心者向けのアシスト機能（アコーディオンUI）
「FIREの目標額が分からない」「投資配分をどうすればいいか分からない」というユーザーのために、クリックで展開するヘルプ機能を実装しました。
- 5 FIRE models: "Lean FIRE" や "Fat FIRE" など、ライフスタイル別の目標額目安を表示。
- 3 Investors' strategies: "Aggressive"（株式多め）や "Conservative"（債券多め）など、典型的な投資パターンをワンクリックで適用可能。
5. 結果表示セクション（初期状態）
- "Analyze" ボタンを押す前は、プレースホルダーとして
0や初期値を表示し、計算待ちの状態であることをユーザーに伝え。 - ボタンを押すと瞬時に計算が実行され、ここに「FIRE達成可能年齢」、「元本と利益の推移」、「資産の内訳」が表示。
🚀 今後の展望
1. データ可視化（Visual Upgrade） 完成✅
「数値」から「グラフ」へ進化させます。
- 実装内容: 横軸を「年齢」、縦軸を「資産額」とした**折れ線グラフ（Line Chart）**を導入します。
- 目的: ユーザーが「自分が何歳で資産の急上昇（ホッケースティック曲線）を迎え、いつ目標額に到達するのか」を一目で分かるようにし、貯蓄へのモチベーションを高められるUIを目指します。
2. 技術アーキテクチャの刷新（Next.js + TypeScript） 完成✅
現在の Vite (React) + JavaScript 環境から、より堅牢でモダンな構成へ移行します。
-
JavaScript → TypeScript:
- 全てのコンポーネントと計算ロジックをTypeScript化 (
.tsx) します。 - 型定義を厳格に行うことで、バグを未然に防ぎ、開発体験（DX）を向上させます。
- 全てのコンポーネントと計算ロジックをTypeScript化 (
-
Vite/React → Next.js:
- 現在はSPA（シングルページアプリケーション）ですが、将来的なSEO対策やOGP（SNSシェア時の画像表示）、サーバーサイドでの計算処理を見据えて、Next.js (App Router) への移行を検討しています。
📝 最後に
今回の開発を通して、Reactの基礎からTailwind CSSを使ったレスポンシブデザイン、そしてVercelへのデプロイまで、多くのことを学ぶことができました。
最初は自分用のシンプルな計算ツールとして作り始めましたが、UIを整え、レスポンシブ対応を行うことで、一つの「プロダクト」として形にする楽しさを実感しています。
今後は上記のロードマップに沿って、さらに機能を拡張していく予定です。
もしコードに関するアドバイスや、「もっとこうした方がいいよ！」というご意見があれば、ぜひコメントで教えていただけると嬉しいです。
最後まで読んでいただき、ありがとうございました！