2025年10月18日

Vue.js で家計簿アプリを作り始めた

 大昔、家族共用のデスクトップ Mac を新調した時に、「みんなの家計簿」が動かなくなった、という案件がありました。「みんなの家計簿」というのは、かつて金融広報中央委員会が開発・配布していた家計簿ソフトで、シンプルな使い勝手で妻が気に入っていたのですが、平成21(2009)年に公開が停止されてしまったのです。

20251013-1.jpg

知るぽると

無償家計簿ソフト「みんなの家計簿」の提供廃止等に関するお知らせ|知るぽると

金融広報中央委員会では、当ホームページで提供しております無償ダウンロードソフトの「みんなの家計簿」について、維持管理面でのテクニカルな制約が大きくなったこと等を勘案し、...

(2009年01月07日)

 そりゃそうですよね。公開していれば、当然サポートのために人員を割かないといけない。パソコンの OS アップデートにも対応していかないといけないし、それには相当なコストがかかります。役割を終えた、という判断は妥当でしょう。

 しかし、ユーザー側としては、代替品を見つけないといけないわけです。Excel でやりゃあいいんでしょうけど、費目ごとに小計を出すとか、それを前年同月比で比べるとか、まあ頑張ればできなくはないとは言え、かな〜り面倒です。

 家計簿アプリなんて山ほどあるだろう、としばらく探してみたのですが、レシートを自動で読み取ってクラウドに保存する、みたいなスタイルのものばかり見つかります。家計簿をクラウド保存するなんて、私(妻も)の感覚では到底受け入れられない仕様です。家計簿はローカルで完結してないとだめでしょう。

 というわけで、12年越しに重い腰を上げて、制作を始めました。まだ始めて1週間ぐらいで、メインの入力画面がやっとできたところです。

20251013-2.jpg

 今回は、Vue.js を使うことにしました。まずは Web アプリベースで書いて、そのあとデスクトップアプリに変換する、というのを一度やってみたかったのです。また、先日 paiza に登録したとき、「経験のあるフレームワーク」を聞かれて1つも答えられなかったので、1つぐらい答えられるようになりたい。

Vue.js

Vue.js - The Progressive JavaScript Framework

 コードは Visual Studio Code 上で、TypeScript を使って書いています。型チェックがなかなか強力で、数行書いては怒られて、という繰り返しです。ポンコツなコードに対する抑止力として働いてくれています。下の図は、value をつけ忘れているぞ、と怒られているところです。エラーメッセージが初見では意味不明ですが、何度も怒られるとだいたいパターン(怒られポイント)がわかってきます。いやまあ自分がポンコツなだけなんだけどさ。

20251013-3.jpg

 デスクトップアプリにする時には、Tauri を試してみようと思っています。

Tauri

Tauri 2.0

「クロスプラットフォーム・アプリ」構築ツールキット

 以前は、JavaScript で作成した Web アプリをデスクトップアプリにするには、ほぼ Electron 一択だったように思います。Electron は、Chrome エンジンを内蔵するため、アプリのサイズがべらぼうに大きいのがとても気になっていました。単機能のアプリで 100 MB を越えるのは、ちょっと容認できない。Tauri は、OS 内蔵のブラウザレンダリングエンジンを使うため、アプリサイズはずっと小さくなるそうです。

クロスマート Tech Blog

Electron vs Tauri vs Wails 実装して比較したお話 - クロスマート Tech Blog

おひさしぶりです!バックエンドエンジニアの宮崎です。 以前の記事でElectron + SvelteKitでデスクトップアプリを作った話を書かせていただきましたが、 今回はその簡単…

(2025年09月01日 02:00)

 Vue.js も Tauri も(Rust も)自分にとって全く新しい技術なので、時間がかかりそうです。ぼちぼち進めていきます。

Posted at 2025年10月18日 23:03:03
email.png