✏️

【Flask入門(4)】フォーム送信データを一覧表示するまで

に公開
Flask
Python
idea

【Flask入門】フォーム送信データを一覧表示するまで

前回はフォームから送信した内容を受け取って画面に表示するところまで実装しました。
今回はさらに進めて、送信した学習ログを 一覧表示 できるようにします。

目標

  • フォームから入力した学習ログをサーバー側で記録
  • 記録したログを一覧で表示
  • 複数回送信するとリストが増えていく

1．app.py を修正する

app.py に以下のコードを書きます。

from flask import Flask, request, render_template

app = Flask(__name__)

@app.route("/")
def index():
    return render_template("index.html")

@app.route("/submit", methods=["POST"])
def submit():
    log = request.form["log"]
    return f"受け取りました: {log}"

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

2. index.htmlを修正する

次に templates/index.html を作ります。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>学習ログ</title>
</head>
<body>
    <h1>Hello, 学習ログ！</h1>
    <form action="/submit" method="post">
        <input type="text" name="log" placeholder="今日の学習ログ">
        <button type="submit">送信</button>
    </form>
</body>
</html>

3. 動作確認をする

アプリを起動します。

python app.py

ブラウザで以下にアクセスします。

http://127.0.0.1:5000/

4. コード解説

  • logs = []
    Pythonのリストを用意して、学習ログを一時的に保存します。
    ※アプリを終了すると消えます。

  • if request.method == "POST":
    フォームから送信されたときだけデータを処理します。

  • log = request.form.get("log")
    HTMLフォームで入力された内容を取得。

  • logs.append(log)
    入力された内容をリストに追加。

  • render_template("index.html", logs=logs)
    保存されたログをテンプレートに渡し、HTML側で表示します。

  • index.html 内の {% for log in logs %}
    渡されたログを1つずつ取り出して <li> として表示します。

5. 実行例

フォームに「Flaskの環境構築」と入力 → 送信
下に「Flaskの環境構築」がリスト表示される
さらに「フォームから送信を試した」と入力 → リストが2つに増える

次のステップ

今回の方法ではアプリを終了するとログが消えてしまいます。
次は データを永続化（SQLiteなどに保存） する方法に挑戦します。

Discussion