【Python】第8章第7回：テンプレートエンジンの使い方

2025年1月23日 a-mun

本記事では、PythonのWebアプリケーションで使用されるテンプレートエンジンの基本的な使い方とFlaskでの活用方法について解説します。

Table of Contents

0. 記事の概要

この記事を読むメリット

テンプレートエンジンの基本を理解：HTMLを動的に生成する仕組みを学べます。
Flaskとの連携方法を習得：テンプレートエンジンを使った効率的なWebアプリ開発が可能になります。
実務に役立つスキル：ユーザーインタラクションに応じた動的なWebページを作成できます。

この記事で学べること

テンプレートエンジンの基本概念
FlaskのJinja2テンプレートエンジンの使い方
テンプレート内での動的データの扱い方

1. テンプレートエンジンとは何か？

1.1 基本概念

テンプレートエンジンは、静的なHTMLに動的なデータを埋め込むためのツールです。Pythonでは、FlaskのJinja2が広く使用されています。以下の特徴があります。

動的データ埋め込み: プレースホルダーを使用してデータを挿入。
条件分岐やループ: テンプレート内で簡単にロジックを記述可能。
再利用性: HTMLテンプレートをモジュール化して管理。

1.2 Jinja2の主な構文

以下はJinja2の基本構文です。

{{ ... }}: 変数を埋め込む
{% ... %}: 制御構文（ループ、条件分岐など）

2. Flaskでテンプレートエンジンを使う

2.1 基本的なテンプレート例

# templates/home.htmlの内容
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>テンプレートエンジン例</title>
</head>
<body>
    <h1>こんにちは、{{ user_name }}さん！</h1>
    <ul>
        {% for item in items %}
        <li>{{ item }}</li>
        {% endfor %}
    </ul>
</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", user_name="太郎", items=["りんご", "バナナ", "オレンジ"])

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

動作解説

テンプレート内の構文: {{ user_name }}で変数を埋め込み、{% for item in items %}でループを実行。
render_template: Pythonのデータをテンプレートに渡し、動的なHTMLを生成。

3. 実践例: 条件分岐とループの活用

3.1 条件分岐の例

# 条件分岐を含むテンプレート例
<h1>ようこそ！</h1>
{% if is_logged_in %}
    <p>こんにちは、{{ user_name }}さん！</p>
{% else %}
    <p>ログインしてください。</p>
{% endif %}

3.2 テンプレート継承

共通部分を継承することで、テンプレートを効率的に管理できます。

# 親テンプレート（base.html）
<html>
<head>
    <title>{{ title }}</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

# 子テンプレート（child.html）
{% extends "base.html" %}
{% block content %}
    <h1>{{ page_title }}</h1>
{% endblock %}

4. 練習問題

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

リスト内のデータを条件付きで表示するテンプレートを作成してください。
テンプレート継承を使って、ヘッダーとフッターを共通化してください。
テンプレート内で計算結果を表示してください。

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

問1の解答例

# 条件付きで表示する例
{% for item in items %}
    {% if item.starts_with("A") %}
        <p>{{ item }}</p>
    {% endif %}
{% endfor %}

問2の解答例

# テンプレート継承例は3.2を参照

6. まとめ

本記事では、テンプレートエンジンを活用した動的なHTML生成の基礎を学びました。次は、複雑なロジックを取り入れたテンプレート設計に挑戦してみましょう。