Flask入門|フォームの基本とHTTPメソッドの使い方【チャプター4-02】

ながみえ

一つ前のページではHTTPの基本について学習しました。

今回は フォームの基本 について見ていきましょう。

Chapter1:Flask入門編
Chapter2:Jinja2入門編
Chapter3:フィルター編
Chapter4:フォーム編

 ・Chapter4-1:HTTPとは何か
 ・Chapter4-2:フォームの基本を理解しよう ◁今回はここ
 ・Chapter4-3:WTFormsを理解しよう
 ・Chapter4-4:フォームのバリデーションを理解しよう
 ・Chapter4-5:カスタムバリデータを理解しよう
 ・Chapter4-6:テンプレートマクロを理解しよう
 ・Chapter4-7:Flask-WTFを理解しよう
Chapter5:データベース編
Chapter6:Flaskの便利機能編
Chapter7:アプリ開発編

Flaskを使ったWebアプリ開発では、ユーザーからの入力を受け取って処理することが非常に重要です。

たとえば、ユーザーが「名前」を入力して送信ボタンを押すと、その情報をサーバー側で受け取って挨拶文を返すようなアプリが考えられます。

このようなユーザーとサーバーのやり取りを実現するには、フォーム という仕組みと、GET/POSTメソッド を理解する必要があります。

今回はフォームの基本構造と、それを使ったGET/POSTの送信方法、そしてFlaskでそのデータを受け取る方法について学びましょう。

なお、HTMLでのフォーム作成の知識があると本記事の理解度も大きく高まります。

HTMLの知識に自信がない場合は、まずは↓↓の記事で復習しましょう。

あわせて読みたい
【HTML】レッスン1-06:フォーム作成の基本と実践ガイド
【HTML】レッスン1-06:フォーム作成の基本と実践ガイド

本記事は 有料記事(100円)ですが、現在は期間限定で無料公開中です。

<<前のページ

Flaskの記事一覧

次のページ>>

Webフォームの仕組みをFlaskで理解しよう

フォーム とはHTML上にある 入力欄 のことで、ユーザーからのデータ(文字や選択肢など)をWebサーバーへ送信するための仕組みです。

代表的な物では お問い合わせフォームや、ログイン画面などがイメージしやすいでしょう。

【Python】勉強猫がノートパソコンを前にして学習を始める様子。記事内の学習スタート用イラスト

例えば以下のような記述がフォームです:

<form method="post">
  名前:<input type="text" name="name">
  <input type="submit" value="送信">
</form>

このフォームはユーザーが「名前」を入力し、「送信」ボタンを押すと、nameという名前(変数)で入力内容がサーバーに送信されます。

上記のコードをコピーして保存し、ブラウザ表示してみましょう。

HTTPメソッド:GETとPOSTを使い分けよう

フォームの送信、すなわちブラウザ画面からサーバーにデータを送るには、主に次の2つのメソッドが使われます:

メソッド特徴送信先に表示される内容
GETURLにデータを含める/get?name=太郎 のように表示される
POST本文(body)にデータを含めるURLには表示されない(セキュア)

以下の図を見てみましょう:

クライアントのブラウザと、サーバー上のフレームワークがHTTPリクエストとレスポンスを通じてやりとりを行う構造を図解。GETメソッドでページを取得し、POSTメソッドでデータ送信する流れが示されている。

この図はブラウザ(クライアント)から送信された情報が、HTTPメソッドに応じてサーバーに渡され、その返答がブラウザに表示される仕組みが描かれています。

  • GETメソッド は主に検索やページ閲覧に使われます。
  • POSTメソッド は主にフォーム送信や機密情報の処理に使われます。

request.methodでアクセス方法を判別する方法

Flaskでは、ブラウザからアクセスされた際にそれがどのHTTPメソッドでアクセスされたのかを判定するために request.method を使います。

if request.method == 'POST':
    # POST時の処理
else:
    # GET時の処理

このように、アクセスされたときのリクエストがGETなのかPOSTなのかを切り替えて処理を変えることができます。

GETとPOSTそれぞれのフォーム処理例を見てみよう

【Python】勉強猫がノートパソコンを見ながら考え込む様子。記事内の休憩用イラスト

GETメソッドでのデータ取得(request.args.get()

GETメソッドによるデータ送信は、上述の通りURLの中にデータを含めてそのURLを送るものです。

例えば、GETメソッドで「太郎」という名前を送信する場合、「https://example.com/get?name=太郎」などという文字列を送ることになります。

そしてFlaskの request.args.get('キー') はURLのクエリパラメータから値を取得するためのFlaskの関数です。

値 = request.args.get('キー')

例えば以下のように使用します。

@app.route('/get') # このURLにアクセスされたら
def do_get():
    name = request.args.get('name')  # ?name=〇〇 から値を取得
    return f'ハロー、{name}さん!'

例えば /get?name=太郎 にアクセスすると、「ハロー、太郎さん!」と表示されます。

POSTメソッドでのデータ取得(request.form.get()

request.form.get('キー') はフォームから送信されてきたデータを取得するための関数です。

値 = request.form.get('キー')

例えば以下のように使用されます。

@app.route('/', methods=['GET', 'POST'])  # もしこのURLにアクセスされたら。リクエストがGETかPOSTかで処理を変える
def do_get_post():
    if request.method == 'POST':         # もしリクエストがPOSTなら(そのページからデータが送信されてきたなら)
        name = request.form.get('name')  # フォームから送信されたデータを request.form から取得
        return f'こんにちは、{name}さん!'
    # GETの場合はフォームを表示(最初のアクセス時など)
    return '''
        <form method="post">
            名前:<input type="text" name="name">
            <input type="submit" value="送信">
        </form>
    '''

このコードでは最初はフォームが表示され、ユーザーが名前を入力して送信すると、こんにちは、〇〇さん!と表示される仕組みです。

Flaskフォーム処理の全体コード例を確認

二つの例をまとめたコードは以下の通りです。

ぜひコピーして保存し、実行してみましょう。

from flask import Flask, request  # Flask本体と、リクエストを受け取るためのモジュール
app = Flask(__name__)  # Flaskアプリの初期化

@app.route('/get')  # /get というURLにアクセスされた場合
def do_get():
    name = request.args.get('name')  # クエリパラメータ(GET)から name を取得
    return f'ハロー、{name}さん!'  # 取得した値を使ってレスポンスを返す

@app.route('/', methods=['GET', 'POST'])  # トップページでは GET と POST の両方に対応
def do_get_post():
    if request.method == 'POST':  # POSTメソッドでフォームが送信された場合
        name = request.form.get('name')  # フォーム内の name 値を取得
        return f'こんにちは、{name}さん!'  # 挨拶を返す
    # GETの場合はフォームを表示(最初のアクセス時など)
    return '''
        <h2>POSTで送信</h2>
        <form method="post">  <!-- POSTメソッドで送信するフォーム -->
            名前:<input type="text" name="name">  <!-- ユーザーの入力欄 -->
            <input type="submit" value="送信">     <!-- 送信ボタン -->
        </form>
    '''

if __name__ == '__main__':
    app.run()  # アプリの起動

Flaskフォーム処理の基本をおさらいしよう

今回はフォームの基本構造と、GETとPOSTの違い、さらにそれぞれでデータを取得する方法(request.args.get()request.form.get())を学びました。

  • フォームはユーザーからの入力を受け取るための入り口
  • GETメソッドではURLにデータを含めて送信し、POSTメソッドではフォームの内部からデータを安全に送信
  • Flaskでは request.method を使ってGETとPOSTを切り替え、 request.args.get()request.form.get() を使ってデータを取得します。

次は、より便利で安全なフォーム作成ができる「WTForms」について学びます。

Webアプリらしい入力フォームを作るために、次のステップへ一緒に進みましょう!

練習問題:ユーザーの年齢を受け取って返答する簡単なWebアプリを作ろう

【Python】勉強猫がノートパソコンに向かい、練習問題に挑戦する様子。記事内の休憩用イラスト

ユーザーが入力した「年齢」をPOSTメソッドでサーバーに送信し、それに対して「あなたの年齢は○○歳ですね。」と返すWebアプリを作ってみましょう。

以下にHTMLテンプレート(form.html)を用意してあります。これを使用して、Flaskアプリ(app.py)を作成してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>年齢入力フォーム</title>
</head>
<body>
    <h2>あなたの年齢を教えてください</h2>
    <form method="post">
        年齢:<input type="text" name="age">
        <input type="submit" value="送信">
    </form>
</body>
</html>

この問題の要件

以下の要件に従ってコードを完成させてください。

  • ルートパス '/' にアクセスしたとき、GETメソッドの場合はHTMLテンプレート form.html を表示すること
  • POSTメソッドでフォームが送信された場合は、request.form.get('age') を使って年齢を取得すること
  • 取得した年齢に対して「あなたの年齢は○○歳ですね。」というメッセージを日本語で返すこと
  • request.method を使ってGETとPOSTで処理を分けること
  • Flaskのテンプレート機能 render_template() を使用して form.html を読み込むこと
  • HTMLファイルは templates フォルダに保存すること

ただし、以下のような実行結果となるコードを書くこと。

あなたの年齢を教えてください
[ 年齢:______ ] [送信]
あなたの年齢は 25 歳ですね。

この問題を解くヒント

1からコードを組み立てることが難しい場合は、以下のヒントを開いて参考にしましょう。

Q
ヒント:コードの構成を見る

正解のコードは上から順に以下のような構成となっています。

1:Flaskとフォームデータ取得に必要なモジュールをインポートする(Flask, request, render_template
2:Flaskアプリ本体を作成する(Flaskクラスのインスタンスを生成)
3:'/' にアクセスされたときに使うルーティング関数を定義する
 → この関数では、GETメソッドとPOSTメソッドを判定して、処理を分ける準備をする
4:リクエストが GETメソッド のとき、HTMLファイル(form.html)を表示する処理を書く
5:リクエストが POSTメソッド のとき、フォームで入力された「年齢」を受け取り、その年齢を使ってメッセージを作って返す処理を書く
6:このファイルを直接実行したときだけ、Flaskアプリが起動するようにするための設定を書く

このヒントを見てもまだ回答を導き出すのが難しいと感じる場合は、先に正解のコードと解説を見て内容を理解するようにしましょう。

正解コード

例えば、以下のようなプログラムが考えられます。

Q
正解コード
# app.py
from flask import Flask, request, render_template

# Flaskアプリを作成(このアプリケーション全体を管理する)
app = Flask(__name__)

# '/' にアクセスしたときに呼び出される関数
# GETとPOSTの両方に対応
@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        # POSTメソッドのとき、フォームから送信された「age」を取得
        # request.form.get() は、フォームの入力値を取得するためのFlaskのメソッド
        age = request.form.get('age')
        return f'あなたの年齢は {age} 歳ですね。'

    # GETメソッドのときはフォームを表示
    return render_template('form.html')

# アプリケーションを起動
if __name__ == '__main__':
    app.run(debug=True)

正解コードの詳細解説

正解コードをブロックごとに分割して解説します。

Q
正解コードの詳細解説

Flaskに必要な機能をインポート

from flask import Flask, request, render_template

この1行でFlaskの中で使う機能を使えるようにしています。

  • render_template:HTMLファイル(テンプレート)を表示するときに使う関数
  • Flask:Flaskアプリを作るために必要な「本体」
  • request:ユーザーから送られてきたデータ(リクエスト)を受け取るために使う

Flaskアプリの本体を作成

app = Flask(__name__)

この1行でFlaskアプリの「土台」ができます。Flask() の引数には基本的に __name__ を書きます。

これはPythonの決まりで「このファイルが実行されたとき」かどうかを判断するために使います。

トップページへのアクセスを処理する関数の定義

@app.route('/', methods=['GET', 'POST'])
def index():
  • @app.route() は「このURLにアクセスされたら、この関数を使う」という設定。
  • '/' はトップページを意味します。
  • methods=['GET', 'POST'] を指定することで、フォームの送信(POST)とページの表示(GET)両方に対応できます。

POSTメソッド(フォーム送信)の処理

    if request.method == 'POST':
        age = request.form.get('age')
        return f'あなたの年齢は {age} 歳ですね。'
  • request.method == 'POST' でフォームが送信されたかをチェックします。
  • request.form.get('age') はHTMLフォームで入力された age という名前の値を取り出します。
  • return 文では受け取った年齢を使って返す文章を作っています。

GETメソッド(最初のアクセス)の処理

    return render_template('form.html')

この行はフォームのHTMLページを表示する処理です。
render_template() を使うと、templates フォルダ内の form.html を表示できます。

アプリの実行設定

if __name__ == '__main__':
    app.run(debug=True)
  • __name__ == '__main__' は「このファイルが直接実行されたときだけこの中を動かす」という意味です。
  • app.run() でFlaskアプリが起動します。
  • debug=True をつけておくと、エラーが出たときにわかりやすくなります(開発中だけ使います)。
もっと分かりやすいサイトにするために

この記事を読んで「ここが分かりにくかった」「ここが難しかった」等の意見を募集しています。

世界一わかりやすいFlask学習サイトにするため、ぜひ問い合わせフォームからご意見下さい。

<<前のページ

Flaskの記事一覧

次のページ>>

FAQ|Flaskフォーム処理の基本に関するよくある質問

Q
Q1. GETメソッドとPOSTメソッドはどう使い分ければよいですか?

GETはURLにデータを含めて送信するため、検索や絞り込みのような操作に向いています。一方POSTは、ログイン情報や問い合わせ内容など、外部に見せたくないデータ送信に使います。

Q
Q2. request.args.get()とrequest.form.get()の違いは何ですか?

request.args.get()はGETメソッドで送信されたデータを、request.form.get()はPOSTメソッドで送信されたデータを取得します。使い分けるには、フォームのmethod属性の指定に注意しましょう。

Q
Q3. request.methodで何がわかるのですか?

request.methodはアクセス時に使用されたHTTPメソッド(例:GETやPOST)を文字列で返します。処理を分岐させたいときにif文などで活用します。

質問用コンタクトフォーム

この記事を書くにあたりAIを活用しています。

人間の目による確認も行っていますが、もし間違い等ありましたらご指摘頂けると大変助かります。

記事URLをコピーしました