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

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

要件

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

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

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

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

データ構造を分析する

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号在庫
• 「アクション＋数量指定」フォーム＋送信ボタン（アクションに伴う増減値のヘルプも表示したい。）
• アクション履歴一覧＋修正
• 支出算定画面

まとめ

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