FlaskのJinja2テンプレートエンジンの使用方法

Flaskと組み合わせて使われる主要なテンプレートエンジンであるJinja2の基本的な使用方法を解説します。

概要

この記事ではFlaskで使用されるテンプレートエンジンJinja2について詳しく説明します。実行サンプルコードは次のGitHubリンクから確認できます。

ここでは、以下のバージョンを使用した、ルーティング方法を説明します。

Flask v2.1.2
Python v3.9.7

また、今回作成するコードは全て、GitHubに掲載しています。

テンプレートエンジンとは

テンプレートエンジンは、特定のデータモデルに基づいて入力データをドキュメント形式で出力するためのソフトウェアコンポーネントです。FlaskでデータをHTMLに出力する際、APIリクエストを行いレスポンスデータを加工する必要がありますが、テンプレートエンジンを利用することで、この一連の煩雑な処理を簡素化し、データをHTML形式で簡単に出力することが可能になります。

Jinja2とFlask

FlaskはデフォルトでJinja2というテンプレートエンジンをサポートしています。Jinja2は強力で柔軟性のあるテンプレートエンジンで、複雑なロジックをテンプレートに組み込むことが可能です。

Jinja2の使用方法

Jinja2を使用するためにはまず、テンプレートファイルを保存するディレクトリを設定します。この例では、templatesディレクトリを作成し、その中にhello.htmlというファイルを保存します。

Jinja2のサンプルコードは次の通りです。

app.py

from flask import Flask, render_template

app = Flask(__name__)

@app.route("/")
def home():
    message = "hello world"
    return render_template("hello.html", message=message)

Jinja2テンプレートはHTML要素をインデントで区切って追加します。

hello.html

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <p>{{ message }}</p>
</body>

</html>

export FLASK_APP=app.py
flask run

以上の手順を踏んだら、アプリケーションを実行して、http://localhost:5000 にアクセスしてみましょう。

Jinja2のテンプレート構文詳解

Jinja2テンプレートエンジンは多様な構文をサポートしており、テンプレート内での動的な処理を可能にします。以下に、Jinja2の主な構文とその使用例を挙げて説明します。

変数

Jinja2で変数を表示するには、その変数を2つの波括弧 {{ }} で囲みます。これを変数ブロックと呼びます。このブロックは、テンプレートがレンダリングされる際に評価され、その値に置換されます。

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <p>{{ message }}</p>
</body>
</html>

上記のテンプレートでは、Flaskアプリケーションからmessage変数が渡されると、{{ message }}はその値に置換されます。

制御構造

Jinja2は制御構造もサポートしています。たとえば、if文やfor文を使用することが可能です。これらの構文は {% %} で囲まれます。

if文の例:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    {% if message %}
        <p>{{ message }}</p>
    {% else %}
        <p>No message available.</p>
    {% endif %}
</body>
</html>

この例では、message変数が存在する場合はその内容を表示し、そうでなければ"No message available.“と表示します。

for文の例:

<!DOCTYPE html>
<html>
<head>
    <title>Page Title</title>
</head>
<body>
    <ul>
    {% for item in list %}
        <li>{{ item }}</li>
    {% endfor %}
    </ul>
</body>
</html>

この例では、listという名前のリスト変数が存在する場合、その要素すべてを順に表示します。

フィルター

フィルターは、変数を変換するためのもので、| 記号を使って変数の後に適用します。一部のフィルターでは引数を取ることも可能です。

<p>{{ message|capitalize }}</p>

この例では、capitalize フィルターが適用され、message 変数の先頭文字が大文字になります。

FlaskのJinja2テンプレートエンジンの使用方法

概要 #

テンプレートエンジンとは #

Jinja2とFlask #

Jinja2の使用方法 #

Jinja2のテンプレート構文詳解 #

変数 #

制御構造 #

フィルター #

概要