今年の4月から、半年かけて、Webアプリケーションを1から作成しました。
作成したのは「家計簿アプリ」です。
1. ツール概要
①アプリの目的
現金の入出金を管理および、1ヶ月における家計の入出金を把握できる「家計簿アプリ」を目的として、作成しました。
②アプリ作成背景
個人的な話になりますが、私は家計簿をつけるタイプです。
現在も家計簿をつけるために使用している家計簿アプリがあるのですが、このアプリがサービス改悪を行い、データの閲覧期間が、[全期間]→[直近1年間]へ変更となりました。
（調べれば私が使用しているアプリがばれそうですが。）
このことから、"自分が使うため" に家計簿アプリの作成を行いました。
③アプリ使用者
②で書いた通り、自分自身です。ほかに使用者は全く想定していませんでした。
（このことから、CSS等は全く手を付けていません。自分が使えればOKの精神で作成進めていました。）
さて、概要を記載したところで、次はアプリの機能について記載します。
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}$ |
| $\textsf{カテゴリの削除}\hspace{5em}$ | $\textsf{既存のカテゴリを削除する機能}\hspace{10em}$ |
計画段階では、[集計]カテゴリでグルーピングしてデータを表示させたり、[CSV]カテゴリでCSVファイルの入出力機能を備える予定だったのですが、スケジュールの都合により、今回は断念しました。
3. アプリ構成
構成は、以下で進めました。
| 当初使用予定 | 実際に使用 | |
|---|---|---|
| バックエンド | Python（3.11） | Node.js Express |
| フロントエンド | TypeScript（Next.js） | HTML CSS JavaScript |
| データベース | Cloud Functions for Firebase | SQLServer |
| FaaS | Google Cloud Functions | - |
全般的に当初と比べると、大きく構成を変更しました。
当初計画では、バックエンドはPythonを使用予定でしたが、直近、Node.jsを使用して物を作ることが多かったため、Node.jsおよびExpressを使用しました。
また、本アプリはローカル環境でのみ動作します。当初予定ではクラウド環境に乗っけて動かすことを想定していたため、データベースは「Cloud Functions for Firebase」を使用予定でしたが、ローカルでの動作のみに変更したため、以前業務で使用したことがあり馴染み深い「SQLServer」に変更しました。
4. デモ
ログイン機能、データ登録機能、カテゴリの追加機能について、下記にムービーを添付します。
ログイン
金額入力
カテゴリ登録
5. こだわりポイント
カテゴリを削除した際に、カテゴリに紐づいている金額データを削除する点は設計段階から想定していた点だったため、この部分はこだわりを持って実装を行いました。
6. 躓きポイント
アプリの作成に当たって、大きく2点躓きがありました。
①SQLServerからSELECTでデータ取得ができない。
SQLServerへINSERTは実行できたのですが、SELECTでデータを画面へ表示させることがなかなかできず、かなり時間を取られました。原因としては、アプリ→SQLServerの接続設定にて、ストリーミングモードの設定を接続設定欄でしか設定しておらず、クエリ実行時には有効としていなかったことが原因でした。
特にストリーミングモードでSELECTする必要もないかと思い、ストリーミングモードでの実行を避けて対処しました。
②メイン画面で他ユーザーのデータが表示される。
ログインを実行後、メイン画面に遷移し、画面にデータを表示しているのですが、このデータが他ユーザーで登録したデータも表示される仕様となっていました。
原因としては、単にログインユーザーのデータがメイン画面へ引き継がれていない点と、画面上でもユーザー単位でデータを取得しておらず、すべてのデータを出力してしまっていたためでした。
後者に関してはすぐに対応したのですが、ログインユーザーのデータがメイン画面へも引き継ぐ点は時間がかかりました。
対応としては、トークンを使用し、認証を行うことで対応しました。
7. まとめ
初めて1人でアプリの開発を行いました。
アプリ開発で感じたことは2点あり、1点目はアプリ作成に関しての見通しの甘さ。2点目は作成のモチベーションを保つことの難しさです。
見通しの甘さに関して、当初の計画では、5つの機能を持つアプリを作成予定でしたが、最終的に作成したアプリでは機能が3つのみ、また、当初掲げていた技術選定とは全く異なる技術を用いたアプリ作成となりました。
自分が技術を知らないことにより、理想として作成したいアプリ構成と、現実を考えた時にギャップがあったことから見通しが甘くなったと考えているので、自分でモノをたくさん作り、モノづくりの経験を積むことが必要ではないかと考えます。
2点目のモチベーションを保つことに関しては、実装の段階で感じました。
今回のアプリ作成は、"自分が使う"ことを目的に作成しました。
ですが、現時点で使用している家計簿アプリで機能としては十分であり、自分でアプリを作成するモチベーションが上がらない状態となってしまったため、実装が後ろへ延びてしまい、当初掲げた機能をすべて実装しきることができませんでした。
今回、半年間のアプリ開発で出た反省点を生かして、次は今回以上のより良いアプリを開発できるように頑張ります。