【Webアプリ開発入門 #2】FlaskでWebフォーム作成！Pythonでユーザー入力を受け取ろう

ALL
2025.09.04

こんにちは、Tech Samuraiです！
前回の記事「【Webアプリ開発入門 #1】PythonでWebサイトを作ろう！」では、Flaskを使って、ブラウザに「Hello, World!」と表示する最小のWebアプリを動かすことに成功しましたね。

Webサイトを表示できるようになったら、次はいよいよ**ユーザーからの情報を受け取り、それに応じて動的に結果を返す**という、インタラクティブな機能に挑戦します。今回のプロジェクトは、以前コマンドラインで作成した**「材料重量計算ツール」**を、誰もがブラウザから使える本格的なWebアプリケーションへと進化させることです！

この冒険を通して、Webページの「入力フォーム（HTML）」と、サーバーサイドの「処理（Python/Flask）」を連携させる方法をマスターします。さあ、あなたのツールを世界に公開する準備を始めましょう！

ステップ1：見た目を作る – 入力フォーム（HTML）の作成

まず、ユーザーが材料の種類や体積を入力するための、Webページの「見た目」部分を作成します。複雑なHTMLをPythonのコード内に直接書くのは大変なので、Flaskでは**テンプレート**という仕組みを使います。

  1. プロジェクトフォルダ（`my_flask_app`）の中に、`templates`という名前の新しいフォルダを作成してください。
  2. その`templates`フォルダの中に、`index.html`という名前で新しいファイルを作成し、以下のHTMLコードを貼り付けます。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>材料重量計算ツール</title>
</head>
<body>
    <h1>材料重量計算ツール</h1>
    <form action="/" method="post">
        <p>
            <label for="material">材料を選択:</label>
            <select name="material" id="material">
                <option value="aluminum">アルミ</option>
                <option value="iron">鉄</option>
                <option value="stainless">ステンレス</option>
            </select>
        </p>
        <p>
            <label for="volume">体積を入力 (cm³):</label>
            <input type="text" name="volume" id="volume">
        </p>
        <p>
            <input type="submit" value="計算する">
        </p>
    </form>
</body>
</html>

ポイント：

  • <form action="/" method="post">: フォームのデータをどこに(action)、どうやって(method)送るかを指定します。postは、データを送信するための標準的な方法です。
  • name="material", name="volume": 各入力部品に付けられたこのnameが、後でPython側からデータを取り出すための「キー」になります。非常に重要です。

ステップ2：頭脳を作る – Flaskでフォームデータを受け取る

次に、`app.py`を修正し、ブラウザから送られてきたデータを受け取って処理する「頭脳」部分を実装します。

以前作成した材料重量計算のロジックをここに統合し、`index.html`を画面に表示するよう変更します。

from flask import Flask, render_template, request

app = Flask(__name__)

# 材料の密度 (g/cm³)
DENSITIES = {
    'aluminum': 2.70,
    'iron': 7.87,
    'stainless': 7.93
}

# methods=['GET', 'POST'] を追加して、両方のリクエストを受け取れるようにする
@app.route('/', methods=['GET', 'POST'])
def index():
    # request.method で、GETかPOSTかを判断
    if request.method == 'POST':
        # --- POSTリクエスト（フォームが送信された）の場合 ---

        # 1. フォームからデータを取得
        material = request.form['material']
        try:
            volume = float(request.form['volume'])
        except ValueError:
            return "体積には数値を入力してください。"

        # 2. 重量を計算
        density = DENSITIES.get(material, 0)
        weight = density * volume

        # 3. 結果をテンプレートに渡して表示
        return render_template('index.html', result=f"{weight:.2f} グラム")

    else:
        # --- GETリクエスト（初めてページにアクセスした）の場合 ---
        # 単にHTMLファイルを表示する
        return render_template('index.html')

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

ポイント：

  • render_template('index.html'): `templates`フォルダにあるHTMLファイルを読み込み、ブラウザに表示するためのFlaskの関数です。
  • request.method: 現在のリクエストが、ページの初回表示（`GET`）なのか、フォーム送信（`POST`）なのかを判断します。
  • request.form['material']: POST`で送信されたデータにアクセスする方法です。HTMLのname属性で指定した名前をキーとして使います。

ステップ3：見た目と頭脳を連携 – 結果をWebページに表示する

最後に、Python側で計算した結果を、HTML側に表示するように`index.html`を少しだけ改造します。Flaskのテンプレートエンジン（Jinja2）を使うと、HTMLの中にPythonの変数を埋め込むことができます。

`templates/index.html`を以下のように修正してください。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>材料重量計算ツール</title>
</head>
<body>
    <h1>材料重量計算ツール</h1>

    <form action="/" method="post">
        <p>
            <label for="material">材料を選択:</label>
            <select name="material" id="material">
                <option value="aluminum">アルミ</option>
                <option value="iron">鉄</option>
                <option value="stainless">ステンレス</option>
            </select>
        </p>
        <p>
            <label for="volume">体積を入力 (cm³):</label>
            <input type="text" name="volume" id="volume">
        </p>
        <p>
            <input type="submit" value="計算する">
        </p>
    </form>
    {% if result %}
    <hr>
    <h2>計算結果</h2>
    <p style="font-size: 20px; font-weight: bold; color: blue;">
        {{ result }}
    </p>
    {% endif %}
    </body>
</html>

ポイント：

  • {% if result %} ... {% endif %}: Python側から`result`という変数が渡された場合にのみ、このブロックの中身を表示するという条件分岐です。
  • {{ result }}: Pythonのrender_template`関数で渡された`result`変数の値を、この場所に表示します。

これで、`app.py`をターミナルで実行（`python3 app.py`）し、ブラウザでアクセスして数値を入力・計算すると、同じページに計算結果が表示されるはずです！

まとめと次回予告

おめでとうございます！あなたは、ユーザーからの入力を受け取り、サーバーサイドのPythonで処理を行い、結果を動的に表示する、完全なインタラクティブWebアプリケーションを構築しました。

  • HTMLテンプレートを使い、見た目とロジックを分離する方法。
  • HTMLの<form>タグで、ユーザー入力欄を作成する方法。
  • Flaskのrequestオブジェクトで、送信されたデータを受け取る方法。
  • render_templateを使い、Pythonの変数をHTMLに埋め込む方法。

機能的にはこれで完成です！しかし、Webサイトとしては、見た目が少し寂しいですよね。次回、第3回では、このアプリケーションに**CSS**を使ってデザインを施し、プロフェッショナルな見た目のツールへと仕上げていきます！お楽しみに！

（AD）FX・CFD・株式取引ならDMM.com証券

コメント

タイトルとURLをコピーしました