Flaskでフォーム作成と入力値の受け取りを試してみた
目次
はじめに
私はこれまでフロントエンドをメインに業務を行ってきました。一方、バックエンドについてはあまり学習していなかったため、力不足を解消しようと学習を進めています。Javaに触れる機会もありましたが、文法や型の扱いが難しく、本格的に取り組むには少しハードルが高いと感じました。そこでまずは、比較的学びやすく、構文もシンプルな Python（Flask） を使って、バックエンドの基礎を学んでいます。
Flaskを使ってWebアプリケーションを構築する際、まず押さえておきたいのが「フォームの作成」と「送信されたデータの処理」です。この記事では、Flaskで簡単な問い合わせフォームを作成し、入力された値を受け取って表示・処理するところまでの流れを紹介します。
「メール送信」まで進む前に、まずはフォームからデータをPOSTして受け取る基本的な流れを確認しておきたい、そんな方に向けた内容です。
フォームの見た目（HTML）
まずは、Jinja2を用いたテンプレートファイル（HTML）を作成しました。以下のような構成になっています。
<!– templates/contact.html –>
<h2>問い合わせフォーム</h2>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li class=”message”>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
<form action=”{{ url_for(‘contact_complete’) }}” method=”post” novalidate>
<table>
<tr>
<th>ユーザー名</th>
<td>
<input type=”text” name=”username” value=”{{ username }}” />
</td>
</tr>
<tr>
<th>メールアドレス</th>
<td>
<input type=”text” name=”email” value=”{{ email }}” />
</td>
</tr>
<tr>
<th>お問い合わせ内容</th>
<td>
<textarea name=”description” rows=”5″ cols=”40″>{{ description }}</textarea>
</td>
</tr>
</table>
<input type=”submit” value=”問い合わせ” />
</form>
このテンプレートは、Flaskの render_template() を使って読み込まれ、Jinja2の構文で値が埋め込まれる仕組みになっています。
サーバー側（Flask）の実装
入力画面のルート
@app.route(“/contact”, methods=[“GET”])
def contact():
return render_template(“contact.html”, username=””, email=””, description=””)
アクセス時に空のフォームを表示します。
フォーム送信後のルート
@app.route(“/contact/complete”, methods=[“POST”])
def contact_complete():
username = request.form.get(“username”)
email = request.form.get(“email”)
description = request.form.get(“description”)
# 簡易バリデーション
is_valid = True
if not username:
flash(“ユーザー名は必須です。”)
is_valid = False
if not email or “@” not in email:
flash(“正しいメールアドレスを入力してください。”)
is_valid = False
if not description:
flash(“お問い合わせ内容を入力してください。”)
is_valid = False
if not is_valid:
return render_template(“contact.html”, username=username, email=email, description=description)
# ここでメール送信処理をする（今回は省略）
flash(“送信が完了しました。ありがとうございました！”)
return redirect(url_for(“contact”))
このルートでは、フォームのデータを受け取り、バリデーション処理を行ったうえで、問題がなければ完了メッセージを表示しています。
flashメッセージの使い方
Flaskの flash() は一時的なメッセージ表示に便利です。テンプレート内で get_flashed_messages() を使うことで、エラーメッセージや完了通知を表示できます。
flash(“送信が完了しました。”)
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul>
{% for message in messages %}
<li class=”message”>{{ message }}</li>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
実際にやってみた感想
フォームの送信処理は、HTMLとPythonの連携がしっかりわかっていないと、最初は少し戸惑うところです。特に POST メソッドの処理や request.form.get() の取り扱い、flash() のようなFlask特有の機能など、慣れていないと手間取るポイントが多いと感じました。
今回は画面遷移と入力データの取得から簡易バリデーションに集中して学ぶことができたので、Flaskのフォーム基礎を掴むにはとてもよい内容だったと思います。
ちなみに、メール送信については別の記事で紹介した resend を使うと非常に簡単です。今回は詳しく触れませんが、環境変数でAPIキーを読み込み、JSONで宛先などを送るだけでシンプルに動作確認ができました。
おわりに
Flaskはシンプルな構造のわりに、柔軟にWebアプリを組み立てることができるフレームワークです。今回はフォーム入力からPOST処理、flashメッセージによる通知表示までを確認しました。
次回は、Blueprintを使ってアプリケーションの構造を分割し、CRUD処理を整理する実装を行う予定です。今回の内容がFlaskに慣れるきっかけになれば嬉しいです！
