🖋️

【個人開発】ライフプランアプリを開発しました

に公開
AI
JavaScript
React
TypeScript
個人開発
idea

ライフプランアプリを作りました

以下にサイトを公開しています。

https://ryomeblog.github.io/shin-lifeplan-app/

image.png

概要

  • Webで簡単にライフプランを管理するためのアプリ
  • 家計簿をつける習慣がある人の次のアクションをサポートするために作られた
  • 家計簿のように口座を作ってカテゴリ別に支出や収入、振替なども管理できる
  • 未来の収支なども可視化してライフプランごとに切り替えることができる
  • 収支のテンプレート化や収支をイベントと紐づけて管理もできる
  • 資産（株式や債券など）管理やFIRE計画を立てることも可能
  • レポートによるカテゴリ別の人生の収支割合や資産推移を確認できる

背景

私は家計簿が好きで高校生の時からずっとつけてきました。
当時はスマホでZaimやマネーフォワードを使用して家計簿をつけていました。

長年家計簿をつけてきた経験から家計簿はただつけるだけでは意味がなく、見直しが必要であることを認識しました。
毎年家計の支出割合を見直し、ウェイトが一番大きい部分を改善するようにしてきました。

家計の見直しと同時に未来の見通しを立てるためにライフプランも同時に作るようになっていきました。
ライフプランを作る意味としては 何にいくらかかるかを把握すること と 収支をコントロールできていること を確認するために作っていました。

未来の支出が予測を上回らないかテストしているような感覚です。（ライフプランで計算した支出を上回らないことをテスト）
必然的に1日、月、年にいくら使って良いのかが数値で出せるようになりました。（なんとなく貯金、なんとなく支出がなくなりました）

この経験から家計簿だけでは不十分でライフプランまで立ててこそ家計簿の意味が出てくると確信してこのアプリを作りました。

技術スタック

  • React: 19.1.0
  • Zustand: 5.0.5
  • Tailwind CSS: 3.4.17
  • Recharts: 2.15.3
  • Storybook: 8.6.14
  • React Router DOM: 7.6.2
  • React Icons: 5.5.0
  • clsx: 2.1.1
  • ESLint: 8.57.1
  • Prettier: 3.5.3
  • PWA: Service Worker, manifest.json

ディレクトリ構成

shin-lifeplan-app/
├── public/           # 静的ファイル（index.html, manifest.json, アイコン等）
├── src/              # ソースコード
│   ├── components/   # UI・レイアウト・フォーム・ページ
│   │   ├── ui/       # 基本UI部品
│   │   ├── layout/   # レイアウト構成要素
│   │   ├── forms/    # 入力・編集フォーム
│   │   └── pages/    # 各画面ページ
│   └── utils/        # ユーティリティ関数（ストレージ操作等）
├── doc/              # ドキュメント（設計・規約等）
├── .storybook/       # Storybook設定
├── package.json      # 依存関係・スクリプト
├── tailwind.config.js # TailwindCSS設定
├── postcss.config.js  # PostCSS設定
└── .eslintrc.js, .prettierrc # Lint/フォーマット設定

各ディレクトリの役割

  • public/: PWA設定やアイコン、index.htmlなどの静的ファイル
  • src/components/: Atomic Designに基づくUI・レイアウト・フォーム・ページのReactコンポーネント
  • src/utils/: ストレージ操作や共通処理などのユーティリティ関数
  • doc/: 設計資料・コーディング規約などのドキュメント
  • .storybook/: StorybookによるUI開発・テスト環境
  • package.json: 依存ライブラリ・スクリプト管理
  • tailwind.config.js, postcss.config.js: スタイリング設定
  • .eslintrc.js, .prettierrc: コード品質・フォーマット設定

特徴・工夫ポイント

PWA対応でオフラインでも利用可能

  • Service Workerによるキャッシュでネット接続不要でも動作
  • スマホにインストールしてホーム画面に追加

データはローカルストレージ保存

  • データをローカルストレージ保存にしたため、バックエンドやDBは不要
  • 運用費用0円

JSONで端末間データ共有

  • データはJSON形式でエクスポート/インポート
  • PC・スマホ間で簡単にデータ移行・バックアップ

チュートリアル機能

  • 画面ごとにスポットライト表示で操作方法をガイド

image.png

GitHub Pages公開

  • 静的ビルド＆無料ホスティングでWebアプリを公開

https://ryomeblog.github.io/shin-lifeplan-app/

使い方

トップページ

  • サイトにアクセスするとトップページが表示されます
  • 「始める」を押下するとライフプラン作成ページへ遷移します
  • 「データをインポート」を押下するとJSONファイルをインポートしてダッシュボードに遷移します

image.png

ライフプラン作成ページ

  • 初回時はライフプラン作成Formが表示されます
  • 必要項目を入力して決定を押すことで始めることができます

image.png

  • ローカルストレージにデータが残っていると復元するか、新しく始めるか、破棄するか選択できます

image.png

ヘッダー

  • 各ページへの遷移ができます

image.png

  • ライフプランの切り替えもできます

image.png

ダッシュボード

  • この画面では収支のカテゴリ一覧や口座一覧、保有資産などを閲覧できます

  • 各画面ではチュートリアルが開始されます

image.png

取引

  • 取引（支出、収入、振替、投資）の管理・閲覧ができます

image.png

  • 取引は年単位で管理され、年ごとに切り替えて閲覧できます

image.png

image.png

  • 右下の「＋」ボタンでFormを表示できます

image.png

  • Formから取引の追加ができます

image.png

イベント

  • ライフイベントの登録ができます
  • ライフイベントは年単位で管理されます

image.png

  • 「新規イベント」からライフイベントの追加Formを表示できます
  • 関連する取引を追加することでライフイベントにいくらかかったかわかるようになります

image.png

image.png

  • 取引側でもイベントの紐づけは可能です

image.png

レポート

  • ライフプラン範囲の収支や資産を表示します

image.png

口座

  • 口座の振替登録や一覧を管理・閲覧ができます

image.png

  • 「口座を追加」から口座の追加ができます

image.png

image.png

  • 口座をクリックすると口座詳細に飛ぶことができます
  • 口座詳細ではライフプラン範囲の残高推移や取引履歴を閲覧できます

資産

  • 保有資産と資産の管理・閲覧ができます

image.png

  • まず、「新規資産追加」から資産の登録を行います

image.png

  • 資産追加Formでは株価をForm入力またはJSONで登録できます

image.png

  • JSONの構造は以下の通り
// 例
[
  {
    "year": 2025,
    "price": 25000
  }
  ...
]
  • 資産を押下すると資産詳細に遷移します

image.png

  • ライフプラン範囲の資産詳細では資産推移の閲覧、配当の登録と閲覧ができます

image.png

  • 配当はForm入力またはJSONで登録できます

image.png

  • JSONの構造は以下の通り
// 例
[
  {
    "year": 2025,
    "dividendPerShare": 25000
  }
  ...
]
  • 保有資産は「保有資産を追加」または取引から登録できます

image.png

  • 投資の取引は「買付」、「売却」、「配当」の3種類があります

image.png

  • 一度買付を行った資産は保有資産に表示されます

image.png

  • 保有資産を押下すると保有資産詳細に遷移します

image.png

  • 保有資産詳細ではその資産が生み出した損益、資産の推移、取引履歴を表示します

image.png

  • 買付、売却、配当を押下することで取引のFormを開くことができます

image.png

  • 投資の配当Formでは配当の登録ができます
  • 配当は資産の対象の年の配当金額を参照して計算されます

image.png

  • 対象の年を変更したい場合は詳細設定から変更できます

image.png

  • 投資の売却Formでは買付して保有している株の売却ができます
  • 評価額は資産の対象の年の評価額を参照して計算されます

image.png

  • 対象の年を変更したい場合は詳細設定から変更できます

image.png

テンプレート

  • テンプレートは定期的な支出、収入、投資の管理ができます

image.png

  • 「新規テンプレート」からテンプレート作成Formを表示できます

image.png

  • 作成されたテンプレートに「取引追加」を押下して取引テンプレート追加Formを表示できます

image.png

  • 取引テンプレート追加Formではインフレ率が設定でき、ライフプラン範囲の最初の年から計算されます

image.png

  • 追加されたテンプレートは取引で使用できます

image.png

image.png

カテゴリ

  • 支出と収入のカテゴリを管理できます

image.png

  • 追加を押下することでカテゴリ登録Formを表示できます

image.png

image.png

  • カテゴリ一覧の編集・削除でカテゴリの修正や削除も可能です

image.png

設定

  • 設定画面はヘッダーの歯車アイコンから遷移できます

image.png

  • 基本設定ではライフプランの設定や管理ができます

image.png

  • 詳細設定では家族やチュートリアル、データの管理ができます
  • 「エクスポート」を押下することでJSONファイルのダウンロードができます
  • 「インポート」を押下することでJSONファイルからデータの復元ができます

image.png

  • FIRE計画では設定金額が何歳の時に達成できるか表示してくれます

image.png

GitHub

ソースコードをGitHubに公開しています。

https://github.com/ryomeblog/shin-lifeplan-app

GitHubで編集を提案

Discussion