控除額シミュレーションのnpmライブラリを公開しました

この記事は、トラストバンク Advent Calendar 2023の3日目です。

お疲れさまです。フロントエンドエンジニアの片柳です。
先日、トラストバンクからふるさと納税の控除額シミュレーションライブラリfurusato-tax-simulationがリリースされましたので、紹介と実装時に考えたことなどを紹介できればと思います。

www.npmjs.com

なぜライブラリを作るのか

トラストバンクが提供するふるさと納税サイト「ふるさとチョイス」では、2種類の控除上限額シミュレーションを提供しています。

「家族構成」「年収」から簡単に上限額を知ることができる簡易シミュレーション。

簡易シミュレーション

源泉徴収票を利用して、より細かな上限額を知ることができる詳細シミュレーション。

詳細シミュレーション

これらはJavaScriptを用いて各ページに実装されています。
ふるさとチョイスの他にも、トラストバンクが提供する多くのウェブサイトやアプリの中で、それぞれが独自の実装を行い、運用を行なっています。

私たちが支払う税金や、ふるさと納税にまつわる法律は日々更新されていきます。
シミュレーション結果が変わるたび、各サービスの運用者がそれぞれで修正を行うのでは手間も時間もかかります。
また、新しくふるさと納税サイトを立ち上げたいと考えているパートナーが、0から控除上限額計算の資料を読み解いてシミュレーションを作成することは難しく、「控除上限額シミュレーションを掲載したいのにできない」と、ハードルを生むことにも繋がっていました。

すべてのサービスの運用工数を下げたい社内と、従来よりも簡単に控除上限額シミュレーションを実装したい社外の双方に向け、furusato-tax-simulationは作成されました。

どうやってライブラリを作るのか

以前、社内向けのライブラリとして、eslint-config-trustbankを公開したことがあった*1ため、npmライブラリの作成方法については大まかに知見がありました。
（「トラストバンクのフロントエンドを支える（予定の）ESlint」もぜひご一読ください） tech.trustbank.co.jp

index.jsを作成するだけでよいESLintのコンフィグとは異なり、今回のライブラリでは

TypeScriptをコンパイルし
複数のファイルを1つにまとめ上げ
ES Modules/Common.jsなど、環境ごとに異なる記法になるように書き分ける

といった作業が必要となります。
月並みですが、Rollup.jsを用いて環境構築を行いました。

Rollup.jsをベースとしたビルドツールとして有名なViteにも、ライブラリのためのJavaScriptを書き出すための専用モードがありますが、今回は利用していません。
想定通りの書き出しを行うためにはVite上でRollup.jsの設定情報を上書きする必要があり、それなら最初からRollup.jsを利用したほうがシンプルだろうと判断しました。

具体的な設定はrollup-minimum-setupにアップロードされていますので、興味がある方はぜひご覧ください。
今回のライブラリも、このリポジトリをフォークして作成しました。

github.com

バージョン管理と運用保守

一度公開したnpmパッケージを更新するためには、必ずバージョンを更新しなくてはいけません。
npmにはいくつかのバージョンアップコマンドが存在するため、更新の規模によって、以下のように使い分けるように運用方針を定めました。

コマンド	バージョンの変更	対応する更新
`npm version patch`	1.0.0 -> 1.0.1	関数から返却される数値やレスポンスの形が変わらない軽微な修正
`npm version minor`	1.0.0 -> 1.1.0	計算式の更新など、関数から返却される数値が変わる修正
`npm version major`	1.0.0 -> 2.0.0	関数から返却されるレスポンスの形変わる修正