消費税計算ツール
消費税の税抜き価格と税込み価格を算出するツールです。
日本円と US ドルに対応しています（ドルの場合、各州により sales tax の税率が異なります）。
税額は日本円の場合は、1円未満の端数が発生する場合は切り捨てて計算しています。US ドルの場合は、1セント未満の端数が発生する場合は切り捨てて計算しています。
計算結果は正確性や確実性を保証するものではありませんので目安としてご利用いただければと思います。
作成日：2019年05月10日
税抜き価格計算ツール
消費税の税抜き価格を算出するツールです。
消費税が 8% の場合、「税抜き価格＝税込み価格÷1.08」になります。
税込み価格と税率を半角数字で入力して「実行」をクリックすると、税抜き価格と税額を表示します。
税率は指定しない場合は 8% になっています。
対象通貨で ドルを選択すると、小数点以下2桁まで算出します（例 1.25ドル = 1ドル25セント）。US ドルの場合、セールスタックス（sales tax）の税率は各州により異なります。
￥ (JP)
円
%
￥ (JP)
円
￥ (JP)
円
税込み価格計算ツール
消費税の税込み価格を算出するツールです。
税抜き価格と税率を半角数字で入力して「実行」をクリックすると、税込み価格と税額を表示します。
税率は指定しない場合は 8% になっています。
対象通貨で ドルを選択すると、小数点以下2桁まで算出します（例 1.25ドル = 1ドル25セント）。US ドルの場合、セールスタックス（sales tax）の税率は各州により異なります。
￥ (JP)
円
%
￥ (JP)
円
￥ (JP)
円
ツールの概要
このツールは HTML と JavaScript（jQuery）で作成しています。
値の処理はサーバーに送信する必要はないので、HTML は form 要素は使用せずにフォームの部品（input 要素など）で作成しています。
HTML の入力要素（input 要素）は新しい type 属性の type="number" を使用するか迷いましたが、日本円とドルの場合のステップ数が異なるのとあまり見やすくないので type="text" を使用しています。
また見栄え（スタイル）は Bootstrap4 を利用しています。
仕組みとしては jQeury のクリックイベントで input 要素に入力された値を使って計算した値を出力しています。
以下はこのツール（税抜き価格計算ツール）の 概要です。
HTML
<div id="calculator" class="calc"> <input type="radio" name="currency" id="yen" value="yen" checked> <label for="yen">円</label> <input type="radio" name="currency" id="dollar" value="dollar"> <label for="dollar">ドル</label> <input type="text" id="with_tax" name="with_tax" placeholder="税込み価格（半角数字）"> <input type="text" id="tax_rate" name="tax_rate" placeholder="税率（半角数字）"> <button id="calculate" name="calculate">実行</button> <input type="text" id="without_tax" name="without_tax" placeholder="税抜き価格（結果）"> <input type="text" id="tax" name="tax" placeholder="税額（結果）"> </div>
JavaScript
<script>
jQuery(function($){
//税抜き価格計算ツール
var with_tax = ''; //税込み価格
var tax_rate = ''; //税率
var without_tax = ''; //税抜き価格
var tax = ''; //税額
var currency = 'yen'; //対象通貨
//実行をクリックした際の処理
$("#calculate").click(function() {
//入力された税込み価格を変数に代入
with_tax = $("[name='with_tax']").val();
//入力された税率を変数に代入
tax_rate = $("[name='tax_rate']").val();
//選択されている（:checked）対象通貨を変数に代入
currency = $("[name='currency']:checked").val();
//対象通貨が円の場合
if(currency === 'yen') {
//parseInt で整数値に
with_tax = parseInt(with_tax);
//parseFloat で小数値に
tax_rate = parseFloat(tax_rate);
//税抜き価格を「税抜き価格＝税込み価格 ÷ (1 + 税率) 」として Math.ceil で切り上げ
without_tax = Math.ceil(with_tax/(1 + tax_rate/100));
//税抜き価格を出力
$("[name='without_tax']").val(without_tax);
//税額の計算
tax = with_tax - without_tax;
//税額を出力
$("[name='tax']").val(tax);
}else{
//対象通貨がドルの場合
with_tax = parseFloat(with_tax);
tax_rate = parseFloat(tax_rate);
//小数点以下2桁を対象に切り上げするので100倍して Math.ceil で切り上げ
without_tax = Math.ceil(100 * (with_tax/(1 + tax_rate/100)));
//100倍したのを戻す
without_tax = without_tax/100;
//浮動小数点数型の誤差が発生する場合があるので toFixed(2) で小数点以下2桁で四捨五入
$("[name='without_tax']").val(without_tax.toFixed(2));
tax = (with_tax - without_tax).toFixed(2);
$("[name='tax']").val(tax);
}
});
});
</script>
実際のマークアップとコード
以下はこのツール（税抜き価格計算ツール）の実際の HTML と JavaScript のコードです。
HTML
<div id="calculator" class="calc">
<div class="form-row">
<label for="currency">対象通貨</label>
<div class="input-group">
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="currency" id="yen" value="yen" checked>
<label class="form-check-label" for="yen">円</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="currency" id="dollar" value="dollar">
<label class="form-check-label" for="dollar">ドル</label>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="with_tax">税込み価格</label>
<div class="input-group">
<div class="input-group-prepend"> <span class="input-group-text currency_symbol">￥ (JP)</span> </div>
<input type="text" class="form-control" id="with_tax" name="with_tax" placeholder="税込み価格（半角数字）">
<div class="input-group-append"> <span class="input-group-text currency">円</span> </div>
</div>
</div>
<div class="form-group col-md-4">
<label for="tax_rate">税率</label>
<div class="input-group">
<input type="text" class="form-control" id="tax_rate" name="tax_rate" placeholder="税率（半角数字）">
<div class="input-group-append"> <span class="input-group-text">%</span> </div>
</div>
</div>
<div class="form-group col-md-2">
<label for="calculate">計算</label>
<div class="input-group">
<button id="calculate" name="calculate" class="btn btn-primary form-control">実行</button>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label for="without_tax">税抜き価格</label>
<div class="input-group">
<div class="input-group-prepend"> <span class="input-group-text currency_symbol">￥ (JP)</span> </div>
<input type="text" class="form-control" id="without_tax" name="without_tax" placeholder="税抜き価格（結果）" readonly>
<div class="input-group-append"> <span class="input-group-text currency">円</span> </div>
</div>
</div>
<div class="form-group col-md-4">
<label for="tax">税額</label>
<div class="input-group">
<div class="input-group-prepend"> <span class="input-group-text currency_symbol">￥ (JP)</span> </div>
<input type="text" class="form-control" id="tax" name="tax" placeholder="税額（結果）" readonly>
<div class="input-group-append"> <span class="input-group-text currency">円</span> </div>
</div>
</div>
</div>
</div>
<p id="alert"></p>
JavaScript
<script>
jQuery(function($){
//各種変数の初期化
var with_tax = '';
var tax_rate = '';
var without_tax = '';
var tax = '';
var alert_text ='';
//対象通貨の初期値設定（デフォルト yen）
var currency = $("[name='currency']:checked").val() ? $("[name='currency']:checked").val() : 'yen';
//税率の初期値設定（デフォルト 8%）
if($("[name='tax_rate']").val() =='') {
$("[name='tax_rate']").val(8);
}
//対象通貨が変更された際の処理用の関数（税込み価格計算でも使用）
function change_currency (obj) {
//obj は name='currency' のラジオボタンの jQuery オブジェクト
currency_val = obj.val();
if(currency_val === 'dollar') {
obj.closest('.calc').find("span.currency").text('ドル');
obj.closest('.calc').find("span.currency_symbol").text('$ (US)');
}else{
obj.closest('.calc').find("span.currency").text('円');
obj.closest('.calc').find("span.currency_symbol").text('￥ (JP)');
}
}
//対象通貨の現在の値を反映
change_currency ($("[name='currency']:checked"));
//対象通貨が変更された際の処理
$("[name='currency']").change(function() {
change_currency ($(this));
});
//実行をクリックした際の処理
$("#calculate").click(function() {
//メッセージテキストの初期化
alert_text ="";
//もし値があればクリア
$("#alert").text("");
with_tax = $("[name='with_tax']").val();
tax_rate = $("[name='tax_rate']").val();
currency = $("[name='currency']:checked").val();
//税込価格と税率の入力値が数値でない場合はメッセージを表示して終了
if(!$.isNumeric(with_tax) || !$.isNumeric(tax_rate)) {
if(!$.isNumeric(with_tax)) {
alert_text = '*「税込み価格」を半角数字で入力してください。'
$("#alert").text(alert_text);
}
if ( !$.isNumeric(tax_rate)) {
alert_text += '*「税率」を半角数字で入力してください。';
$("#alert").text(alert_text);
}
return;
}else {
//税込価格と税率の入力値が数値の場合
//税抜き価格の計算（日本円の場合）
if(currency === 'yen') {
//税込み価格
with_tax = parseInt(with_tax);
//税率
tax_rate = parseFloat(tax_rate);
//税抜き価格＝税込み価格 ÷ (1 + 税率) を切り上げ
without_tax = Math.ceil(with_tax/(1 + tax_rate/100));
$("[name='without_tax']").val(without_tax);
//税額
tax = with_tax - without_tax;
$("[name='tax']").val(tax);
}else{
//税抜き価格の計算（US ドルの場合）
with_tax = parseFloat(with_tax);
tax_rate = parseFloat(tax_rate);
//税抜き価格＝税込み価格 ÷ (1 + 税率) を100倍にして切り上げ（小数点以下対応）
without_tax = Math.ceil(100 * (with_tax/(1 + tax_rate/100)));
without_tax = without_tax/100;
//浮動小数点数型の誤差を toFixed(2) で対処（固定小数点表記を用いてフォーマット）
$("[name='without_tax']").val(without_tax.toFixed(2));
tax = (with_tax - without_tax).toFixed(2);
$("[name='tax']").val(tax);
}
}
});
});
</script>