Because We Love Happy Coding

フリーライターからエンジニアへ。発信力だけあり余ってる感じ

文芸同人誌の会計+在庫処理を設計してみた

文芸同人誌『有象無象』の編集長をしている。会計を担当してくれている人がいろいろ管理に苦労しているので、管理するためのアプリを作ってみようと思った。ささっと作れるかと思ったけど(実際、手慣れた人ならささっと作れるレベルだろうけど)思ったよりはフクザツ。

要件

  • 管理すべきものは、現預金と同人誌の在庫。現金と預金。それに在庫は各号ごとに管理する。でも号で管理しない別冊とか作る可能性もあるから「表題」としておこう。
  • 活動は同人誌の発行と文学フリマ出展。支出はざっくりその時の参加会員で割っている。発行は寄稿者で、出展者は当日参加者で。支出に「精算済」フラグをつけて、未精算のものをチェックし、人数入れて割る「割り勘機能」も欲しい。

ユースケースっぽいものを分析する

ユースケース分析というほど本格的なものでもないが、ユーザーがやりたい「アクション」を列挙して整理する。今回の場合、収入や支出の入力をすることで、残高の変更や在庫数の変更をすることになる。「アクション」種別ごとに、金額の増減や在庫の増減をさせるような形を想定する。

あと見たいデータを見られるような画面設計もなんとなく。単純な残高、在庫数を見る部分と、過去の履歴というか推移を見られたらいいかなー。

データ構造を分析する

Vue.jsが採用しているVMMVモデルというのを完全に理解しているとはいえないのだけれど、StackOverflowで見たコメントを信じるなら「data first」ということらしいので、データ構造を考えるところから始める。

管理すべき項目を列挙していく。 今回はデータベースに保存するので、テーブル構造も一緒に考えておく。

ざっくりHTMLを書く

画面設計に沿って、簡単にHTMLを書く。この段階ではCSSはほったらかし。プロトタイプ的なもの。 Vue.jsのCDNにリンクする辺りから、コーディングっぽくなってくる。

Appの要素を定義し、値をバインディングする

js側ではnew Vueをして、Vue()の引数にオプションのオブジェクト{option:value}を渡す。

HTMLで値が変動するHTML要素にid属性を振り、Vueのオプションで「el:#display_data」のように指定する。elは予約語なのでAPIを参照のこと。

変動させたいデータを「data:変数」の形で記述する。

bar vue_app = new Vue({
el: #id,
data: money_amount
});

display_data要素の中にムスターシュで囲んだ変数{{money_amount}}を記述すると、変数の値が展開されて表示される。

<div id="display_data">{{money_amount}}</div>

属性に変数を渡したかったらv-bind。

要素の繰り返しはv-for。

イベントつかまえて関数を実行させるなら、Vueのオプションにmethodsを定義しておいてから、HTMLの要素にv-onを使う。

bar vue_app = new Vue({
el: #id,
data: {money_amount:''},
methods: {
        updateAmount: function(){
            // 動作を記述
        }
    }
});
<button v-on:click="updateAmount">

formのinput要素とかにv-modelを使ってバインドしてやると、input要素の値を変更するだけでJavaScriptの変数の値も変化する。

これがjQueryなんかだと、場合によっては「input要素のvalueの最新を取得する」「既存の値を破棄する」「変数の値を送信する」みたいな処理が出て来て煩雑になったりするけれど、Vue.jsでは常に「input要素のvalue == 変数の値」というのが保証されているので、最後の「変数の値を送信する」だけ考えれば良い。考えることが減るのはたしかにありがたい。

ユースケース

収入を入力する

  • 繰り越し deposit_reminders+
  • 会費 deposit_reminders+
  • 売上 cash_remainders+ or deposit_reminders+, stocks-
  • 雑収入 cash_remainders+ or deposit_reminders+

支出を入力する

  • 本誌の印刷・増刷 deposit_reminders-, stocks+
  • 出展料 deposit_reminders-
  • 郵送料 cash_remainders-
  • フリーペーパー印刷費 deposit_reminders-
  • 宅配便 cash_remainders-
  • 雑費 cash_remainders- or deposit_reminders-
  • 見本誌 stocks-

会費を算出する

期間に応じた支出を人数割 未会計の支出にチェックマークをつける。合計して人数で割る。

6月末と12月末で締め処理

繰り越しを行う(算出積算項目が増大することによる処理速度低下を防ぐ)

データ設計

  • tbl_現金 cash_remainders

    • id
    • タイムスタンプ
    • 残高
  • tbl_預金 deposit_remainders

    • id
    • タイムスタンプ
    • 残高
  • tbl_在庫 stocks

    • id
    • 表題
  • tbl_アクション actions

    • id
    • 種別 enum 0:繰り越し 1:会費 2:売上 3:雑収入 4:本誌の印刷・増刷 5:出展料 6:郵送・宅配料 7:フリーペーパー印刷費 8:雑費 9:見本誌
    • タイムスタンプ timestamp
    • 精算済 boolean

画面設計

  • データ表示: 現金残高、預金残高、002~006号在庫
  • 「アクション+数量指定」フォーム+送信ボタン(アクションに伴う増減値のヘルプも表示したい。)
  • アクション履歴一覧+修正
  • 支出算定画面

まとめ

さていつになったら実装できるかな……(汗)