3/5 給与所得者の所得税と住民税を計算してみよう
3/5 Let's calculate the income tax and resident tax for salaried workers

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

Here's a little more about the 「【Python】3/5 Let's calculate the income tax and resident tax 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.

それではFlaskを使ったWEBアプリを作成しましょう。

​Now let's create a web application using Flask.

前回保存した社会保険料の表のCSVファイルをアプリ用のフォルダにコピーします。

​Copy the CSV file of the previously saved social insurance premium table to the application folder.

それから、アプリに必要なファイルとフォルダを作成していきます。

Then, create the necessary files and folders for the application.

給与所得者税金計算フラスコ\
    script\
        taxcalculator.py
    static\
        js\
            siscript.js
            taxscript.js
    templates\
        application.html
        index.html
    application.py
    保険料表.csv

いつものように、HTMLファイルを作成します。

​Create an HTML file as usual.

Jinja2を使用して税金を計算するアプリへのリンクボタンと、アプリ用のHTMLファイルの表示領域とタイトルを作成します。

Create a link button to the app that uses Jinja 2 to calculate the tax and a display area and title for the HTML file for the app.

index.html

<div class="container">
    <h3 class="text-center p-3">{{ description }}</h3>
    <div class="text-center p-3">
        <a href={{ tax_link }}> <button class="btn btn-primary">{{ btn_text_tax }}</button></a>
    </div>

    {% block tax %}
    {% endblock %}
</div>

application.html

{% extends "index.html" %}
{% block tax %}
{% endblock %}

いつも通りに、Flaskを使ったアプリ用のPythonファイルを作成します。

​As usual, create a Python file for your Flask app.

application.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():

    description = """
    所得税と住民税を計算するアプリ 
    """
    btn_text_tax = '給与所得者の所得税と住民税を計算する'

    tax_link = '/application_layout'

    index_content = {
        'description': description,
        'btn_text_tax': btn_text_tax,
        'tax_link': tax_link,
    }

    return render_template('index.html', **index_content)
if __name__ == "__main__":
    app.run()

アプリが動くかどうか試してみましょう。

Let's see if the application works.

python application.py

アプリケーションのHTMLを作成していきます。

​Create the HTML for the application.

Ajaxを利用して、スムーズに数値を更新できるようにJSファイルを作成していきましょう。

​Using Ajax, let's create a JS file to update numbers smoothly.

windows.load()はページが完全に読み込まれたらスクリプトが実行されるようになります。

​windows.load() will run the script when the page is completely loaded.

ボタンが押されたら、インプットフォームの数値が読み込まれます。

​When the button is pressed, the input form values will be read.

そして、Ajaxを使い、指定したURLにPOST通信します。

​It then uses Ajax to POST to the specified URL.

Flask側で指定されたURLにアクセスがあった時に発動する関数を用意して、その関数にJSON形式でデータを渡すようにします。

​Provide a function to fire when the URL specified by Flask is accessed, and pass the data to that function in JSON format.

そしたら、Flask側でJSONをPythonで扱えるようにして、その値を計算をして、再度JSONにしてブラウザに返します。

Then Flask makes JSON available in Python, computes the value, turns it back into JSON, and sends it back to the browser.

返されたJSONをJavascript側で処理して、その値をHTMLに表示させます。

The Javascript side processes the returned JSON and displays the value in HTML.

ではFlask側で使われる関数を作成していきましょう。

Now let's create a function for the Flask side.

前回まで作ったスクリプトファイルをコピペしていくだけです。

All you have to do is copy and paste the script files you created previously.

これまでに作ったスクリプトが動くかどうか試してみましょう。

​Let's see if the scripts we've written work.

控除額を入力できるフォームをHTMLファイルに追加していきます。

Continue adding forms to the HTML file that allow you to enter deductions.

今度はキーボードを使って数値を入力したら値が更新されるようなJSスクリプトを作成していきましょう。

​Now let's create a JS script that updates the values as you type them on the keyboard.

先ほど作成したJSファイルと仕組みと内容は殆ど変わりません。

​The JS file I created is almost the same in structure and content.

では、前回作ったクラスファイルをコピペしていきましょう。

​Now, let's copy and paste the class file we created last time.

一つの大きなクラスファイルになりますが、継承を使って分割しているので、機能毎に編集することは簡単になります。

​It will be a single large class file, but it is split using inheritance, making it easy to edit each feature.

アプリのメインとなるPythonファイルに、クラスファイルをインポートしてテストしてみましょう。

Import and test class files into the main Python file of your app.

スクリプトとファイルの名前を少し変更します。

Rename the script and file slightly.

インプットフォームからの値を一気に取得できるように、divにIDを付けてインプットフォームを一つにまとめます。

​Add an ID to the div to combine the input forms so that you can get all the values from the input form at once.

ローカル環境がオフラインになってもアプリのテストができるように、BootstrapとJQueryのコードをダウンロードします。

Download Bootstrap and JQuery code to test the app even when your local environment is offline.

それぞれをダウンロードし終わったら、Bootstrapのフォルダを解凍して、そのフォルダの中のJSフォルダにJQueryのコードを移動して、さらにアプリのstaticフォルダに移動します。

After downloading each one, unzip the Bootstrap folder, move the JQuery code to the JS folder in that folder, and then move it to the app's static folder.

あとはindex.html内にCSSファイルとJSファイルへのパスを記述するだけです。

All you have to do is write the path to the CSS and JS files in index.html.

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

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