スプレッドシートに真っ向勝負して家計管理アプリ作ってみた

結論

スプレッドシートは、

• 自由度の高さすごい
• 入力に対するUXの高さがすごい
• スタイルを任意に変えられるの便利

なぜこんな無謀を

スプレッドシートといえば、大体のwebサービスのアイディアは「それスプレッドシートで解決するんじゃね？」と言えるくらい自由度が高く、高機能なサービスです。
ましてや表計算ソフトで家計管理なんて至極真っ当な感じですが、いくつか理由があります。

微妙に実現できないことがある

些細なことですが、グラフのデータの対象範囲を可変に出来ないのがつらいです。
そのため、データが（行・列が）増えるたびにグラフの範囲を手動で変える必要があります。

やってみたいと思い続けていた

スプレッドシートはたしかに高機能ですが、Firebaseなどを使えばかなりローコストでより洗練されたものが作れると思い続けていました。
いつまでも手を動かさないとモヤモヤするので、とりあえず作って問題点を洗い出すことにしました。
あと、あわよくば公開して誰かに使ってほしいとか思っていた。

「スプレッドシートで大体のことは解決する」の検証

流石に主語がデカすぎますが、真っ向勝負するとどれくらい大変なのかを知りたいっていうのがありました。
頭より手が動く。

作ったもの

まだ Table の各セルに Input Field があるだけのただの表っぽい何かです。
onBlur で Firestore に保存されます。

作ってみて気づいた問題点

逆にここが解決すれば結構良いのでは？という点がいくつかでてきました。
スプレッドシートってこうやってできているんだな〜って感じで、まずは追いつくことが大事かなと。

入力のしやすさ

十字キーで移動できるのってめっちゃ便利
マウスでfocusなんて当然嫌で、tabキーで移動しますが、普通にtableタグを使って組むと横移動しかできないのがかなり入力の体験を落とします。
また、セルの範囲を選択してのコピペなどは実装も結構ハードそうな予感がしています🤔

自由に計算式を組めるようにする

例えば収支列は収入 - 支出で良いわけですが、計算式をハードコーディングするよりも列名指定とかで四則演算はできるようにしたいです。
そうしないと、全部手入力になって中々の面倒くささを感じます。

列を自由に追加できるようにする

これはNoSQLであるFirestoreの柔軟性が活きてくると思っています。
実装方法はシンプルで以下のようなheader行情報を保存して利用すれば柔軟な列追加ができると思います。

headers = [
  {
    type: 'income',
    name: '収入'
  }
]

スタイルを任意に

収入系は青色、支出系は赤色にしたり、前月比較で色を変えるなど、スプレッドシートなら条件付き書式で実現できることもできないと視覚から得られる情報がかなり限られてきます。

最後に

ここまで読んだ方は気づいたと思いますが、これはめちゃくちゃ車輪の再発明です。
スプレッドシートがすごいのは知っていましたが、家計管理の分野でスプレッドシートに対抗するには、全く別の付加価値がないと厳しいことが分かりました。
スプレッドシートで大体のことは解決するっていうのを痛感したのと、真っ向勝負はダメですね。
これに気づけたことが一番良かったです👌