💰

ノーコードツール「Click」:消費税計算する方法

に公開

はじめに

このページではノーコードツール「Click」のTipsを紹介しています。
https://click.dev/

今回は 消費税を計算 する方法を解説します。
税率が変わった場合にも対応できる方法で解説します。
完成イメージ
↑↑↑完成イメージ↑↑↑

では解説していきます。

①「消費税率」データベースを用意する

データベースに、消費税率・軽減税率を管理する 消費税率 テーブルを用意します。
項目は選択肢に表示する Name (○○%)、計算するための 税率 、税率を適用する 開始日終了日 です。
消費税率テーブル
2025/9現在の消費税率10%、軽減税率8%は、2019/10/01からなので、 開始日2019/10/01終了日 はひとまず 2050/12/31 にしておきます。また、0%も用意して 開始日2000/01/01 にしておきます。

②インプットとドロップダウンを用意する

次に画面を用意します。日付インプットエレメントとドロップダウンエレメントを1つずつ、インプットエレメントを3つ用意します。
画面左側パネルの 「エレメント」にある「データベース」からインプット、日付インプットとドロップダウン を選んでページに置きます。
インプットエレメントと日付インプットエレメント
ドロップダウンエレメント
日付インプットは「日付」、ドロップダウンは「消費税率」、インプットは「税抜金額」、「消費税額」、「税込金額」にします。それぞれの設定は以下の通りです。

「日付」:初期値「現在時刻」、フォーマット「日付入力」
日付インプットエレメントの設定
「税抜金額」:初期値「0」、種類「数値」
税抜金額インプットエレメントの設定
「消費税率」:データ「消費税率」、フィルター「開始日が日付以下」AND「終了日が日付以上」
消費税率ドロップダウンエレメントの設定
「消費税額」:初期値「カスタム関数」(税抜金額xForm Inputs→消費税率DB→税率)
消費税額インプットエレメントの設定
消費税額インプットエレメントのカスタム関数設定
消費税額インプットエレメントの計算式設定
「税込金額」初期値「カスタム関数」(税抜金額+消費税額)
税込金額インプットエレメントの設定
税込金額インプットエレメントの計算式設定

③動かしてみる1

設定はこれだけなので動かして確認してみます。
プレビューしてログインしたら下の画面になります。
プレビュー画面
試しに、 税抜金額を1000円、消費税率を10% にすると、 消費税額が100円、税込金額が1100円 と正しく計算されました。
消費税率10%の画面
消費税率を8% に変更すると、 消費税額が80円、税込金額が1080円 に変わりました。
消費税率8%の画面

④消費税率を変えてみる

将来、消費税率が上がった場合は、消費税率テーブルのレコードを追加・変更します。2028/04/01から10%→12%になったとして、 12%のレコード追加 します。合わせて 10%の終了日を前日の2028/03/31に変更 します。
消費税率テーブルの追加・変更

⑤動かしてみる2

再度プレビューして確認してみます。
日付を2028/4/1以降の日付に変更すると、消費税率の選択肢が10%→12%に変わります。
これはドロップダウンエレメントに設定したフィルターの設定によって、10%のレコードが対象外になり、12%のレコードが対象になるためです。
消費税率ドロップダウンに12%が表示される
税抜金額1000円、消費税率12% にすると、 消費税額が120円、税込金額が1120円 と正しく計算されました。

🎉完成!

これで「消費税の計算」が完成しました。
完成画面

まとめ

本記事では、ノーコードツール「Click」で消費税を計算する方法を解説しました。

ポイント

  1. 消費税率テーブルに税率と適用開始日、終了日を登録する
  2. ドロップダウンで選択した消費税率で計算する
  3. 日付のフィルターで表示させる消費税率をコントロールする

この方法を使えば、消費税率が変わる前に変わった後の消費税計算をすることも、消費税率が変わった後に変わる前の消費税計算をすることも可能なので、変わる前後でも柔軟に対応できます。
ぜひ活用してみてください。

Discussion