消費税計算
税率を設定して税込/税抜金額の消費税計算ができます。
金額 | 円 |
---|
税率 | 求める金額 | ||
---|---|---|---|
端数処理 | 桁区切り |
金額 | 税額 |
---|---|
円 クリップボードにコピーする |
円 クリップボードにコピーする |
消費税計算の注意事項
- 計算結果などは正確性を保証するものではありません。
- 計算結果などに関して当サイトは一切責任を負いません。
消費税計算ツールについて
消費税計算ツールはJavaScriptで制作していて、浮動小数点数による誤差をなくすためにbignumber.jsを使用しています。掲載しているソースコードは解説のために改変や省略をしているので、実際のソースコードとは異なります。
使用しているJavaScriptのライブラリ
- jQuery v3.3.1
- bignumber.js v8.1.1
HTML
inputタグのpattern属性に「¥d*」を指定して、iPhoneで数字入力のキーパッドが表示されるようにしています。Androidなどでも表示されるようにするには別の方法を考える必要があります。
<table>
<tr>
<th>金額</th>
<td><input type="text" pattern="\d*" name="amount" id="input-amount" class="clear-target">円</td>
</tr>
</table>
<table>
<tr>
<th>税率</th>
<td class="btn-group">
<button type="button" name="tax" value="5">5%</button>
<button type="button" name="tax" value="8" class="selected">8%</button>
<button type="button" name="tax" value="10">10%</button>
</td>
<th>求める金額</th>
<td class="btn-group">
<button type="button" name="type" value="tax_inc" class="selected">税込金額</button>
<button type="button" name="type" value="tax_exc">税抜金額</button>
</td>
</tr>
<tr>
<th>端数処理</th>
<td class="btn-group">
<button type="button" name="fraction" value="truncation" class="selected">切り捨て</button>
<button type="button" name="fraction" value="roundup">切り上げ</button>
<button type="button" name="fraction" value="roundoff">四捨五入</button>
</td>
<th>桁区切り</th>
<td class="btn-group">
<button type="button" name="format" value="1" class="selected">あり</button>
<button type="button" name="format" value="0">なし</button>
</td>
</tr>
</table>
<div id="error"></div>
<table id="result">
<tr>
<th>金額</th>
<th>税額</th>
</tr>
<tr>
<td>
<input type="text" id="result-amount" class="clear-target">円<br>
<a id="result-amount-copy">クリップボードにコピーする</a>
</td>
<td>
<input type="text" id="result-tax" class="clear-target">円<br>
<a id="result-tax-copy">クリップボードにコピーする</a>
</td>
</tr>
</table>
<div id="result-copy-message"></div>
<div class="btn-group-submit">
<button type="button" id="clear">クリアする</button>
<button type="button" id="submit">計算する</button>
</div>
クリックされたボタンにクラスを追加
税率などの設定を取得するために、押されたボタンにクラスを付与します。
選択済みの場合を考慮して、一旦クラスの削除も行います。
$('.btn-group button').on('click', (e) => {
$(e.currentTarget).parent().find('button').removeClass('selected');
$(e.currentTarget).addClass('selected');
});
入力内容を削除
「クリアする」が押された時に金額が削除されるようにします。
$('#clear').on('click', () => {
clearInput();
});
function clearInput(selector) {
if (selector === undefined) {
selector = '.clear-target';
}
$(selector).val('');
}
計算を実行
「計算する」またはエンターキーが押された時に消費税計算を実行します。
jQueryオブジェクトの変数名には$を付けています。
$('#submit').on('click', () => {
consumptionTaxCalc();
});
$('#input-amount').on('keypress', () => {
if (window.event.keyCode === 13) {
consumptionTaxCalc();
}
});
function consumptionTaxCalc() {
let inputTaxVal = $('[name="tax"].selected').attr('value');
let inputTypeVal = $('[name="type"].selected').attr('value');
let inputFractionVal = $('[name="fraction"].selected').attr('value');
let inputFormatVal = $('[name="format"].selected').attr('value');
let inputAmountVal = $('[name="amount"]').val();
let $result = $('#result');
let $resultAmount = $('#result-amount');
let $resultTax = $('#result-tax');
let $error = $('#error');
let baseAmount;
let tax;
let amount;
let difference;
let resultDifference;
let resultAmount;
$resultAmount.val('');
$resultTax.val('');
if (inputAmountVal.match(/,+/)) {
inputAmountVal = inputAmountVal.replace(/,/g, '');
}
if (inputAmountVal.match(/^\d{1,20}$/)) {
if (inputFractionVal === 'truncation') {
BigNumber.set({
ROUNDING_MODE: BigNumber.ROUND_DOWN,
DECIMAL_PLACES: 0
});
} else if (inputFractionVal === 'roundup') {
BigNumber.set({
ROUNDING_MODE: BigNumber.ROUND_UP,
DECIMAL_PLACES: 0
});
} else if (inputFractionVal === 'roundoff') {
BigNumber.set({
ROUNDING_MODE: BigNumber.ROUND_HALF_UP,
DECIMAL_PLACES: 0
});
}
tax = new BigNumber(inputTaxVal);
tax = tax.times(0.01).plus(1);
amount = baseAmount = new BigNumber(inputAmountVal);
if (inputTypeVal === 'tax_inc') {
amount = amount.times(tax).toString(10);
amount = new BigNumber(amount);
difference = amount.minus(baseAmount);
} else if (inputTypeVal === 'tax_exc') {
amount = amount.div(tax).toString(10);
amount = new BigNumber(amount);
difference = baseAmount.minus(amount);
}
if (inputFormatVal === '1') {
resultAmount = amount.toFormat();
resultDifference = difference.toFormat();
} else {
resultAmount = amount;
resultDifference = difference;
}
$result.show(0);
$error.hide(0);
$error.text('');
$resultAmount.val(resultAmount);
$resultTax.val(resultDifference);
} else if (inputAmountVal.match(/^\d{21,}$/)) {
$error.text('金額は9999京以下で入力してください');
} else {
$error.text('金額を入力してください');
}
if (!inputAmountVal.match(/^\d{1,20}$/)) {
$result.hide(0);
$error.show(0);
$resultAmount.val('');
$resultTax.val('');
}
}
エンターキーで実行
13はエンターキーに割り当てられているキーコードです。
$('#input-amount').on('keypress', () => {
if (window.event.keyCode === 13) {
consumptionTaxCalc();
}
});
value属性の値を取得
buttonタグのvalue属性の値はvalメソッドで取得できないので、attrメソッドを使用しています。
let inputTaxVal = $('[name="tax"].selected').attr('value');
let inputTypeVal = $('[name="type"].selected').attr('value');
let inputFractionVal = $('[name="fraction"].selected').attr('value');
let inputFormatVal = $('[name="format"].selected').attr('value');
let inputAmountVal = $('[name="amount"]').val();
前の計算結果の削除
再計算のために前の計算結果を削除します。
$resultAmount.val('');
$resultTax.val('');
桁区切りのコンマを削除
入力された金額から桁区切りのコンマを一旦削除します。
if (inputAmountVal.match(/,+/)) {
inputAmountVal = inputAmountVal.replace(/,/g, '');
}
端数処理
端数処理の設定をします。
ROUND_DOWNが切り捨て、ROUND_UPが切り上げ、ROUND_HALF_UPが四捨五入で、DECIMAL_PLACESは小数点以下の桁数です。
if (inputFractionVal === 'truncation') {
BigNumber.set({
ROUNDING_MODE: BigNumber.ROUND_DOWN,
DECIMAL_PLACES: 0
});
} else if (inputFractionVal === 'roundup') {
BigNumber.set({
ROUNDING_MODE: BigNumber.ROUND_UP,
DECIMAL_PLACES: 0
});
} else if (inputFractionVal === 'roundoff') {
BigNumber.set({
ROUNDING_MODE: BigNumber.ROUND_HALF_UP,
DECIMAL_PLACES: 0
});
}
消費税金額を計算
選択された税率設定に合わせて消費税金額を計算します。
timesは乗算、plusは加算です。bignumber.jsのメソッドを使用することで浮動小数点数による誤差をなくします。
tax = new BigNumber(inputTaxVal);
tax = tax.times(0.01).plus(1);
税込と税抜
設定に合わせて税込/税抜後の金額と差額を計算します。
税込の場合は入力された金額に消費税金額を乗算し、税抜の場合は除算(div)します。そしてtoStringメソッドの引数に10を指定して10進数にします。toStringメソッドを使用することで端数処理の設定が適用されます。
if (inputTypeVal === 'tax_inc') {
amount = amount.times(tax).toString(10);
amount = new BigNumber(amount);
difference = amount.minus(baseAmount);
} else if (inputTypeVal === 'tax_exc') {
amount = amount.div(tax).toString(10);
amount = new BigNumber(amount);
difference = baseAmount.minus(amount);
}
桁区切りのコンマ
桁区切りをありで設定している場合は、toFormatメソッドでコンマを追加します。
if (inputFormatVal === '1') {
resultAmount = amount.toFormat();
resultDifference = difference.toFormat();
} else {
resultAmount = amount;
resultDifference = difference;
}
計算結果を表示
表示箇所にあるinputタグのvalue属性の値に金額をセットします。
$resultAmount.val(resultAmount);
$resultTax.val(resultDifference);
計算結果をコピー
「クリップボードにコピーする」が押された時に計算結果をクリップボードにコピーします。
使いやすくするための機能なので計算とは関係ありません。
$('#result-amount-copy').on('click', () => {
copy('#result-amount');
});
$('#result-tax-copy').on('click', () => {
copy('#result-tax');
});
function copy(selector) {
let $str = $(selector);
$str.select();
document.execCommand('copy');
let $messageId = $('#result-copy-message');
$messageId.addClass('show');
setTimeout(() => {
$messageId.removeClass('show');
},1000);
}
計算結果を全選択
計算結果が押された時に計算結果を全選択します。
使いやすくするための機能なので計算とは関係ありません。
$('#result-amount, #result-tax').on('click', (e) => {
$(e.currentTarget).select();
});
おわりに
数値を計算する際に一番問題になるのは浮動小数点数の扱いだと思います。bignumber.jsの他にも様々なライブラリがあるので、ツールを作成する際は「javascript 浮動小数点数 ライブラリ」などで検索してみてください。
税率を設定して税込/税抜金額の消費税計算ができます。
文字数をカウントできます。
和暦と西暦を相互変換できます。
和暦または西暦から年齢を計算できます。
履歴書に必要な学校の入学年・卒業年を生年月日から計算できます。
キロ、マイル、グラム、華氏などの様々な単位を相互変換(換算)できます。
カラーコード(16進数)とRGB値(10進数)を相互変換できます。
Webタイマー(カウントダウン)です。ストップウォッチ機能もあります。
警察や消防などの緊急連絡先や電話番号案内などの電話番号を確認できます。
主なプロバイダーのカスタマーサポートの電話番号を確認できます。
自分のWebブラウザーだけでタスク管理(ToDo)ができます。
エクセル関数を検索できます。
麻雀の和了時の点数(符数/翻数/役)を計算することができます。
Windows 10やExcelなどで使用できる便利なショートカットを確認できます。
消費電力、使用時間、使用日数、1kWh単価から電気料金を計算できます。
大文字・小文字・数字・記号を含むランダムなパスワードを生成できます。
名前 | きょうみくん |
---|---|
身長 | 181.1cm |
誕生日 | 1月21日 |
所属 | 日本PCサービス株式会社 |
コメント |
パソコン、インターネット、サーモン、ミルクティーが好きです。 エクセル家計簿の作り方など、技術的なコラムを書いているTech Blogも運営しています。 |