Back to Blog

Flask-WTFとは？フォームの作成とバリデーションを簡単にする拡張機能を解説

flask

2025年10月29日

【Pythonの基礎、アルゴリズム、ソフトウェアアーキテクチャの学習はこちら】

こんにちは！

今回の記事では、Flask-WTFとは何か、そして実際にどのように使うのかを、初心者の方にもわかりやすく丁寧に解説します。

Webアプリケーションを開発する際、「ユーザーからデータを受け取るフォーム」は欠かせません。たとえば、ログインフォーム・お問い合わせフォーム・コメント投稿フォームなど、ほとんどのサイトに存在しています。

しかし、フォームを扱う際には「入力のバリデーション」や「CSRF対策」など、意外と多くの処理が必要になります。これらを1から実装するのは手間がかかります。

そこで登場するのが、Flask-WTFです。

Flask-WTFを使えば、フォーム作成・入力チェック・セキュリティ対策を、非常にシンプルに記述できます。今回は、Flask-WTFの基礎を学んでいきます！

Flask-WTFとは？

Flask-WTFは、Flaskの拡張機能のひとつで、PythonのフォームライブラリであるWTFormsをFlaskに統合したものです。

これを使うことで、以下のような便利な機能を簡単に実装できます。

HTMLフォームの自動生成
入力値のバリデーション（チェック）
CSRF（クロスサイトリクエストフォージェリ）対策
入力内容の保持・再表示

通常、Flaskでフォームを扱う場合は、HTMLとバックエンドの間で入力値をやり取りする処理を自分で書く必要があります。

しかしFlask-WTFを使えば、フォーム定義・入力チェック・送信処理をPython側でまとめて管理できるようになります。

これにより、コードの見通しが良くなり、フォーム関連の処理を再利用しやすくなるのです。

Flask-WTFのインストール

まずは、Flask-WTFをインストールします。

Python環境が整っていれば、以下のコマンドを実行するだけです。

pip install Flask-WTF

インストールが完了すると、flask_wtfとwtformsモジュールが利用できるようになります。

これで準備は完了です。

Flask-WTFを使ったフォームの実装手順

ここからは、実際にFlask-WTFを使ってフォームを作成してみましょう。

例として、簡単なお問い合わせフォーム（Contact Form）を作成します。

このフォームでは、次のような入力欄を用意します。

名前
メールアドレス
メッセージ

送信後は、送信完了メッセージを画面に表示します。

1. Flaskアプリの準備

まず、基本となるapp.pyを作成します。

Flaskアプリを初期化し、CSRF対策のための秘密鍵（secret_key）を設定します。

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

app = Flask(__name__)
app.secret_key = 'secret_key'  # CSRF対策に必須

secret_keyは、Flaskアプリ内でセッションやCSRF保護を行う際に必要です。

このキーが設定されていないと、フォーム送信時に「CSRFトークンが無効」というエラーが発生します。

本番環境では、ランダムな長い文字列を使用するようにしましょう。

2. フォームクラスの作成

次に、フォームの構造をPythonのクラスで定義します。

FlaskFormを継承して、入力項目や送信ボタンを作ります。

class ContactForm(FlaskForm):
    name = StringField('名前', validators=[DataRequired()])
    email = StringField('メールアドレス', validators=[DataRequired(), Email()])
    message = TextAreaField('メッセージ', validators=[DataRequired()])
    submit = SubmitField('送信')

各フィールドには、入力チェック用のバリデーション（validators）を設定できます。

DataRequired()は「空欄不可」、Email()は「メール形式チェック」です。

これにより、HTML側で入力を間違えても、サーバー側で確実に検証が行われます。

3. ルートの実装

次に、フォームを表示・送信するためのルートを作成します。

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

    if form.validate_on_submit():
        name = form.name.data
        email = form.email.data
        message = form.message.data

        flash(f"{name}さん、メッセージを受け取りました！")
        return redirect(url_for('contact'))

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

ここでは、form.validate_on_submit()が重要なポイントです。

このメソッドは、フォームが送信されたうえで、すべてのバリデーションが通過した場合にTrueを返します。

バリデーションエラーがあれば、同じページに再度フォームを表示し、エラーメッセージを出すこともできます。

4. テンプレートの実装

最後に、テンプレートファイルを作成します。

templates/contact.htmlを作成し、以下のように記述します。

<!doctype html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>お問い合わせフォーム</title>
</head>
<body>
    <h1>お問い合わせ</h1>

    {% with messages = get_flashed_messages() %}
      {% if messages %}
        <ul>
          {% for message in messages %}
            <li>{{ message }}</li>
          {% endfor %}
        </ul>
      {% endif %}
    {% endwith %}

    <form method="POST">
        {{ form.hidden_tag() }}
        <p>{{ form.name.label }}<br>{{ form.name(size=30) }}</p>
        <p>{{ form.email.label }}<br>{{ form.email(size=30) }}</p>
        <p>{{ form.message.label }}<br>{{ form.message(rows=5, cols=30) }}</p>
        <p>{{ form.submit() }}</p>
    </form>
</body>
</html>

ここで重要なのは、{{ form.hidden_tag() }}の部分です。

これはCSRFトークンをHTMLフォームに埋め込むためのものです。

Flask-WTFではCSRF保護が自動的に有効なので、これを入れないと送信時にエラーになります。

{{ form.xxx.label }}でラベルを表示し、{{ form.xxx() }}で実際のフォーム要素を出力します。