Python

【Python】第8章第4回：HTMLとPythonの連携

a-mun

本記事では、Pythonを使ってHTMLテンプレートを活用する方法を学びます。Flaskフレームワークを使用して、Webアプリケーションに動的なHTMLを組み込む手法を解説します。

0. 記事の概要

この記事を読むメリット

  • HTMLテンプレートの使い方を習得：PythonコードとHTMLを組み合わせた動的なWebページの作成が可能になります。
  • Flaskを応用したWeb開発に挑戦：テンプレートエンジンの活用法を学べます。
  • 柔軟なWebアプリケーション構築が可能：ユーザーの入力に応じたコンテンツ生成が簡単になります。

この記事で学べること

  • HTMLとPythonを連携させる基本的な方法
  • Flaskのテンプレートエンジン（Jinja2）の使い方
  • 動的Webページの作成手順

1. HTMLとPythonの連携の概要

1.1 HTMLとPythonの役割分担

HTMLはWebページの構造を定義し、Pythonはその中で動的なデータを処理して埋め込みます。この組み合わせにより、以下のような機能が実現できます。

  • データベースの内容を動的に表示
  • フォーム入力に応じた結果の表示
  • 条件に応じたHTML要素の変更

1.2 Flaskのテンプレートエンジン

FlaskはJinja2というテンプレートエンジンを使用して、HTMLテンプレートに動的なデータを埋め込みます。

2. FlaskでHTMLをレンダリング

2.1 HTMLファイルの作成

# templates/home.htmlの内容
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>FlaskとHTML</title>
</head>
<body>
    <h1>こんにちは、{{ name }}さん！</h1>
</body>
</html>

2.2 Flaskコードでレンダリング

# app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    return render_template("home.html", name="太郎")

if __name__ == "__main__":
    app.run(debug=True)
動作解説
  • HTMLテンプレート: ファイルにプレースホルダー（{{ name }}）を設置。
  • render_template: HTMLテンプレートにデータを埋め込み、レンダリング。
  • Flaskアプリ: ローカルサーバーでHTMLを動的に表示。

3. 実践例: 動的なWebページ作成

3.1 入力フォームの作成

# templates/form.htmlの内容
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ユーザー入力フォーム</title>
</head>
<body>
    <form method="POST">
        <label for="name">お名前:</label>
        <input type="text" id="name" name="name">
        <button type="submit">送信</button>
    </form>
</body>
</html>

3.2 フォームデータの受け取り

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

@app.route("/form", methods=["GET", "POST"])
def form():
    if request.method == "POST":
        name = request.form["name"]
        return render_template("home.html", name=name)
    return render_template("form.html")

if __name__ == "__main__":
    app.run(debug=True)
動作解説
  • フォーム作成: ユーザー入力を受け取るHTMLを構築。
  • POSTリクエスト: Flaskでデータを受信し、テンプレートに渡します。

4. 練習問題

以下の課題に挑戦してみましょう。

  1. 年齢を入力するフォームを追加し、年齢を表示してください。
  2. フォームにバリデーションを追加して、空欄の場合にエラーメッセージを表示してください。
  3. 複数のデータをリスト形式でHTMLに表示してください。

5. 練習問題の解答と解説

問1の解答例

# 年齢フォームの追加
@app.route("/form", methods=["GET", "POST"])
def form():
    if request.method == "POST":
        name = request.form["name"]
        age = request.form["age"]
        return f"<h1>こんにちは、{name}さん！あなたは{age}歳ですね。</h1>"
    return '''
    <form method="POST">
        お名前: <input type="text" name="name"><br>
        年齢: <input type="text" name="age"><br>
        <button type="submit">送信</button>
    </form>
    '''

6. まとめ

本記事では、HTMLとPythonの連携方法を学びました。Flaskを活用して動的なWebページを構築し、より高度なWebアプリケーションを目指しましょう！

こちらもおすすめ

【Python】第8章第14回：ロギングとエラーハンドリング

a-mun

【Python】第5章第4回：コンストラクタ（__init__）の使い方

a-mun

【Python】第2章第9回：リスト内包表記の基礎

a-mun