プログラムのお話

Vue.jsとflaskで作る家計簿管理webアプリ 設計をします

作る動機

今回からVue.jsとflaskを使って家計簿管理webアプリを作っていきます。

作成する理由として、最近コンビニなどでの無駄遣いや複数口座での支払いなどがあり、収支の全貌が分からなくなったからです。既存のアプリを使おうかと思ったのですが、自分で作ったほうが飽きずに続けられると思ったからです。

開発環境のお話

自分の使っているPCはWindows10なのですが、既存の環境を壊したくないのでVirtualBoxで開発環境を構築して作業を行います。開発環境の構築に関しては以下の記事を参照してみてください。

実装する機能

まずは使いたい機能を考えます。なるべくシンプルな家計簿にしたいので機能は抑えていきます。大体以下のような機能を実装していきます。家計簿の機能としては十分かなと思います。

  1. カテゴリごとに収入と支出を登録する
  2. 毎月の収支を表示する。グラフも出来れば表示する
  3. 毎年の収支を表示する。グラフも出来れば表示する
  4. 累計の収支を表示する。グラフも出来れば表示する

カテゴリーは自由に追加するか悩みます。私としてはカテゴリーは追加できない方がいいと思います。細かに分類すると管理が大変になりそうだからです。食料品なら食料品など大まかに分類出来ればと思います。

おまけ機能も追加する

私自身が欲しい機能として、コンビニの支出状況を知りたいのでコンビニ専用の項目を追加していきたいと思います。以下が想定している機能の詳細です。

  1. コンビニ単体の支出
  2. コンビニの支出の割合(全体の支出)

カテゴリーを決める

なるべく大雑把にカテゴリー決めていきます。適当に思い付く範囲でいつもの収支のカテゴリーをリストにしていきます。

収入
  • 給料
支出
  • 家賃
  • 公共料金
  • 携帯代
  • 食料品
  • 日用品
  • 外食
  • 遊行費

DBのテーブルを考える

先程の機能とカテゴリーを参考にしてデータベースの設計を行っていきます。今回はMySQLを使って家計簿のデータを管理していきます。現在考えているテーブルはシンプルに二つにします。カテゴリーのテーブルを収支のテーブルです。

カテゴリーのテーブル
ididAUTO INCREMENT,
PRIMART KEY
カテゴリー名categoryname
カテゴリーが収支どちらか
判断するフラグ

budgetflg
更新日updateddate
登録日registrationdate
収支のテーブル
ididAUTO INCREMENT,
PRIMARY KEY
カテゴリーIDcategoryid
収入か支出の金額 budget
日付 budgetdate
更新日 updateddate
登録日 registrationdate

家計簿アプリの設計完了

家計簿管理webアプリ を作っていく編の第一弾でした。まったく設計をやった事がなかったので分からないことだらけです

今回は、実装したい機能とカテゴリと簡単なDBのテーブルを考えていきました。次回はコンポーネントの設計とAPIの設計を考えていきます。