3.3 テンプレートエンジン (Jinja2) の基本 #

この記事では、Flaskで使用されるテンプレートエンジンであるJinja2について解説します。テンプレートエンジンとは、HTMLやテキストファイルにプログラムで生成されたデータを埋め込むことができる仕組みです。Jinja2を使用することで、PythonのデータをHTMLに簡単に埋め込むことができます。

1. テンプレートの作成 #

まず、プロジェクトのルートディレクトリにtemplatesという名前のフォルダを作成します。このフォルダ内にHTMLテンプレートファイルを配置します。

例として、以下のようなindex.htmlファイルを作成してみましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ title }}</title>
</head>
<body>
    <h1>{{ heading }}</h1>
    <p>{{ content }}</p>
</body>
</html>

上記のHTMLファイルでは、{{ }}で囲まれた部分がJinja2のテンプレート構文です。この部分にPythonのデータが埋め込まれます。

2. テンプレートのレンダリング #

Flaskでテンプレートをレンダリングするには、render_template関数を使用します。以下は、index.htmlテンプレートをレンダリングする例です。

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    title = 'Hello, Jinja2'
    heading = 'Jinja2の基本'
    content = 'これはJinja2テンプレートエンジンの基本的な使い方です。'
    return render_template('index.html', title=title, heading=heading, content=content)

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

render_template関数は、第一引数にテンプレートファイル名を指定し、その後に渡したいデータをキーワード引数として渡します。この例では、title, heading, contentというデータをテンプレートに渡しています。

3. 制御構文 #

Jinja2では、制御構文を使ってループや条件分岐を行うことができます。以下は、制御構文の例です。

{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}

{% if user.is_authenticated %}
    <p>こんにちは、{{ user.name }}さん。</p>
{% else %}
    <p>ログインしてください。</p>
{% endif %}

4. テンプレートの継承 #

Jinja2では、テンプレートの継承を使用して、共通のレイアウトを簡単に管理できます。これにより、コードの重複を避けることができます。以下は、テンプレートの継承を使った例です。

まず、base.htmlという名前の共通レイアウトのテンプレートを作成します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}デフォルトタイトル{% endblock %}</title>
</head>
<body>
    <header>
        {% block header %}{% endblock %}
    </header>
    <main>
        {% block content %}{% endblock %}
    </main>
    <footer>
        {% block footer %}{% endblock %}
    </footer>
</body>
</html>

{% block [block_name] %}と{% endblock %}で囲まれた部分は、子テンプレートで上書きされる部分です。上記の例では、title, header, content, footerという4つのブロックが定義されています。

次に、base.htmlを継承したindex.htmlテンプレートを作成します。

{% extends 'base.html' %}

{% block title %}Jinja2の基本{% endblock %}

{% block header %}
    <h1>テンプレートの継承</h1>
{% endblock %}

{% block content %}
    <p>これはJinja2テンプレートエンジンのテンプレート継承機能を使用した例です。</p>
{% endblock %}

{% block footer %}
    <p>フッターの内容</p>
{% endblock %}

このindex.htmlでは、{% extends 'base.html' %}でbase.htmlを継承しています。その後、各ブロックを上書きして、独自の内容を定義しています。

これで、base.htmlが共通のレイアウトとして使用され、index.htmlでそのレイアウトを継承し、独自のコンテンツを追加できます。

以上が、Flaskで使用されるテンプレートエンジン、Jinja2の基本的な使い方です。Jinja2を使いこなすことで、ウェブアプリケーションのビューを効率的に作成することができます。次の記事「3.4 静的ファイルの扱い」では、Flaskでの静的ファイルの管理方法について解説します。