Flask（Part.42）｜【消費税額管理アプリケーションのプログラミング（１）管理者側】｜プログラミング学習おすすめ書籍情報発信パソコン初心者エンジニア希望者新人エンジニア IT業界への就職・転職希望者サポートサイト Programming learning Recommended schools Recommended books Information dissemination Computer beginners Prospective engineers New engineers Prospective job seekers in the IT industry Support site

python｜まとめ　| 現役エンジニア&プログラミングスクール講師「python」のまとめページです。pythonに関して抑えておきたい知識や文法やにについて記事をまとめています。まとめページの下部には「おすすめの学習書籍」「おすすめのITスクール情報」「おすすめ求人サイト」について情報を掲載中...

目標
消費税額管理アプリケーションの作成
- 消費税額管理アプリケーション
- 消費税額管理アプリケーションのプログラミング
ブックマークのすすめ

目標

消費税額管理アプリケーションを作成する。
伝票一覧と個別伝票に税込金額を表示する。

消費税額管理アプリケーションの作成

消費税額管理アプリケーション

ここからは、消費税額管理アプリケーションを作成して、伝票一覧と個別伝票に税込金額を表示する処理を実装します。

feature-vatappブランチの作成

Git Bushを立ち上げdevelopブランチから次のコマンドを入力してfeature-vatappブランチを作成して、ブランチの切り替えを行います。

git checkout -b feature-vatappコマンド

プロンプトに（feature-vatapp）と表示されます。消費税額管理アプリケーションはこのブランチで作成していきます。

消費税額管理アプリケーションに必要なディレクトリとファイルの作成

Visual Studio Codeのエクスプローラーから appsディレクトリに vatappディレクトリを作成します。

apps/vatappディレクトリに次のディレクトリとファイルを作成します。※作成するファイルについては、名前や中身について、今後変更することものもあります。

static/css/style.css
tamplates/manage_vat.html
templates/vat_base.html
tamplates/vat_form.html
tamplates/vat_list.html
app.py
forms.py
models.py

消費税額管理アプリケーションのプログラミング

models.pyの編集（vatapp内）

models.pyファイルを次のように編集します。

from apps.common.db import db


# 消費税額モデル
class Vat(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    number = db.Column(db.Integer)
    priority = db.Column(db.Boolean, default=False)

    def __repr__(self):
        return f"<Table {self.number}>"

forms.pyの編集（vatapp内）

forms.pyファイルを次のように編集します。

from flask_wtf import FlaskForm
from wtforms import BooleanField, IntegerField, SubmitField
from wtforms.validators import DataRequired


# 消費税額管理フォーム
class VatForm(FlaskForm):
    number = IntegerField("消費税額", validators=[DataRequired()])
    priority = BooleanField("優先フラグ", default=False)  # 優先フラグ用のフラグ
    submit = SubmitField("保存")

vat_base.htmlの編集（vatapp/templates内）

vat_base.html を次のように編集します。

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        {% block title %}
        <!-- 個別ページのタイトルがここに入る -->
        {% endblock %}
    </title>
    <link rel="stylesheet" href="{{ url_for('vat.static', filename='css/style.css') }}">

</head>

<body>

    <header>
        {% block header %}
        <!-- 個別ページのヘッダーがここに入る -->
        {% endblock %}
    </header>

    <main>
        {% block content %}
        <!-- 個別ページのコンテンツがここに入る -->
        {% endblock %}
    </main>

    <footer>
        <p>© 2025 howahowa store</p>
    </footer>
</body>

</html>

vat_list.htmlの編集（vatapp/templates内）

vat_list.html を次のように編集します。

{% extends "vat_base.html" %}

{% block title %}{{ title }}{% endblock %}

{% block header %}
<h1>{{ title }}</h1>
<ul>
    <li><a href="{{ url_for('vat.manage_vat') }}" class="button-link">消費税額管理ページ</a></li>
    <li><a href="{{ url_for('vat.add_vat') }}" class="button-link">消費税額を追加する</a></li>
</ul>
{% endblock %}

{% block content %}
<h2>{{ title }}</h2>
<ul class="vat-header">
    <li class="vat-item">
        <span>ID</span>
        <span>消費税額</span>
        <span>優先フラグ</span>
        <span>消費税額の編集削除操作</span>
    </li>
</ul>
<ul class="vat-list">
    {% for vat in vat %}
    <li class="vat-item">
        <span>{{ vat.id }}</span>
        <span>{{ vat.number }}</span>
        <span>
            {% if vat.priority %}
            <span class="priority-flag">優先</span>
            {% else %}
            <span class="priority-flag">通常</span>
            {% endif %}
        </span>
        <div class="button-group">
            <form action="{{ url_for('vat.edit_vat', vat_id=vat.id) }}" method="GET">
                <button type="submit" class="edit-button">編集</button>
            </form>
            <form action="{{ url_for('vat.delete_vat', vat_id=vat.id) }}" method="POST">
                <button type="submit" class="delete-button" onclick="return confirm('本当に削除しますか？')">削除</button>
            </form>
        </div>
    </li>
    {% endfor %}
</ul>

<a href="{{ url_for('vat.add_vat') }}" class="button-link">新しい消費税額を追加</a>
{% endblock %}