はじめに
PHPとPostgreSQLを使って、支出管理アプリを自作しました。
一人暮らしを始めてから、「食費や光熱費が毎月いくらかかっているのか」「固定費と変動費のバランスはどうか」を感覚でしか把握できていないことに課題を感じていました。
既存の家計簿アプリは多機能で便利ですが、シンプルに自分の知りたい支出を可視化する仕組みが欲しいと思い、自作に挑戦しました。
MVC構成を取り入れて、Webアプリケーションの基本的な仕組み（ルーティング、コントローラー、ビュー、モデル）を理解することを目的としています。
この記事では、実際に構築したコード構成や工夫した点を紹介します。
- GitHubリポジトリ: https://github.com/zusa-uehara/my-expenses-app-mvc
概要
このアプリは、日々の支出を記録し、月ごとの支出合計をグラフで可視化することができます。
主な機能は以下の通りです：
- 支出の登録（Create）
- 支出の一覧表示（Read）
- 支出の編集（Update）
- 支出の削除（Delete）
- 月別グラフ表示（Chart.js）
データベースは PostgreSQL を使用し、フロントエンドは Chart.js を利用してグラフを描画しています。
ディレクトリ構成
controllers/
-
DashboardController.php└ 月別グラフ表示。支出の合計を月ごとに取得して Chart.js に渡しています。
-
ExpensesController.php└ 支出の登録、処理を担当。
-
EditController.php└ 支出の一覧、編集、削除を処理を担当。
views/
-
dashboard/index.php└ グラフを表示する画面。Chart.jsで棒グラフを描画。
-
expenses/index.php└ 支出の新規登録フォーム
-
expenses/create.php└ 支出の新規登録フォーム
-
edit/index.php└ 支出の一覧表示
-
edit/edit.php└ 支出の編集フォーム
-
edit/upde.php└ 支出の編集フォーム。
core/
自作のフレームワーク的な仕組みです。
-
Autoloader.php：クラスの自動読み込み -
Controller.php：全コントローラーの親クラス -
DatabaseManager.php：PDO管理、モデルの生成 -
DatabaseModel.php：モデル共通処理 -
HttpNotFoundException.php：404処理用の例外 -
Request.php：リクエスト情報の取得 -
Response.php：レスポンスの出力 -
Router.php：ルーティング機能 -
View.php：ビューの描画
models/
-
MyExpenses.php└ 支出に関するDB操作（取得・挿入・更新・削除）を記述。
web/
-
index.php：エントリーポイント -
.htaccess：Apache用のルーティング設定 -
css/：スタイルシート-
style.css：共通CSS -
expenses.css：支出画面用 -
dashboard.css：ダッシュボード（グラフ）用
-
UML図で整理
アプリの仕組みを整理するために、ユースケース図・シーケンス図・クラス図を作成しました。
図の生成には PlantUML を使用しています。
PlantUMLコードはGitHubにまとめました。
ユースケース図
* ユースケース図
シーケンス図
* シーケンス図
クラス図
* クラス図
学習していて難しかった点
CRUD処理の実装
特に苦労したのは、支出の編集機能と削除処理です。
- 編集時は、指定されたIDのデータを取得し、フォームに初期値をセットする必要がありました。
- バリデーションやPOST/GETの切り替えも含め、リクエストの扱いに注意が必要でした。
また、MVCの分離を意識するあまり、どの処理をどこに書くべきか悩むことが多かったです。最終的に、コントローラーにはロジックを、モデルにDBアクセスを集中させることで整理しました。
デモサイト
アプリはデモ環境にもデプロイしています。
実際に触ってみたい方はこちらからどうぞ
デモサイトはこちら
※簡易的な動作確認用のため、データは随時リセットされる場合があります。
おわりに
今回のアプリを通して、PHPの基礎からMVC構成の理解、データベース操作、フロントエンド連携（Chart.js）まで幅広く学ぶことができました。
「自分専用のアプリを作ってみたい」と思っている方の参考になれば嬉しいです。
参考
このアプリは、独学エンジニアの教材で学んだMVC構成をベースに実装しています。
自分なりにカスタマイズしながら、CRUD処理やグラフ表示などを追加しました。
また、同じく独学エンジニアの課題で作成したアプリについてもQiitaにまとめています。興味があればぜひご覧ください。