初めに
支出や予算を、量・頻度に分類して管理できる家計簿アプリを開発しました。
プログラマ2年目での初の個人開発で、だいぶ苦労しながら形にしていきましたので、本記事では、開発したアプリの内容と、開発過程での工夫や失敗を記事として共有したいと思います。
開発理由
元々、支出自体は既存の家計簿アプリを使用して記録しています。
その上で、記録した情報を元に、無駄遣いや切り詰められる場所を探したり、予算を立てようとしましたが、実際に予算を立てる際には、固定費かそうでないかを把握した上で考える必要がありました。
しかし、既存のサービスでは特定の支出が固定費かどうかをタグ付けし、計測することはできませんでした。
そのため、あらかじめ固定費かそうでないかを分類して支出を管理できるサービスを探しましたが見つからず、今回自分で開発してみました。
アプリ概要
支出と予算を、量・頻度の観点で分類して管理することができる家計簿アプリ。
使用技術
## 環境
- vite
- firebase
## 言語
- typescript
## ライブラリ
- React
- Yamada UI
- jotai
- vitest
技術採用理由
- Yamada UI
- UIにこだわる必要がなかった
- ダークモードの実装が極めて簡単
- 日本語の公式ドキュメントがある
- jotai
- 項目を追加するためのダイアログのコンポーネントが、支出リストの下部になく、バケツリレーが困難なため、グローバルに値を補完したかった（バケツリレー自体もやりたくなかった）
- 簡単に使える状態管理ライブラリの中で、一番メジャーだと判断したため
機能
以下のページに分けて機能を実装しています。
- 支出一覧ページ
- カテゴリ一覧ページ
- 支出状況確認ページ
支出一覧ページ
支出一覧の確認、追加、削除ができます。
カテゴリ一覧ページ
量・頻度と、予算を指定して登録できます。
動作は支出一覧ページと同様です。
支出状況確認ページ
予算と支出を、量・頻度のマトリクス図形式で確認できます。
最初の一つは分類ごとの総額で、それより下はカテゴリごとの表示になっています。
工夫したところ
サイドバー表示時のアニメーション
マウスカーソルが左側の余白に到達した時点で、サイドバーがゆっくりと元の画面に重ならない形で表示されてくる処理を、emotionのkeyframesを使用して実装しました。
また、左端の余白はテンプレートページで指定し、仮にページレイアウトが追加されてもサイドバーが開かれるエリアとコンテンツのエリアが重ならないようにしています。
支出状況確認ページのインターフェース
支出を頻度・量の観点で分類することがコンセプトのため、それぞれの支出分類をマトリクス図の形式で表示するようにしました。
また、スペースに余裕のある最初の項目の情報量を多くし、繰り返されるUIは最低限の情報だけ表示するようにしました。
難しかったところ
支出とカテゴリの紐づけ
元々は、カテゴリではなく支出に頻度などの情報を紐づける予定だったが、開発における重要事項を整理しておらず、重要度の低いカテゴリへの紐付けを実装したせいで、重要度の高い支出への紐付けが実装不可能になってしまった。
また、だいぶ開発が進んでしまってからそれに気がついた。
テストコードでの、UIライブラリ固有の処理への対応
UIフレームワークのセットアップ時に走らせている関数でエラーが起きました。
結果的には、ライブラリ特有の事象であり、詳細を詳しく知っても他に応用しにくそうだったので、AIに任せて解決してもらいました。
今後の開発計画
最低限の機能が実装できたので、この後はコンポーネント分割などの、上手くいった部分を引き継ぎながら、開発理由をより満たせるよう、1から作り直す予定です。
まとめ
今回の個人開発で特に痛感したのは、何をやるかを明確にすることの大切さでした。
元々、開発理由の時点で、「支出」を量・頻度の観点で分類して管理するという目的がありました。
しかし、場当たり的に開発を進めてしまったせいで、最重要機能が実装できず、カテゴリに量・頻度の分類を紐づけるという湾曲した形で何とか実装せざるを得ない状況になってしまいました。
しかし、これほど致命的なミスを犯しても、多少の時間程度しか失われることのない個人開発は、とてつもなくやり得なことであると学びました。
また、自分は元々、プログラミング自体はやっており、個人開発をしたいとずっと考えていましたが、3ヶ月前までの時点では環境構築のやり方がわからず、結局何もできないままでいました。
今現在はこうして開発をしていますが、なぜこれまでできなかったのかを考えてみると、全て理解してからやらないといけないと、勝手に考えていたことが原因だと気づきました。
こうして開発をしていても、開発中に使用しているコマンドや環境設定の大半は内容を知りませんが、それで何か問題が出るわけでもありませんでした。
その上、開発していく上で本当に知識が必要になった時も、AIに問い合わせて該当情報の資料を教えてもらうだけで簡単に学んでいくことができました。
なので、この記事を読んでいて、できないからやらないでいる人も、まずやってみてください。
JISOUのメンバー募集中
プログラミングコーチングJISOUではメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
気になる方はぜひHPからお願いします👇