プログラミング

Flask-WTFで簡単フォーム作成

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

Flask-WTFを使用して、FlaskアプリケーションでWebフォームを簡単に作成し、検証する方法についての完全かつ包括的な記事を以下に示します。

Flask-WTFとは？

Flask-WTFは、Flaskアプリケーションにおいて、Webフォームを簡単に作成し、検証するためのライブラリです。WTFormsというフォームライブラリを基にしており、フォームの定義、入力の検証、エラーメッセージの表示など、Webフォームに必要な多くの機能を提供します。

関連記事

Flask-WTFを使用すると、ユーザーが送信したデータを簡単に検証し、必要に応じてエラーメッセージを返すことができます。また、CSRF（クロスサイトリクエストフォージェリ）保護も自動的に有効になります。

必要な環境のセットアップ

まずは、FlaskとFlask-WTFをインストールする必要があります。以下のコマンドでインストールできます。

bash
pip install Flask Flask-WTF

基本的なセットアップ

Flask-WTFを使うには、Flaskアプリケーションを作成し、フォームクラスを定義します。以下は基本的なセットアップの例です。

1. Flaskアプリケーションの作成

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.config['SECRET_KEY'] = 'your_secret_key'  # CSRF保護用の秘密鍵

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

@app.route('/', methods=['GET', 'POST'])
def index():
    form = NameForm()
    if form.validate_on_submit():  # フォームが送信され、検証が成功した場合
        name = form.name.data
        return redirect(url_for('welcome', name=name))
    return render_template('index.html', form=form)

@app.route('/welcome/')
def welcome(name):
    return f'こんにちは、{name}さん！'

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

2. HTMLテンプレート（templates/index.html）

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flask-WTFフォームtitle>
head>
<body>
    <h1>名前を入力してくださいh1>
    <form method="POST">
        {{ form.hidden_tag() }}
        <div>
            {{ form.name.label }}<br>
            {{ form.name(size=20) }}<br>
            {% for error in form.name.errors %}
                <p style="color: red;">{{ error }}p>
            {% endfor %}
        div>
        <div>
            {{ form.submit }}
        div>
    form>
body>
html>

Flask-WTFの特徴と使用方法

Flask-WTFは、フォームの作成と検証に加えて、いくつかの便利な機能を提供します。

1. フォームの検証

Flask-WTFでは、validate_on_submit()メソッドを使用して、フォームが送信されて、かつすべての検証が成功したかどうかを確認します。各フォームフィールドにバリデータを設定することで、入力値の検証が行われます。例えば、DataRequired()バリデータを使用すると、フィールドが空でないかを確認できます。

2. エラーメッセージの表示

フォームフィールドの検証が失敗した場合、エラーメッセージが自動的に生成され、HTMLテンプレート内で表示することができます。上記のコードでは、form.name.errorsを使用して、名前フィールドのエラーメッセージを表示しています。

3. CSRF保護

Flask-WTFは、デフォルトでCSRF保護を提供します。フォームには{{ form.hidden_tag() }}を追加することで、CSRFトークンが自動的にフォームに挿入され、悪意のある攻撃を防ぐことができます。

4. その他のバリデータ

Flask-WTFでは、さまざまなバリデータを使用して、入力値を検証できます。以下はその一部です：

  • Length(min=3, max=10)：文字列の長さを指定する
  • Email()：メールアドレスの形式を検証する
  • EqualTo('password')：他のフィールドと値が一致するかを検証する（パスワード確認などに使用）

例：

python
from wtforms.validators import Email, Length

class LoginForm(FlaskForm):
    email = StringField('Email', validators=[DataRequired(), Email()])
    password = StringField('パスワード', validators=[DataRequired(), Length(min=6)])
    submit = SubmitField('ログイン')

5. フォームのスタイリング

Flask-WTFは、HTMLフォーム要素の生成を簡素化しますが、スタイリングについてはカスタムCSSを使用することをお勧めします。例えば、BootstrapやTailwind CSSを使ってフォームをスタイリングすることができます。

html
<form method="POST">
    {{ form.hidden_tag() }}
    <div class="form-group">
        <label for="name">{{ form.name.label }}label>
        {{ form.name(class="form-control") }}
    div>
    <div>
        {{ form.submit(class="btn btn-primary") }}
    div>
form>

結論

Flask-WTFは、FlaskアプリケーションでWebフォームを作成する際に非常に便利なツールです。フォームの定義からバリデーション、エラーメッセージの表示、CSRF保護まで、すべての基本的なフォーム関連の機能を提供しており、Flask開発者にとって強力なツールです。フォームの検証を簡単に行いたい場合や、セキュアなWebフォームを作成したい場合には、Flask-WTFを活用することを強くお勧めします。

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