はじめに

PHPとPostgreSQLを使って、支出管理アプリを自作しました。

一人暮らしを始めてから、「食費や光熱費が毎月いくらかかっているのか」「固定費と変動費のバランスはどうか」を感覚でしか把握できていないことに課題を感じていました。
既存の家計簿アプリは多機能で便利ですが、シンプルに自分の知りたい支出を可視化する仕組みが欲しいと思い、自作に挑戦しました。

MVC構成を取り入れて、Webアプリケーションの基本的な仕組み（ルーティング、コントローラー、ビュー、モデル）を理解することを目的としています。

この記事では、実際に構築したコード構成や工夫した点を紹介します。

概要

このアプリは、日々の支出を記録し、月ごとの支出合計をグラフで可視化することができます。

主な機能は以下の通りです：

データベースは PostgreSQL を使用し、フロントエンドは Chart.js を利用してグラフを描画しています。

自作のフレームワーク的な仕組みです。

index.php：エントリーポイント
.htaccess：Apache用のルーティング設定
css/：スタイルシート
- style.css：共通CSS
- expenses.css：支出画面用
- dashboard.css：ダッシュボード（グラフ）用

アプリの仕組みを整理するために、ユースケース図・シーケンス図・クラス図を作成しました。

図の生成には PlantUML を使用しています。
PlantUMLコードはGitHubにまとめました。

ユースケース図
* ユースケース図

シーケンス図
* シーケンス図

クラス図
* クラス図

特に苦労したのは、支出の編集機能と削除処理です。

また、MVCの分離を意識するあまり、どの処理をどこに書くべきか悩むことが多かったです。最終的に、コントローラーにはロジックを、モデルにDBアクセスを集中させることで整理しました。

アプリはデモ環境にもデプロイしています。
実際に触ってみたい方はこちらからどうぞ

デモサイトはこちら

※簡易的な動作確認用のため、データは随時リセットされる場合があります。

今回のアプリを通して、PHPの基礎からMVC構成の理解、データベース操作、フロントエンド連携（Chart.js）まで幅広く学ぶことができました。

「自分専用のアプリを作ってみたい」と思っている方の参考になれば嬉しいです。

このアプリは、独学エンジニアの教材で学んだMVC構成をベースに実装しています。
自分なりにカスタマイズしながら、CRUD処理やグラフ表示などを追加しました。

また、同じく独学エンジニアの課題で作成したアプリについてもQiitaにまとめています。興味があればぜひご覧ください。