ココロの声
開発中に思っていたことが、漏れ出してしまいそうなので、「ココロの声」に少し収めたいと思います
だいぶゆる～く開発していたので、温かい目で見てくださいm(__)m
はじめての開発
せっかくエンジニアになったんだから、開発をやってみたい！と思い、はじめました
初めての開発ということで、自分にとって身近なものをつくりたいと思い、
毎年Excelで作成していた家計簿をWebアプリとして開発してみました(o^―^o)
ココロの声
GPTは使ってないよ！(使いたかったけど)
夢をかなえるブタ。
夢をかなえるブタ。 は、今回開発した家計簿アプリのタイトルです
↓コイツ
自分にとって、家計簿は「貯金」目的なので、タイトルは貯金箱から連想しました
・貯金箱→ブタ
・貯金すること→夢をかなえること
...っていうことで「夢をかなえるブタ。」です( •̀ ω •́ )✧
ココロの声
「夢をかなえるブタ。」は長いので、ここからは 夢ブタ。 とします_(:3」∠)_
カンタンな設計書
使用する言語と環境
業務でPHPを使用しているため、PHPベースで開発を進めました
また、言語そのものを勉強したかったので、フレームワークは使用しませんでした
| 言語/環境 | |
|---|---|
| 開発環境 | VSCode, Xampp |
| フロントエンド | HTML,CSS,javascript(chart.js) |
| バックエンド | PHP |
ココロの声
そもそも、フレームワークとか言われたら、頭パンパンになる(-_-;)
家計簿システムの大まかな仕様
- 支出収入データの登録
- 登録データの表示(見える化)
- 貯金機能
ココロの声
機能ベースで考えたつもりだったけど、画面ベースで考えていた(←後で気づく)
作成手順
1. HTML,CSS,JavaScriptで画面を作成
まずは、画面の作成に取り掛かりました
なんだかんだここに結構時間がかかったかもしれないです
3つあるので、順に説明します(^▽^)/
①画面TOP
こちらが画面TOPになります
タイトルの挿入、ボタンの作成、背景の変更だけなので、問題はなかったです(^▽^)
個人的には、このシュールな感じが結構ハマっています^.^
背景のブタは、ドッド絵ダウンから取ってきました L●GOみたいな感じでおススメです
②支出画面/収入画面
この画面は一番こだわりました！
円グラフはどうしても作りたかったのですが、意外とややこしくて、大変でした
ただ、表示させるだけでなく、画面を更新すると動かせるようにもできたので、それは収穫です(⌒∇⌒)
また、途中でデータを追加していくと、7つ以上のデータだと表示されないということが判明したので、右にスクロールバーも作成しました
ココロの声
開発中に気づく不備は、できれば気づきたくなかった(-_-;)
もっとうまくやってくれるものだと思ってた(←他人任せ)
③貯金画面
...諦めました(╯°□°）╯︵ ┻━┻
ココロの声
想像以上に時間がなかった 理想と現実のギャップは大きい(´；ω；`)ｳｩｩ
2. DBの作成
DBでは、income(収入)とexpence(支出)に分けて2つのテーブルを作成しました
income(収入)もexpence(支出)も、構造は同じです
・category：カテゴリー
・detail：詳細(店の名前とか)
・price：金額
・memo：メモ
・created_at：データを登録した年月日
ココロの声
いちば～ん、わかりやすかった！SQL、だいすき♡
3. PHPでDBと連携
DBと連携させることが一番大変でした(;^ω^)
下のソースは、一部ですが、ほぼ取得したいデータごとに変数を用意している状態で、開発中はいいものの、あとから見直したら、すごくわかりづらいコードが完成しました
例1: 12月分の給料カテゴリーの合計に対する比率を出している。
(各月、各カテゴリーごとに変数を用意。)
<?php
try {
// 円グラフ
$dbhh = new PDO("mysql:dbname=kakeibo;host=localhost;charset=utf8", "root");
$sqla = "SELECT category, ROUND(SUM(price) / (SELECT SUM(price) FROM income WHERE created_at BETWEEN '2024-12-16'AND '2024-12-21'), 3)*100 AS ratio
FROM income
WHERE category= '給料'AND created_at BETWEEN '2024-12-16'AND '2024-12-21';";
$stmta = $dbhh->query($sqla);
$recorda = $stmta->fetch(PDO::FETCH_ASSOC);
$kyuryo= $recorda['ratio'];
例2：円グラフの割合を無理やり合計値で出そうとしている
<style>
.pie {
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
font-size: 26px;
font-weight: 700;
border-radius: 50%;
background-image: radial-gradient(#f2f2f2 30%, transparent 31%),
conic-gradient(#ff8c00 0% <?php echo $kyuryo; ?>%,
#ffd700 <?php echo $kyuryo; ?>% <?php echo $kyuryo+$bournus; ?>%,
#f5deb3 <?php echo $kyuryo+$bournus; ?>% <?php echo $kyuryo+$bournus+$other; ?>%);
}
</style>
<div class="pie" align="left">合計</div>
この2つの例はほんの一部で、他にもいわゆる"べた張り"状態のソースがずら～っと続いてしまいました
ココロの声
正直言うと、その時はべた張りの方が楽だった、その時は...。
一旦、完成。
正直、思っていた6割ぐらいの出来ですが、キリがないので、一旦完成としました
まぁ、家計簿としての機能は備わっているから、いいんじゃないかなっと(←甘い)
ひとまず、一旦完成してみての、振り返りを書いてみたいと思います
必要なことが多すぎる
普段から、割とインターネットに触れている方だと思いますが、
機能を使っているだけではわからない、だけど必要な処理が開発をする上で多いなと感じました(-_-;)
実際に、自分で開発すると、その必要性に気づかされるのですが、つくってみないと分からないもんだなと実感させられました
一方で、それが分かってくれば、連鎖状に他のことについても知れてくるような気がしていて、今回の開発はその一歩になったのではないかと思います
ココロの声
必要なことを知っていれば、時間が足りないってことないんだろうなぁ
共通化が難しい
頭の中にはあっても、それを実現することの難しさがありました
なんといっても、「共通化」！！！
分かっていたつもりであっても、べた張りに進んでしまっていました
効率重視であるはずのプログラミングの概念を覆してしまいましたね(-_-;)
進み続けるよりも、一旦立ち止まって考える作業の必要性を感じました
ココロの声
べた張り、楽だけど、めんどくさかった、（笑）
結果、圧倒的Excelの勝利
今のところ、夢ブタより断然Excelの方が家計簿として有能のままでした(´；ω；`)ｳｩｩ
くやしぃですねぇ
機能的にはまだまだですが、来年(2025)からは、夢ブタを使っていこうと思います！
初めての開発したものなので、大切にしていきたいです(⌒∇⌒)
それで、来年以降も夢ブタvol1,vol2...って続いて、自分の成長が少しでも見れたら幸いです
ココロの声
ココロの声が、駄々洩れな状態で初めての開発日記書いてみましたが、いかがでしたでしょうか？
未経験者である人もない人も、自分のココロの声と共感していただけたら、嬉しいです(o^―^o)