消費税計算

便利ツールのまとめサイトトップ
消費税計算

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

金額	円

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

金額	税額
円クリップボードにコピーする	円クリップボードにコピーする

消費税計算の注意事項

計算結果などは正確性を保証するものではありません。
計算結果などに関して当サイトは一切責任を負いません。

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

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

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

jQuery v3.3.1
bignumber.js v8.1.1

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 浮動小数点数ライブラリ」などで検索してみてください。

消費税計算

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

文字数をカウントできます。

和暦と西暦を相互変換できます。

和暦または西暦から年齢を計算できます。

履歴書に必要な学校の入学年・卒業年を生年月日から計算できます。

単位変換（換算）

キロ、マイル、グラム、華氏などの様々な単位を相互変換（換算）できます。

カラーコード変換

カラーコード（16進数）とRGB値（10進数）を相互変換できます。

Webタイマー（カウントダウン）

Webタイマー（カウントダウン）です。ストップウォッチ機能もあります。

生活に便利な電話番号一覧

警察や消防などの緊急連絡先や電話番号案内などの電話番号を確認できます。

プロバイダーのカスタマーサポートの電話番号一覧

主なプロバイダーのカスタマーサポートの電話番号を確認できます。

タスク管理（ToDo）

自分のWebブラウザーだけでタスク管理（ToDo）ができます。

エクセル関数

エクセル関数を検索できます。

麻雀の点数計算

麻雀の和了時の点数（符数／翻数／役）を計算することができます。

便利なショートカット一覧

Windows 10やExcelなどで使用できる便利なショートカットを確認できます。

電気料金計算

消費電力、使用時間、使用日数、1kWh単価から電気料金を計算できます。

パスワード生成（作成）

大文字・小文字・数字・記号を含むランダムなパスワードを生成できます。

自分のグローバルIPアドレスを確認

自分がインターネットに接続する時のグローバルIPアドレスを確認できます。

名前	きょうみくん
身長	181.1cm
誕生日	1月21日
所属	日本ＰＣサービス株式会社
コメント	パソコン、インターネット、サーモン、ミルクティーが好きです。猫ではありません。エクセル家計簿の作り方など、技術的なコラムを書いているTech Blogも運営しています。

税率を設定して税込／税抜金額の消費税計算ができます | ちょっとした時にあると便利なWebブラウザー上で使用できるツール集です。

消費税計算

消費税計算の注意事項

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

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

HTML

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

入力内容を削除

計算を実行

エンターキーで実行

value属性の値を取得

前の計算結果の削除

桁区切りのコンマを削除

端数処理

消費税金額を計算

税込と税抜

桁区切りのコンマ

計算結果を表示

計算結果をコピー

計算結果を全選択

おわりに