プログラミング

FlaskとWTFormsの使い方

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

FlaskとWTFormsを使ったフォーム処理の完全ガイド

FlaskはPythonの軽量なWebフレームワークとして、特に迅速な開発やシンプルなプロジェクトに非常に人気があります。しかし、Flask自体にはフォーム処理の機能が組み込まれていないため、WTFormsという外部ライブラリを活用することで、フォームの作成とバリデーションを簡素化できます。このガイドでは、FlaskとWTFormsを使用して、効率的で拡張性のあるフォーム処理を行う方法を詳しく解説します。

関連記事

WTFormsの概要

WTFormsは、Webフォームの作成、バリデーション、および処理を容易にするPythonのライブラリです。Flaskとの統合が簡単で、Flask-WTFという拡張機能を利用することで、Flaskアプリケーション内でWTFormsを効果的に使用できます。WTFormsは、フォームデータのバリデーション、フィールドの型の設定、エラーメッセージのカスタマイズなど、フォーム操作に必要な多くの機能を提供します。

Flask-WTFのインストール

まず、Flask-WTFとその依存関係をインストールします。Flask-WTFはFlaskの拡張機能で、WTFormsを簡単にFlaskアプリケーションに組み込むことができます。

bash
pip install flask-wtf

基本的なフォームの作成

Flaskアプリケーション内でフォームを作成するには、まずWTFormsを使ってフォームクラスを定義します。以下は、基本的なフォームの例です。

app.py

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

app = Flask(__name__)
app.secret_key = 'your_secret_key'

# フォームクラスの定義
class MyForm(FlaskForm):
    name = StringField('名前', validators=[DataRequired()])
    submit = SubmitField('送信')

@app.route('/', methods=['GET', 'POST'])
def index():
    form = MyForm()

    if form.validate_on_submit():
        return redirect(url_for('success'))

    return render_template('index.html', form=form)

@app.route('/success')
def success():
    return 'フォームが正常に送信されました！'

if __name__ == '__main__':
    app.run(debug=True)

index.html

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>Flask-WTF フォームtitle>
head>
<body>
    <h1>フォームh1>
    <form method="POST">
        {{ form.hidden_tag() }}
        <div>
            {{ form.name.label }}: {{ form.name(size=20) }}
            {% if form.name.errors %}
                <ul>
                {% for error in form.name.errors %}
                    <li>{{ error }}li>
                {% endfor %}
                ul>
            {% endif %}
        div>
        <div>
            {{ form.submit() }}
        div>
    form>
body>
html>

この例では、MyFormというフォームクラスを定義し、nameというフィールドを作成しています。DataRequiredバリデータを使用して、名前フィールドが空でないことを確認しています。フォームが送信されると、入力された名前を取得し、/successページにリダイレクトします。

フォームバリデーション

WTFormsの最大の利点は、フォームデータに対するバリデーションを簡単に実行できる点です。Flask-WTFでは、フォームの送信時に自動的にバリデーションが実行されます。バリデーションに失敗すると、エラーメッセージが表示されます。

バリデータの例

WTFormsには、よく使われるバリデータがいくつか用意されています。代表的なものは次の通りです。

  • DataRequired: フィールドが空でないことを確認

  • Email: 正しいメールアドレス形式であることを確認

  • Length: フィールドの長さを制限

  • NumberRange: 数値の範囲を確認

以下に、いくつかのバリデータを使用したフォームの例を示します。

app.py (バリデーション追加)

python
from wtforms import EmailField, IntegerField
from wtforms.validators import Length, Email, NumberRange

class ExtendedForm(FlaskForm):
    name = StringField('名前', validators=[DataRequired(), Length(min=2, max=50)])
    email = EmailField('メール', validators=[DataRequired(), Email()])
    age = IntegerField('年齢', validators=[DataRequired(), NumberRange(min=18, max=100)])
    submit = SubmitField('送信')

CSRF保護

Flask-WTFでは、クロスサイトリクエストフォージェリ（CSRF）攻撃から保護するために、フォームに自動的にCSRFトークンを追加します。これにより、不正なフォーム送信を防ぐことができます。Flask-WTFを使用する場合、CSRF保護はデフォルトで有効になっていますが、app.secret_keyが設定されていないと機能しません。

python
app.secret_key = 'your_secret_key'

フォームの表示

Flaskテンプレートエンジンを使用してフォームを表示します。{{ form.field_name() }}という構文を使用することで、各フィールドをHTMLフォームとしてレンダリングできます。また、form.hidden_tag()を使ってCSRFトークンを埋め込むことも忘れずに行いましょう。

フォームフィールドごとにエラーメッセージを表示する方法も、テンプレート内で簡単に設定できます。{% if form.field_name.errors %}のように、エラーが存在する場合に表示する処理を加えることで、ユーザーにフィードバックを提供できます。

フォームのカスタマイズ

WTFormsでは、デフォルトのフィールドレンダリングをカスタマイズすることも可能です。たとえば、フォームフィールドの表示方法を変更するために、render_kw引数を使用してHTML属性を追加することができます。

python
name = StringField('名前', validators=[DataRequired()], render_kw={'class': 'form-control'})

これにより、class="form-control"というクラスがnameフィールドに追加され、BootstrapなどのCSSフレームワークと統合することが容易になります。

複雑なフォームの作成

Flask-WTFは、複雑なフォームを作成するための機能も提供しています。たとえば、動的なフォームフィールドを作成したり、複数のフォームを1ページに表示したりすることができます。また、フォームにファイルアップロード機能を追加することも可能です。

python
from wtforms import FileField
from wtforms.validators import FileRequired, FileAllowed

class FileUploadForm(FlaskForm):
    file = FileField('ファイルアップロード', validators=[FileRequired(), FileAllowed(['jpg', 'png'], '画像ファイルのみ許可')])
    submit = SubmitField('送信')

ファイルのアップロード処理には、request.filesを使ってアップロードされたファイルにアクセスできます。Flaskでは、通常UPLOAD_FOLDERを設定して、サーバー上のどこにファイルを保存するかを指定します。

まとめ

FlaskとWTFormsを組み合わせることで、Webアプリケーションにおけるフォームの作成と処理が非常に簡単かつ効率的になります。Flask-WTFを使えば、フォームのバリデーション、CSRF保護、カスタマイズ可能なフィールドなど、多くの便利な機能を活用することができます。特に、フォームが多くのアプリケーションで使われるため、Flask-WTFは非常に強力なツールです。

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