去年の10月から、半年かけて、Webアプリケーションを1から作成しました。
作成したのは「家計簿アプリ」です。
1. ツール概要
①アプリの目的
現金の入出金を管理および、1ヶ月における家計の入出金を把握できる「家計簿アプリ」を目的として、作成しました。
②アプリ作成背景
前回のアプリ開発では、スケジュール管理がうまくいかず、まずは作りきることを優先しました。
このため、当初の計画していた機能を大幅に削減してのアプリケーションとなったため、悔いが残る結果となりました。
今回はこの悔いを残さないためにも、前回搭載しきれなかった機能を全て載せきることを目標に設計構築を進めました。
③アプリ使用者
前回同様、個人で使えればいいと思ってます。
ただし、前回は画面部分のCSSを全く手つかずの状態で作成したためか、見栄えが良くないアプリとなりました。自分で使う用とはいえ、あまり使う気が起きなかったのはデザインがないからだと感じました。
このことから、今回はデザインも多少は手を付けたアプリ開発を目指して、作業を進めました。
さて、概要を記載したところで、次はアプリの機能について記載します。
2. 機能一覧
機能一覧として具備している機能は下記のとおりです。
| # | カテゴリ | 機能名 | $\textsf{概要}\hspace{10em}$ |
| 1 | $\textsf{認証}\hspace{3em}$ | $\textsf{ログイン}\hspace{5em}$ | $\textsf{ユーザーがアカウントにアクセスするための機能}\hspace{10em}$ |
| $\textsf{ログアウト}\hspace{5em}$ | $\textsf{ユーザーがアカウントからログアウトするための機能}\hspace{10em}$ | ||
| $\textsf{新規ユーザー登録}\hspace{5em}$ | $\textsf{ユーザーを新規で登録するための機能}\hspace{10em}$ | ||
| 2 | $\textsf{家計簿データ管理}\hspace{3em}$ | $\textsf{データ登録}\hspace{5em}$ | $\textsf{利用データ（利用明細）を登録する機能}\hspace{10em}$ |
| $\textsf{データ表示}\hspace{5em}$ | $\textsf{登録された利用データ（利用明細）の一覧表示する機能}\hspace{10em}$ | ||
| $\textsf{データ編集}\hspace{5em}$ | $\textsf{既存の利用データ（利用明細）を編集する機能}\hspace{10em}$ | ||
| $\textsf{データ削除}\hspace{5em}$ | $\textsf{既存の利用データ（利用明細）を削除する機能}\hspace{10em}$ | ||
| 3 | $\textsf{集計}\hspace{3em}$ | $\textsf{月毎にカテゴリでグルーピング}\hspace{5em}$ | $\textsf{利用月内のカテゴリごとに利用金額を集計する機能}\hspace{10em}$ |
| 4 | $\textsf{CSV}\hspace{3em}$ | $\textsf{CSV取り込み}\hspace{5em}$ | $\textsf{利用データ（利用明細）が記載されているCSVファイルを取り込み、 利用データ（利用明細）を登録する機能}\hspace{20em}$ |
| $\textsf{CSV出力}\hspace{5em}$ | $\textsf{利用データ（利用明細）をCSVファイルとして出力する機能}\hspace{10em}$ | ||
| 5 | $\textsf{カテゴリ管理}\hspace{3em}$ | $\textsf{カテゴリの追加}\hspace{5em}$ | $\textsf{新規のカテゴリを登録する機能}\hspace{10em}$ |
| $\textsf{カテゴリの削除}\hspace{5em}$ | $\textsf{既存のカテゴリを削除する機能}\hspace{10em}$ | ||
| 6 | $\textsf{検索}\hspace{3em}$ | $\textsf{検索}\hspace{5em}$ | $\textsf{利用明細を検索し、検索した単語に掛る明細を取得する機能}\hspace{10em}$ |
前回搭載できなかった、#3-集計、#4-CSV、#6-検索機能を事前の計画通りに構築することができました。
3. アプリ構成
技術スタックおよび構成は、以下で構築しました。
| 構成 | |
|---|---|
| 言語 | TypeScript |
| バックエンド | Node.js Express |
| フロントエンド | React.js Vite.js |
| データベース | MySQL(9.1.0) |
| 認証 | Google認証 |
4. デモ
主要な機能について、下記にムービーを添付します。
ログイン
家計簿データ管理_データ登録
検索
5. こだわりポイント
こだわったポイントは、デザインです。
前回まったく触れなかった部分だったので、今回は前回よりはと思い構築を行いました。
結果として、見るには耐えるかつ、自分でも使いたくなるデザインになったかなと思います。
6. 躓きポイント
躓きポイント
アプリの作成に当たって、大きく2点躓きがありました。
①フロントエンドとバックエンド間のデータ送受信の項目不足や型不整合
フロントエンドとバックエンド間のデータ送受信時の型不整合および受け渡し項目の不足が多く発生しました。
しらみつぶしに確認しながら構築を進めたため、時間がだいぶかかってしまいました。
②ファイル管理
今回の構築では、ファイル管理がうまくできていませんでした。
原因は、1つのファイルに多くの機能を詰め込んだことでした。
このため、実装が終盤に進むにつれて、どの処理がどの処理と関連にあるかがわかりづらくなり、修正のたびにデグレが発生しました。
とりあえず実装してみる形で実装を進めてしまったので、当初から機能ごとにファイルを分ける等を工夫して構築を進めるべきだったと反省しています。
7. まとめ
今回もアプリケーション開発を無事に終えられて何よりです。
加えて、前回のアプリ開発では構築できなかった機能を構築できたことは、前回からの成長かなと思います。また、デザイン面でも前回手を付けられなかったことを踏まえると大きく前進したと感じています。
その中で1から何かを作る経験の大変さを改めて感じました。
業務では、既にあるものをリファクタリングや追加開発などが多く、仕様理解が主だった業務となります。このため、1から何かを作ることはほとんどありません。
その中で自分が何を作りたいか。からそれを具体化し、モノとして構築する経験は個人開発ならで、難しい点だと思います。
また、自分が思い描く理想のアプリとのギャップも感じました。
特にエラーハンドリングや、画面切り替えの実装など、やりたいことがたくさんある中で、実現には技術的な面や時間の制約等、足りないと感じることが多い開発でした。
今回、半年間のアプリ開発で出た反省点を生かして、次は今回以上のより良いアプリを開発できるように頑張ります。