4/5 給与所得者の所得税と住民税を計算するWEBアプリを作ろう
4/5 Create a web app that calculates income and resident taxes for salaried workers

YouTubeにアップした動画、「【日本語解説】4/5 給与所得者の所得税と住民税を計算するWEBアプリを作ろう」の補足説明の記事です。

Here's a little more about the 「【Python】4/5 Create a web app that calculates income and resident taxes for salaried workers」 video I uploaded to YouTube.

字幕を付けるなら、英語音声と日本語音声の二つに分けたほうが良いと思ったので、今回から同じ動画だが音声が日本語と英語に分かれたものをアップしました。

I thought it would be better to separate the video into English audio and Japanese audio instead of adding subtitles to the video, so I uploaded the same video with Japanese and English audio separately.

ページの頭に日本語解説動画、ページの最後に英語解説動画のリンクが貼られてます。

There is a Japanese explanation video at the top of the page, and an English explanation video link at the end of the page.

WEBアプリを仕上げていきましょう。

​Let's finish the web application.

税金計算用のJSファイルに全てのインプットフォームに対する処理を付け加えていきます。

We will add processing for all input forms to the JS file for tax calculation.

省略

var inputValues = JSON.stringify({
    "inputSalary": $('#input-salary').val(),
    "inputSid": $('#input-sid').val(),
    "A": $('#A').val(),
    "B": $('#B').val(),
    "C": $('#C').val(),
    "D": $('#D').val(),
    "tempIncome": $('#tempIncome').val(),
    "Expenses": $('#Expenses').val(),
    "F": $('#F').val(),
    "G": $('#G').val(),
    "H": $('#H').val(),
    "I": $('#I').val(),
    "J": $('#J').val(),
    "K": $('#K').val(),
    "L": $('#L').val(),
    "M": $('#M').val(),
    "N": $('#N').val(),
    "O": $('#O').val()
});

省略

所得控除の金額を入力するインプットフォームから値を取り出し、JSON形式にしてデータをPOST通信でFlask側の関数に送ります。

​It takes the value from the input form for entering the amount of the income deduction and sends the data in JSON format to the Flask function via POST.

省略

try:
    雑損控除 = int(request.json['A'])
    if 雑損控除 < 0:
        雑損控除 = 0
except:
    雑損控除 = 0
try:
    医療費控除 = int(request.json['B'])
    if 医療費控除 < 0:
        医療費控除 = 0
except:
    医療費控除 = 0
try:
    小規模企業共済等掛金控除 = int(request.json['C'])
    if 小規模企業共済等掛金控除 < 0:
        小規模企業共済等掛金控除 = 0
except:
    小規模企業共済等掛金控除 = 0
try:
    ひとり親控除 = int(request.json['D'])
    if ひとり親控除 < 0:
        ひとり親控除 = 0
except:
    ひとり親控除 = 0
# calculate temporary income ​deduction
try:
    一時所得収入 = int(request.json['tempIncome'])
    if 一時所得収入 < 0:
        一時所得収入 = 0
except:
    一時所得収入 = 0
try:
    一時所得経費 = int(request.json['Expenses'])
    if 一時所得経費 < 0:
        一時所得経費 = 0
except:
    一時所得経費 = 0

省略

HTML側にも必要な項目を付け加えていきます。

​We will add necessary items to the HTML side.

省略

<tr>
    <td>
        <h5 class="text-left"><b>各種控除</b></h5>
    </td>
    <td></td>
</tr>
<tr>
    <td class="align-middle text-success">基礎控除_所得税(円)</td>
    <td><input type="text" readonly class="form-control text-danger" id="basic-deduction-income"
            value="0">
    </td>
</tr>
<tr>
    <td class="align-middle text-info">基礎控除_住民税(円)</td>
    <td><input type="text" readonly class="form-control text-danger" id="basic-deduction-resident"
            value="0">
    </td>
</tr>
<tr>
    <td class="align-middle"><b>社会保険料控除</b>(円)</td>
    <td><input type="number" class="form-control" data-target="input-values" id="input-sid"
            placeholder="0" min="0" max="10000000000">
    </td>
</tr>
<tr>
    <td class="align-middle text-success">社会保険料控除_所得税(円)</td>
    <td><input type="text" readonly class="form-control text-danger"
            id="social-insurance-deduction-I" value="0">
    </td>
</tr>
<tr>
    <td class="align-middle text-info">社会保険料控除_住民税(円)</td>
    <td><input type="text" readonly class="form-control text-danger"
            id="social-insurance-deduction-R" value="0">
    </td>
</tr>
<!--  -->
<tr>
    <td class="align-middle"><b>雑損控除</b>(円)</td>
    <td><input type="number" class="form-control" data-target="input-values" id="A" placeholder="0"
            min="0" max="10000000000">
    </td>
</tr>
<tr>
    <td class="align-middle text-success" id="td1-A-I">雑損控除_所得税(円)</td>
    <td id="td2-A-I"><input type="text" readonly class="form-control text-danger" id="A-I"
            value="0">
    </td>
</tr>

省略

入力フォームの値をリセットするボタンも付け加えます。

​It also adds a button to reset the values in the input form.

省略

<div class="container text-center p-4">
    <button class="btn btn-danger" id="reset-button">リセット！</button>
</div>

省略

Pythonのクラスファイルにも必要な処理を付け加えていきます。

​We will add the necessary processing to the Python class files as well.

省略

class TaxCalc(ResidentTax):
    def __init__(self, 給与収入):
        super().__init__(給与収入)

    # Then, find out your take-home pay (Average value. ​If there is a bonus, it will be less...)
    def take_home_pay(self):

        社保所得住民税支払合計 = int(self.所得税_復興特別税) + int(self.住民税) + int(self.社会保険料控除)

        総収入 = int(self.給与収入 + self.一時所得金額)

        年手取り = int(総収入 - self.各種控除支払い分合計 - 社保所得住民税支払合計)

        return {
            '年収': f'{総収入:,}',
            '支払所得控除額合計': f'{int(self.各種控除支払い分合計):,}',
            '社保所得住民税支払合計': f'{int(社保所得住民税支払合計):,}',
            '手取年収': f'{int(年手取り):,}',
            '平均手取月収': f'{int(年手取り/12):,}',
        }

アプリケーション用のメインファイルも完成させていきます。

We will also complete the main file for the application.

入力された値を受け取り、適切な処理を施して、クラスファイルへ引き渡す為の関数を加えていきます。

We add functions to take the input value, process it appropriately, and pass it to the class file.

給与所得者税金計算/
    scripts/
        taxcalculator.py
    static/
        js/
            calculateSiAjax.js
            calculateTaxAjax.js
    templates/
        application.html
        index.html
    application.py
    保険料表.csv

正常に動くかどうかを確かめてみましょう。

​Let's see if it works properly.

色々な金額を入力して、遊んでみてください。

​Please enter various amounts and play with it.

次回はこのWEBアプリをHEROKUにアップロードして動くかどうか試してみることにしましょう。

Next time, let's upload this WEB application to HEROKU and see if it works.

以上です。お疲れ様です。

That's all. Thank you for your hard work.