プログラミング

Flask での WTForms 操作

最終更新： 16/04/2025
1 分の読み

Flask フレームワークにおける WTForms の取り扱いについて、特にテキストフィールド、数値フィールド、および日付フィールドの操作方法に焦点を当てた完全かつ包括的なガイドをお届けします。

1. WTForms の基本

Flask は軽量で柔軟なウェブアプリケーションフレームワークであり、WTForms はそのフォーム処理のために非常に役立つライブラリです。WTForms は、HTML フォームの生成やバリデーションを簡単に行うためのツールを提供します。これにより、ユーザー入力を効率的に処理し、セキュリティやエラーハンドリングも簡素化することができます。

関連記事

1.1 Flask で WTForms を使う準備

まず、Flask プロジェクトに WTForms を導入するためには、次の手順でインストールを行います：

bash
pip install flask-wtf

次に、Flask アプリケーションに WTForms を統合します。通常、Flask-WTF ライブラリが WTForms の機能を Flask アプリに統合する役割を果たします。アプリケーション設定で秘密鍵を指定することも重要です：

python
from flask import Flask, render_template, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, IntegerField, DateField
from wtforms.validators import DataRequired

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your_secret_key'

2. フォームのフィールドタイプ

2.1 テキストフィールド (StringField)

テキスト入力はフォームで最も基本的なフィールドの1つです。StringField はユーザーに文字列データを入力させるためのフィールドです。バリデーションには DataRequired を使い、入力が必須であることを保証できます。

python
class MyForm(FlaskForm):
    name = StringField('名前', validators=[DataRequired()])

このフォームをテンプレートにレンダリングすることで、 の HTML フィールドが作成されます。

html
<form method="POST">
    {{ form.hidden_tag() }}
    <div>
        {{ form.name.label }}: {{ form.name() }}
    div>
    <button type="submit">送信button>
form>

2.2 数値フィールド (IntegerField)

ユーザーから数値を受け取る場合は、IntegerField を使用します。例えば、年齢や数量などを入力させる場合です。IntegerField は、数値データのみを受け付けるようにバリデートします。

python
class MyForm(FlaskForm):
    age = IntegerField('年齢', validators=[DataRequired()])

IntegerField では、数字以外の入力があった場合にはエラーが発生します。テンプレートでレンダリングする際も、HTML フォームの タグに変換されます。

html
<form method="POST">
    {{ form.hidden_tag() }}
    <div>
        {{ form.age.label }}: {{ form.age() }}
    div>
    <button type="submit">送信button>
form>

2.3 日付フィールド (DateField)

日付入力を受け付けるためには、DateField を使用します。これを使うことで、ユーザーに特定の日付を入力させることができます。DateField には、validators で日付の形式をチェックする機能もあります。

python
class MyForm(FlaskForm):
    birthdate = DateField('生年月日', format='%Y-%m-%d', validators=[DataRequired()])

ここでは、%Y-%m-%d というフォーマットを指定して、年-月-日の形式で入力を求めています。DateField は、適切な日付フォーマットで入力されない場合、エラーを発生させます。

html
<form method="POST">
    {{ form.hidden_tag() }}
    <div>
        {{ form.birthdate.label }}: {{ form.birthdate() }}
    div>
    <button type="submit">送信button>
form>

3. フォームの処理

フォームの送信とバリデーションを行うには、ビュー関数内でフォームのインスタンスを作成し、validate_on_submit() メソッドを使用してフォームが正しく送信されたかを確認します。

python
@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()
    if form.validate_on_submit():
        # フォームのデータが有効な場合、処理を行う
        name = form.name.data
        age = form.age.data
        birthdate = form.birthdate.data
        return redirect(url_for('success'))
    return render_template('index.html', form=form)

ここでは、フォームが POST リクエストで送信された場合にのみ、データのバリデーションを行っています。validate_on_submit() は、フォームのバリデーションが成功した場合に True を返します。

4. フォームのエラーハンドリング

フォームのバリデーションに失敗した場合、エラーメッセージを表示することができます。Flask-WTF と WTForms では、フォームフィールドごとにエラーメッセージが自動的に生成されます。

html
<form method="POST">
    {{ form.hidden_tag() }}
    <div>
        {{ form.name.label }}: {{ form.name() }}
        {% if form.name.errors %}
            <ul>
                {% for error in form.name.errors %}
                    <li>{{ error }}li>
                {% endfor %}
            ul>
        {% endif %}
    div>
    <div>
        {{ form.age.label }}: {{ form.age() }}
        {% if form.age.errors %}
            <ul>
                {% for error in form.age.errors %}
                    <li>{{ error }}li>
                {% endfor %}
            ul>
        {% endif %}
    div>
    <button type="submit">送信button>
form>

5. 結論

Flask と WTForms を使うことで、フォームの構築やデータのバリデーションが非常に簡単になります。テキストフィールド、数値フィールド、日付フィールドなど、一般的な入力フィールドに対応するクラスを使うことで、ユーザーからの入力を適切に処理することができます。エラーメッセージの表示やバリデーションの結果を柔軟にカスタマイズできる点も非常に便利です。Flask と WTForms の組み合わせを活用して、より堅牢でセキュアなウェブアプリケーションを開発することができます。

最終更新： 16/04/2025
1 分の読み
Back to top button