家計簿サイトを作ってみた

業務のための勉強にモバイル用家計簿サイトを作ってみました。家計簿というほどの機能もないのでkakememoという名前です。
https://sites.google.com/view/kakememo/

自分は個人では自分で使用するもの以外を作るモチベーションが全くないので、以前から使っていた家計簿アプリをリプレースしようかと思いました。

自分の家計簿アプリの使い方は完全に日々の記録用で、集計は自分でスプレッドシートに行っています。そのため既存の家計簿アプリは機能が多すぎる。むしろシンプルに日々の記録に特化した家計簿サイトを作ってみました。

主な開発環境は以下です。

  • Ionic React
  • Redux Toolkit
  • Firebase: Firestore, Authentication

元々の目的は会社のプロダクトがReactとReduxを使用しているので、それに慣れることです。ReactもReduxも最初から開発したのはこれが初めてです。

ReactはHooks使う情報と使わない情報がWebには混在しているので、情報調べるときは1年以内とかで検索かけて、Hooksの情報だけをさがしていました。useEffectの使い方だけは慣れが必要な気がしましたが、これ以外はそこまではまらなかった。

Reduxは情報が多すぎてベストプラクティスを探すのに苦労しました。Redux Toolkitはコード量少ないのが楽でいいです。

TypeScriptもまともに使うのは初めてでした。型があること自体はいいのですが、JSの各種ライブラリの公式ドキュメント自体には型が書いていないので、実際にはどの型を指定すればいいのかわからないのが結構はまりました。最初から型がある言語とは学習のしやすさの差があるように思います。

Ionicを使用したのはガワネィティブも含めて選択肢を柔軟にしておきたかったからです。UIは複雑なカスタマイズを考えなければ使いやすいです。このアプリではiOSでもMaterial Designで固定しています。デフォルトだとタイトルバーの文字がiOSだと中央寄せになるので見栄えが良くなく固定しました。またIonRouterOutletが結構通常のReact Routerと同じことやろうとすると失敗してハマりました。

全体としてはやはりWebはどうやってもWebという感じで、ネイティブアプリにはかなり劣ります。CapacitorでガワネイティブにしてもPWAとあまり変わりません。データはFirestore直結でローカルストレージには保存していないので、ローカルストレージに対してキャッシュのチューニングを行えばもっと早くなりそうな気はします。

初めて使う技術ばかりだったので開発期間は結構かかりましたが、モノとしては必要十分のものができたのではと思っています。