消費税計算

税率を設定して税込/税抜金額の消費税計算ができます。

金額
税率 求める金額
端数処理 桁区切り
金額 税額

クリップボードにコピーする

クリップボードにコピーする

消費税計算の注意事項

  • 計算結果などは正確性を保証するものではありません。
  • 計算結果などに関して当サイトは一切責任を負いません。
出張/持込/宅配でパソコン修理・設定 24時間365日対応

消費税計算ツールについて

消費税計算ツールはJavaScriptで制作していて、浮動小数点数による誤差をなくすためにbignumber.jsを使用しています。掲載しているソースコードは解説のために改変や省略をしているので、実際のソースコードとは異なります。

使用しているJavaScriptのライブラリ

HTML

inputタグのpattern属性に「¥d*」を指定して、iPhoneで数字入力のキーパッドが表示されるようにしています。Androidなどでも表示されるようにするには別の方法を考える必要があります。

HTML
<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>

クリックされたボタンにクラスを追加

税率などの設定を取得するために、押されたボタンにクラスを付与します。
選択済みの場合を考慮して、一旦クラスの削除も行います。

JavaScript
$('.btn-group button').on('click', (e) => {
    $(e.currentTarget).parent().find('button').removeClass('selected');
    $(e.currentTarget).addClass('selected');
});

入力内容を削除

「クリアする」が押された時に金額が削除されるようにします。

JavaScript
$('#clear').on('click', () => {
    clearInput();
});

function clearInput(selector) {
    if (selector === undefined) {
        selector = '.clear-target';
    }
    
    $(selector).val('');
}

計算を実行

「計算する」またはエンターキーが押された時に消費税計算を実行します。
jQueryオブジェクトの変数名には$を付けています。

JavaScript
$('#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はエンターキーに割り当てられているキーコードです。

JavaScript
$('#input-amount').on('keypress', () => {
    if (window.event.keyCode === 13) {
        consumptionTaxCalc();
    }
});

value属性の値を取得

buttonタグのvalue属性の値はvalメソッドで取得できないので、attrメソッドを使用しています。

JavaScript
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();

前の計算結果の削除

再計算のために前の計算結果を削除します。

JavaScript
$resultAmount.val('');
$resultTax.val('');

桁区切りのコンマを削除

入力された金額から桁区切りのコンマを一旦削除します。

JavaScript
if (inputAmountVal.match(/,+/)) {
    inputAmountVal = inputAmountVal.replace(/,/g, '');
}

端数処理

端数処理の設定をします。
ROUND_DOWNが切り捨て、ROUND_UPが切り上げ、ROUND_HALF_UPが四捨五入で、DECIMAL_PLACESは小数点以下の桁数です。

JavaScript
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のメソッドを使用することで浮動小数点数による誤差をなくします。

JavaScript
tax = new BigNumber(inputTaxVal);
tax = tax.times(0.01).plus(1);

税込と税抜

設定に合わせて税込/税抜後の金額と差額を計算します。
税込の場合は入力された金額に消費税金額を乗算し、税抜の場合は除算(div)します。そしてtoStringメソッドの引数に10を指定して10進数にします。toStringメソッドを使用することで端数処理の設定が適用されます。

JavaScript
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メソッドでコンマを追加します。

JavaScript
if (inputFormatVal === '1') {
    resultAmount = amount.toFormat();
    resultDifference = difference.toFormat();
} else {
    resultAmount = amount;
    resultDifference = difference;
}

計算結果を表示

表示箇所にあるinputタグのvalue属性の値に金額をセットします。

JavaScript
$resultAmount.val(resultAmount);
$resultTax.val(resultDifference);

計算結果をコピー

「クリップボードにコピーする」が押された時に計算結果をクリップボードにコピーします。
使いやすくするための機能なので計算とは関係ありません。

JavaScript
$('#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);
}

計算結果を全選択

計算結果が押された時に計算結果を全選択します。
使いやすくするための機能なので計算とは関係ありません。

JavaScript
$('#result-amount, #result-tax').on('click', (e) => {
    $(e.currentTarget).select();
});

おわりに

数値を計算する際に一番問題になるのは浮動小数点数の扱いだと思います。bignumber.jsの他にも様々なライブラリがあるので、ツールを作成する際は「javascript 浮動小数点数 ライブラリ」などで検索してみてください。

出張/持込/宅配でパソコン修理・設定 24時間365日対応
出張/持込/宅配でパソコン修理・設定 24時間365日対応
きょうみくん
このサイトの管理者
名前 きょうみくん
身長 181.1cm
誕生日 1月21日
所属 日本PCサービス
コメント パソコン、インターネット、サーモン、ミルクティーが好きです。
猫ではありません。