🔰

【初心者】Flutterで初めてアプリをリリースした話(家計簿アプリ)

に公開

家計簿アプリを開発

モバイルアプリ開発未経験でしたが、Flutterで家計簿アプリを開発し、リリースしました。
リリースした家計簿アプリはこちら(iOS)

https://apps.apple.com/jp/app/id6742489643

コンセプト

コンセプトは「サブカテゴリー」です。
具体的には、「食費」の中で「スーパー」と「外食」で分けたい!さらにそれぞれグラフにもしたい!と思ったのがきっかけです。

登録画面 グラフ表示 カレンダー表示

なぜアプリを開発しようと思ったのか

仕事で使う技術がレガシー(COBOL)で、将来性や市場の価値など...見つめ直して、何か新しい技術を身につけようと思ったためです。元々アプリ開発に興味があり、挑戦しました。

なぜ家計簿アプリ?

「家計簿」と検索すると数多の家計簿アプリがヒットします。以前は、私もその中のアプリの一つを利用していました。
UIも見やすくて、基本的な機能も揃っている...その中で、サブカテゴリーを中心機能としたシンプルで使いやすい家計簿アプリが欲しいと思ったのがきっかけです。

なぜFlutter?

理由のひとつは、マルチプラットフォームであることです。幅広いプラットフォームへ応用ができることは、今後ますます強みとなると思っています。
現時点ではiOSのみのリリースですが、今後androidでのリリースも予定しています。

マルチプラットフォームとしてはReact Nativeも選択肢としてはありますが、以下の2点から今回はFluuterを選択しました。

  • ウィジェットによるUIのカスタマイズ性の高さ(UIにも力を入れたい)
  • 豊富なマニュアルとドキュメント(初心者だったので)

アプリ概要

  • カテゴリー・サブカテゴリーの登録、訂正、削除、移行
  • 収入と支出の登録、訂正、削除
  • カレンダーでの収支の詳細表示
  • 円グラフによる内訳表示
  • 棒グラフによる推移表示
  • 収支の文字列検索とリスト表示
  • 定期収入・支出の登録、訂正、削除
  • テーマカラーの変更
  • 広告の削除(非消耗型アプリ内課金)
  • 問い合わせ

開発概要

期間

2024年4月〜2025年3月

開発言語

  • フロントエンド:Dart(Flutter)
  • バックエンド(問い合わせ機能):TypeScript(Node.js)

開発環境

  • Visual Studio Code
  • Xcode

利用した主なFlutterパッケージ

  • riverpod
  • flutter_hooks
  • go_router
  • sqflite

その他

  • FireBase (Functions, Remote Config, Analytics)
  • Google AdMob
  • RevenueCat
  • GitHub

感想・反省点

とにかくやってみようの精神で勉強しながら開発し始めました。
最初は簡単なアプリとして家計簿アプリを選んだのですが、進めていくうちに追加したい機能がどんどん増えてしまいました。結果としてスケジュールが伸びてしまいました...
初心者なので、もう少しシンプルなアプリを短期間に作るといったステップを踏んでも良かったと思っています。

特に大変だったのは、定期収支に関するロジックと大量データの扱いによるパフォーマンスの考慮です。一度大量の収支を繰り返し登録すると、画面がカクカクになってしまいました。StatefulWidgetを極力減らしconstにすることと、データ追加は1つのSQL文で一括追加できるように工夫することでパフォーマンスを向上できました。
最初の要件定義と設計はやっぱり重要ですね。

最終的には自分自身の納得のいくアプリを作ることができたのでよかったです。まだ実装したい機能もあるので定期的にアップデートしていきながら、次に開発するアプリを考えていきます!(スピード感を意識して開発します)

今後について

アップデートで追加したい機能は次の通り。

  • 収入・支出の登録画面で、定型内容をワンタップで設定するボタンの実装
  • バックアップ機能
  • Google Play Storeでのリリース

今まで自身の技術に自信がなくアウトプットできていませんでしたが、これからは自信がないからこそ積極的にアウトプットを意識していきます!

Discussion