odiak's blog

Vue.js と今作ってる出費管理アプリについて

Vue.js

  • AngularJS と比べて小さく、いろいろなパーツを組み合わせてアプリを作る感じがいい。
    • Rails に対する sinatra みたいな感じ。
  • Vue に限った話ではないが、モジュールに分割して require する仕組みがとても気持ちいい。
    • AngularJS の Dependency Injection も本質的には同じか
  • AngularJS に比べて情報が少なくて、ベストプラクティスを自分で見つけないといけない感じがある。

出費管理アプリについて

  • http://money.odiak.net
  • Next という iOS アプリにインスパイアされて作った。
    • できるだけシンプルに、出費だけを管理したい。
    • Next は最近 Mac 版ができたが、同期がうまくできなかった。
    • 久しぶりに、 JS を書きたかった、というのもある。
  • サーバーは Sinatra と ActiveRecord
  • クライアントは Vue.js をベースに、サーバーとの通信は superagent 、ルーティングは page.js を使用。
  • 実は去年の秋頃から作っていて、設計が気に入らなかったり作るの飽きたりして何度か作り直した。
  • 今のところ、出費が月ごとにまとまるだけ。
  • そのうち、カテゴリー別ページとか、グラフとか実装したい。

ソースコードは Github に置いた。 odiak/money-app

完全に自分のために作りましたが、ユーザー登録すれば使えるので、使いたい方はどうぞ。

おまけ

出費管理アプリを作っている途中に、 Vue の component のテンプレートを JS 内に書きたいが、 HTML タグを書くのはキツイので、 JS のコードで slim 風のテンプレートが書ける何かを作った。最初の index.html 以外は全部これで書いてる。一つだけ面倒なのは、括弧の数を合わせるのに少しエネルギーが要ること。

↓こんな感じ。

var template =
  h('.edit-expense',
    h('h2', 'Edit expense'),
    h('div', {vComponent: 'expense-form', vWith: 'expense: expense',
        vIf: 'expense'}));