【Vue.js】福岡市以外の地域へ対応するためにやったこと【所得税・住民税・事業税・国保計算シミュレーション】
年始から3月まで仕事・プライベートと忙しくなかなか作業ができなかったですが、GWに時間ができたので所得税・住民税・事業税・国保計算シミュレーションをバージョンアップしました。
福岡県福岡市の計算にしか対応してませんでしたが、他の地域への対応をするため、手始めに福岡県春日市と東京都千代田区の住民税と国保の計算もできるようにしました。その際にやったことのまとめです。
他地域に対応するためにやったこと
大きく分けると以下4つです。
- Atomicデザインの組み込み
- Vuexのモジュール化
- 各地域の税率をマスタ化
- Axiosを使ったAPIの呼び出し
Atomicデザインの組み込み
Vue.jsを使った開発に慣れていなかったのもあり、コンポーネント分けが全然できておらず、1つの改修するにしても大変になってきており、このまま進めても破綻することが目に見えてました。
Vue.jsでデザインパターンを調べると、Atomicデザインが良く使われてるみたいなのでこちらを採用することにし、各機能をコンポーネントに分けました。
Atomicデザインは他のサイトに詳しく書かれてるので、良かった点・悪かった点を。
Atomicデザイン導入でよかった点・感想
- ソースが構造化され、メンテナンス性が上がった
- 入力コントロール（～万円入力するためのテキストボックスなど）も1コンポーネントにしたので処理やデザイン調整がらくになった
- ロジックとレイアウト部が分離できたので、ロジックに集中できるようになった。
Atomicデザイン導入で悪かった点・いまいちと感じた点
- 一番のきもとなるatoms,molecules,organisms,templatesの分け方がピンとこない
- 構造化にデザインセンスが問われるので、自分のセンスのなさに愕然とした
何回も作り直しました。。いまだにもっと言い分け方あるんじゃなかろうかと思います。
Vuexのモジュール化
モジュール化の目的
- Atomicデザイン組み込みで、各コンポーネント間の値のやり取りが増え煩雑になってきた
- localStorageに保存する入力値と計算結果などを明確に分けておきたい
- API経由で取得する各種税率の保持場所
もともとVuexは入力内容を保持し、最終的にlocalStorageへ保存する為だけに使用してました。ただ、Atomicデザインを組み込んでいくうちに各コンポーネントが分離され、その共通となる値や計算結果などをPropsやemitを用いてやりとりしていくのに限界を感じたので。結果的にやって大正解。こちらはDBと同じように考えれたのでAtomicデザインより楽でしたね！
1つ悪い点を挙げるなら、モジュール化するとgetterの呼び出しとかが文字列で階層をしていするので、入力補完が効かなくなることくらい。
各地域の税率をマスタ化
春日市は対応することが決まってたので、他のパターンとして東京都から千代田区をピックアップ。東京の23特別区以外は国保に資産割があるのでそちらの対応もできるような構造にしつつ、まずは福岡市と似たような計算式の地方自治体を選択しました。
現在以下4種の金額を計算できます
- 所得税
- 住民税
- 事業税
- 国民健康保険料
所得税は国税、事業税は地方税ですが地方自治体で税率は変わらないようなので、住民税と国民健康保険料が各地方自治体で計算が変わってきます。特に国民健康保険料は、ほぼすべての地域で違うので個々の持ち方をマスタ化できればOKでした。
ちなみに、マスタ化をするのであればデータをサーバサイドに持たせそれを取得するようにしないといけませんが、データベースを用意しサーバサイドのシステムを作りたくなかったので、Google SpreadSheetをデータベース代わりに利用してます。
https://kawadev.net/vuejs-gas/これで税率の違いだけの地方自治体は、Google SpreadSheetをメンテナンスするだけで対応できるように！速度は遅いですが、都道府県・地方自治体を一回選んでしまえばいいだけなので、まだ許容範囲かな。スプレッドシート側にデータがどんどん増えてくるなら、本格的にサーバサイド考えないといけないけど。
Axiosを使ったAPIの呼び出し
各地域の税率をマスタ化をGoogle SpreadSheet側に用意したので、そのAPIをコールするためにAxiosを導入しただけ。ただそれだけ。 Promiseは完全に把握まではいかなかったけど、前よりは理解度深まったかなぁ。
まとめ
Atomicデザインはいいけど、Vue.js（JSフレームワーク）初心者が最初から組み込もうとするとはまるので後からでもいい。
逆にVuexは、使うなら最初からモジュール化しといた方が構造がきれいになる。
自分用で作ったサービスなので、自由に構造考えなおせるので楽しいですね。