MENU
SWELL公式サイトへ 詳しくはこちら

Flask_Vol5：フォーム処理とリクエストの扱い

Python Flask
  • URLをコピーしました！

フォームからデータを受け取ろう：POSTメソッドとバリデーション入門

目次

はじめに

これまでの解説では、Flaskで動的なHTMLを返す方法やルーティングの基礎を学んできました。

Webアプリケーションで「ユーザーとサーバ側がやりとりをする」うえで欠かせないのが、フォーム（<form>）を用いた入力送信です。ユーザー名やコメントを送信し、それをサーバ側で処理・バリデーション（入力チェック）するという流れをしっかり学ぶと、一気にWebアプリらしくなります。

今回のFlask_Vol5では、以下の内容を扱います。

  1. フォーム送信の仕組み（GET/POST）
  2. Flaskでのリクエスト処理（request.form 等）
  3. 簡単なバリデーション（必須チェック、文字数チェック）
  4. CSRF対策（Flask-WTFを活用）

最終的に、ユーザー入力を受け取ってエラーメッセージを表示したり、CSRFトークンで安全性を高めるサンプルを動かしながら理解していきましょう。

あわせて読みたい
Flask_Vol1：初心者のためのWeb開発の基本 はじめに 本記事は、「ゼロから学ぶ Flask：10ステップでWebアプリを作ろう！」シリーズの第一回となります。本シリーズでは、Pythonの軽量WebフレームワークであるFlas…

1. フォーム送信の基本仕組み

📝1.1 <form> タグ

HTMLでユーザー入力をサーバへ送る場合、通常は以下のような<form>要素を使います。

<form method="POST" action="/submit">
  <label for="username">ユーザー名:</label>
  <input type="text" id="username" name="username">

  <label for="comment">コメント:</label>
  <textarea id="comment" name="comment"></textarea>

  <button type="submit">送信</button>
</form>
  • method="POST": フォーム送信時のHTTPメソッドを指定。POST の場合はデータがHTTPリクエストのボディに入ります。
  • action="/submit": フォーム送信先のURLエンドポイントを指定。ここで指定されたパスにリクエストが飛びます。

📝1.2 GET と POST の違い

  • GET
    • データがURLのクエリパラメータ（?name=xxx&comment=yyy）として送られる
    • ブラウザのアドレス欄に入力内容が表示される（セキュリティ的に注意が必要）
    • 検索フォームなど「結果を取得」するケースに使われる
  • POST
    • データがリクエストボディに含まれる
    • URLに表示されず、よりセキュアにデータを送れる
    • ユーザーのログイン情報や投稿内容など「サーバに変更を加える」ケースに使われる
あわせて読みたい
Flask_Vol2：Python環境とFlaskのインストール PythonとFlaskの開発環境を構築しよう：venvの使い方も解説 はじめに 前回のFlask_Vol1では、Web開発における基礎知識（HTTPやHTML/CSS/JavaScript）をおさらいしました…

2. Flaskでフォーム入力を受け取る（基本実装）

最初に、Flask標準のフォーム送信で動作する簡単なサンプルを作ってみましょう。あえてFlask-WTFは使わず、request.form や request.args を直接使う方法です。

📝2.1 ディレクトリ構成（例）

flask_project/
 ├─ app.py                 ← Flaskアプリの本体
 └─ templates/
    └─ index.html          ← フォームを置くHTML

仮想環境（venv）を使っている場合は、以下のようになります。

flask_project/
 ├─ venv/
 ├─ app.py
 └─ templates/
    └─ index.html

📝2.2 HTMLテンプレート（index.html）

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>フォーム処理サンプル</title>
</head>
<body>
  <h1>フォームからデータを送信 (基本)</h1>

  <!-- エラーメッセージがあれば表示 -->
  {% if error %}
  <p style="color:red;">{{ error }}</p>
  {% endif %}

  <!-- フォーム本体。POSTで自身("/")に送る例 -->
  <form method="POST" action="/">
    <div>
      <label for="username">ユーザー名:</label><br>
      <input type="text" id="username" name="username" value="{{ username or '' }}">
    </div>
    <div>
      <label for="comment">コメント:</label><br>
      <textarea id="comment" name="comment" rows="4" cols="40">{{ comment or '' }}</textarea>
    </div>
    <button type="submit">送信</button>
  </form>
</body>
</html>

ポイント:

  • フォーム送信先を action="/" にして、同じURLでデータを受け取る。
  • テキストボックス(name="username")とテキストエリア(name="comment")が送信データのキーとなる。
  • エラー発生時に入力内容が消えないように、value="{{ username or '' }}" などで再表示している。

📝2.3 Flaskアプリのコード（app.py）

# app.py
from flask import Flask, request, render_template

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    if request.method == "POST":
        # フォームから送られた値を取得
        username = request.form.get("username", "").strip()
        comment = request.form.get("comment", "").strip()

        # シンプルなバリデーション例：必須チェック
        if not username or not comment:
            error_msg = "ユーザー名とコメントは必須です。"
            return render_template("index.html", error=error_msg,
                                   username=username, comment=comment)

        # 文字数チェック
        if len(comment) > 100:
            error_msg = "コメントは100文字以内でお願いします。"
            return render_template("index.html", error=error_msg,
                                   username=username, comment=comment)

        # バリデーションに合格したら結果を表示
        return f"ユーザー名：{username}<br>コメント：{comment}"

    else:
        # GETリクエスト時はフォームを表示
        return render_template("index.html")

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

📝流れ

  1. GETリクエスト:
    • 初回アクセス（/ にアクセス）時にフォームを表示
  2. POSTリクエスト:
    • <form> からデータが送られると request.form で値を取得
    • バリデーション（必須チェック、文字数チェックなど）を行う
    • 条件を満たしていなければ、エラーメッセージ付きで再度フォームを表示
    • 問題なければ送信内容を表示するページに切り替え

📝実行方法

  1. プロジェクトフォルダへ移動
  2. 仮想環境があればアクティブ化（venv\Scripts\activate など）
  3. python app.py でサーバを起動
  4. ブラウザで http://127.0.0.1:5000/ にアクセス → フォームが表示される
あわせて読みたい
Flask_Vol3：最初のFlaskアプリを作ろう Hello Worldから始めるFlask：ルーティングの基本を理解する はじめに 前回のFlask_Vol2では、PythonとFlaskの開発環境を整え、仮想環境を構築したうえで最小限の動作確…

3. Flask-WTFを使ったフォーム（CSRF対策含む）

上記の「Flask標準のフォーム処理」でも十分使えますが、より本格的にフォームを扱う場合は、Flask-WTFという拡張ライブラリを使うと便利です。

Flask-WTFは、以下のようなメリットを提供します。

  • フォームとバリデーションの一元管理（WTFormsによるPythonクラスでの宣言）
  • CSRF（クロスサイトリクエストフォージェリ）対策が簡単に導入できる
  • エラーメッセージの扱いが楽になり、フォームの状態管理がしやすい

📝3.1 基本セットアップ

  1. インストール pip install flask-wtf
  2. SECRET_KEY Flaskアプリに SECRET_KEY を設定すると、CSRFトークンを自動生成できるようになります。

📝3.2 ディレクトリ構成

Flask-WTFでも基本構成は同じです。

flask_project/
 ├─ app.py               ← Flaskアプリ (Flask-WTF)
 └─ templates/
    └─ index.html

📝3.3 app.py サンプルコード

# app.py
from flask import Flask, render_template
from flask_wtf import FlaskForm, CSRFProtect
from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import DataRequired, Length
import os

app = Flask(__name__)

# CSRFトークン生成に必要
app.config['SECRET_KEY'] = os.urandom(24)

# CSRFProtectをアプリに適用
csrf = CSRFProtect(app)

# Flask-WTF（WTForms）でフォームを定義
class CommentForm(FlaskForm):
    username = StringField('ユーザー名', validators=[DataRequired()])
    comment  = TextAreaField('コメント', validators=[DataRequired(), Length(max=100)])
    submit   = SubmitField('送信')

@app.route("/", methods=["GET", "POST"])
def index():
    form = CommentForm()
    if form.validate_on_submit():
        # バリデーション（DataRequired, Length）がすべて通るとTrue
        username_val = form.username.data
        comment_val  = form.comment.data
        # 入力内容を表示
        return f"ユーザー名：{username_val}<br>コメント：{comment_val}"
    else:
        # GETか、バリデーションに失敗した場合
        return render_template("index.html", form=form)

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

📝解説

  • FlaskForm を継承した CommentForm クラスを定義
    • 各フィールドを StringField, TextAreaField などで宣言
    • バリデーション（DataRequired(), Length(max=100)）をPythonコード上で管理
  • form.validate_on_submit()
    • POSTでフォームが送信されたときに自動でバリデーションを実行
    • すべての条件が通れば True を返す
  • CSRFProtect
    • これをアプリに適用しておくと、CSRFトークンが自動生成され、正規のフォーム以外からのリクエストをブロックする

📝3.4 テンプレート（index.html）

<!-- templates/index.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Flask-WTFサンプル</title>
</head>
<body>
  <h1>フォームからデータを送信 (Flask-WTF)</h1>

  <form method="POST" action="/">
    <!-- CSRFトークンなど、隠しフィールドを自動生成 -->
    {{ form.hidden_tag() }}

    <div>
      {{ form.username.label }}
      {{ form.username }}
      <!-- エラー表示: (任意)
      {% if form.username.errors %}
        <p style="color:red;">{{ form.username.errors[0] }}</p>
      {% endif %}
      -->
    </div>

    <div>
      {{ form.comment.label }}
      {{ form.comment }}
      <!-- エラー表示:
      {% if form.comment.errors %}
        <p style="color:red;">{{ form.comment.errors[0] }}</p>
      {% endif %}
      -->
    </div>

    {{ form.submit }}
  </form>
</body>
</html>
  • {{ form.hidden_tag() }} によって、自動的にCSRFトークン（<input type="hidden" name="csrf_token" ...>）が挿入される。
  • {{ form.username }}, {{ form.comment }}, {{ form.submit }} はWTFormsのクラス定義から対応するHTML要素を生成。
  • バリデーションで引っかかった場合、form.xxx.errors にエラー内容が入る。ここを参照してメッセージを表示できます。
あわせて読みたい
Flask_Vol4：テンプレートとJinja2 Flaskで動的HTMLを生成しよう：テンプレートエンジンJinja2の基本 はじめに 前回のFlask_Vol3では、ルーティングの基本を学び、文字列だけを返す簡単なアプリを作成しま…

4. バリデーションと安全性のポイント

📝4.1 必須チェックや文字数制限

  • DataRequired() で「空白を除いた実質的な入力があるか」をチェック
  • Length(max=100) で「最大文字数100文字」を強制
  • そのほか、Email()やRegexp()といったValidatorを組み合わせることも可能

📝4.2 CSRF対策が重要

Webアプリは、CSRF攻撃（正規のユーザが意図しない操作をさせられる）への対策が必須です。

Flask-WTFを使う場合は、CSRFProtect(app) と {{ form.hidden_tag() }} だけで簡単に導入できます。

📝4.3 エラーメッセージの表示

  • Flask標準フォーム処理の場合: 自分でerror変数を渡すなど、工夫して表示
  • Flask-WTFの場合: form.field_name.errors をテンプレートで参照すればメッセージを表示できる

5. まとめ

📝今回のポイント

  1. フォーム送信（GETとPOST）
    • HTML側で method="POST", action="..." を指定すると、データがリクエストボディに入る
    • Flask側では request.form や request.args でデータを取得
  2. バリデーション（検証）の実装例
    • 必須チェックや文字数チェックなど、最小限でも入れておくと不正な入力を防止できる
  3. CSRF対策（Flask-WTF）
    • SECRET_KEY と CSRFProtect によって、不正サイトからの偽リクエストを防ぐ
    • フォームクラスでフィールドとバリデーションをまとめて管理しやすくなる

📝使い分けの目安

  • Flask標準のフォーム処理
    • 小規模、カスタムが多い場合に自分でロジックを組みたいとき
    • バリデーションやCSRF対策を手動で行う必要がある
  • Flask-WTF（WTForms）
    • 中〜大規模アプリや、バリデーション・CSRF対策をしっかり組み込む場合
    • フォームクラスをコード上で定義できるため、可読性・保守性が高い

次回予告

Flask_Vol6：データベースとの連携

  • ユーザが入力した内容をDBに保存し、あとで一覧表示・修正・削除を行える仕組みを作ります
  • ORM（SQLAlchemy）の使い方や、モデル定義・CRUD実装を学ぶことで、本格的なWebアプリへ近づきます

フォームとDBが組み合わされば、ブログ投稿サイトや会員登録機能など、実用的なサービスを作る下地が整います。次回もぜひお楽しみに！

プログラミング初心者におすすめ！「スッキリわかるPython入門 第2版」

プログラミングに興味があるけれど、何から始めればいいかわからない方に最適な一冊が「スッキリわかるPython入門 第2版」です。以下のポイントを参考にしてください。

本書の特徴とメリット

  • シリーズ累計90万部突破
    多くの読者に支持され、信頼されている大人気入門書の改訂版。
  • 初心者でもわかりやすい解説
    基本的な「コツ」を丁寧に説明し、迷わず学習を進められます。
  • 実践的な「しくみ」の理解
    プログラミングの基礎だけでなく、実際の開発に役立つ知識を習得可能。
  • 「落とし穴」の回避
    初心者が陥りがちな間違いをカバーし、安心して学習を進められる内容。

実際の読者の声

  • 現役プログラミング教室の先生も推薦！
    「この本を読んでPCスキルをマスターすれば、それでメシを食えますよ」という評価もあるほどの内容。面白くて勉強になるとの声が多い。

この機会に「スッキリわかるPython入門 第2版」を手に入れ、プログラミングの世界に一歩踏み出しましょう。下のリンクをクリックして、詳細をチェックしてみてください！

テックジムの経験が詰まったPythonプログラミング講座

プログラミング教育において、多くの初学者が挫折する理由をご存じでしょうか？実は、それには多くの共通点があります。テックジムは、その問題点を深く理解し、20年以上にわたって蓄積してきた経験をもとに、誰もが安心して学べるプログラミング講座を提供しています。

テックジムは、ただの学習場ではありません。プログラミングを始めたい方や、より高いレベルに達したい方々に向けた、実践的な学びの場です。私たちが提供するカリキュラムは、初心者が直面する課題や躓きやすいポイントを徹底的に研究し、それを解決するためにデザインされています。

多くのプログラミングスクールが、フレームワークや複雑な技術から始めることで、学習者に過度な負担をかけ、結果として挫折を生む原因となっています。テックジムでは、まずは本当に重要な基礎からスタートすることで、無理なくスキルを積み上げていくことができます。例えば、関数やクラスといったプログラミングの核心部分をしっかりと理解し、それを使いこなすための時間を十分に確保しています。

これにより、受講生たちは無駄な混乱を避け、確実にスキルを身につけていくことができるのです。テックジムでの学びは、単なる知識の詰め込みではなく、実際に「できる」ことを目指した実践的なトレーニングです。

テックジムのPythonプログラミング講座は、経験と実績が詰まった講座です。初心者でも安心して参加でき、確実にステップアップできるこの講座で、あなたもプログラミングの世界に飛び込んでみませんか？

挫折を防ぐカリキュラム

プログラミング学習に挑戦した多くの人が、途中で挫折してしまうことがあります。これは、難解なフレームワークや複雑な概念にいきなり取り組むことが主な原因です。しかし、テックジムではそのような挫折を未然に防ぐため、独自のカリキュラムを採用しています。

テックジムのカリキュラムは、まず基礎をしっかりと固めることから始めます。関数やクラスといったプログラミングの根幹をじっくり学ぶことで、無駄な負荷をかけずに確実にスキルを身につけることができます。このアプローチにより、学習者は「何をやっているのかわからない」という混乱を避け、自信を持って次のステップに進むことができます。

また、テックジムでは、段階的にスキルを積み上げることで、学習の進行に伴う負担を最小限に抑えています。その結果、無理なく、着実にプログラミングの世界で成功を収めることができるのです。

テックジムのプログラミング講座は、学ぶことの楽しさを実感しながら、挫折せずに成長できる最適な環境を提供します。

最新の技術と経験豊富なサポートの融合

プログラミング学習において、最新技術の活用は欠かせません。テックジムでは、ChatGPTを用いた学習サポートを取り入れています。ChatGPTは、あらゆる質問に即座に答え、コードのバグ解決もスムーズにサポートします。これにより、効率的に学習を進めることが可能です。

しかし、テックジムの強みは、これだけではありません。どんなに優れたAIでも、人間のコーチによる個別サポートの価値は計り知れません。テックジムでは、経験豊富なプロのコーチがあなたの学習を支えます。プログラミングの基礎から応用まで、丁寧な指導と的確なフィードバックを提供し、あなたが抱える疑問や課題を一つ一つ解決していきます。

このように、最新の技術とプロのコーチングを組み合わせることで、テックジムでは、効率的でありながらも確実にスキルを身につけることができる学習環境を提供しています。

テックジムで学びながら、最先端のAI技術とプロの指導のベストな融合を体験してみませんか？

成果を実感できるカリキュラム

テックジムのPythonプログラミング講座は、その効果と実績で多くの受講生から高い評価を受けています。8月には180名を超える方々がこの講座にエントリーし、その人気と信頼の高さを証明しています。

この講座では、受講生が着実にスキルを身につけ、成長していることを実感できるカリキュラムを提供しています。プログラミングの基礎から実践的な応用まで、段階的に学べる内容は、初心者から経験者まで幅広く対応しています。また、学んだ知識をすぐに実践に移せる環境を整えており、学習の成果をリアルタイムで確認できるのも大きな特徴です。

テックジムの講座を受講した多くの方々が、「理解が深まった」「自信を持ってコードを書けるようになった」といった喜びの声を寄せています。これまでに培った経験と実績を活かし、受講生一人ひとりが成功への第一歩を踏み出せるよう全力でサポートしています。

あなたも、この成果を実感できるカリキュラムで、プログラミングスキルを確実に伸ばしてみませんか？

まずは無料体験からスタート！

プログラミングに興味はあるけれど、いきなり本格的な学習に踏み出すのは少し不安…そんな方に最適なのが、テックジムの無料体験です。まずは気軽に始めてみたい、という方のために、テックジムではデモレッスンを提供しています。

この無料体験では、実際のカリキュラムの一部を体験し、学習の進め方や講師のサポートを実感することができます。受講前に「自分に合っているかどうか」を確認できるので、安心してスタートを切ることができます。

プログラミングが全く初めての方も、すでにある程度の経験を持っている方も、まずはこの無料体験で、テックジムの学びを体感してみませんか？今すぐ始める一歩が、あなたの未来を大きく変えるかもしれません。

無料体験は随時開催中です。ぜひこの機会に、新たなスキルを手に入れるための第一歩を踏み出してみてください！

Python Flask
よかったらシェアしてね！
  • URLをコピーしました！

関連記事

目次