1. FlaskとJinja2とは？

PythonのWebフレームワークであるFlask（フラスク）は、WebサイトやWebアプリを簡単に作るためのツールです。そして、Flaskの中でHTMLを表示するときに活躍するのがJinja2（ジンジャ・ツー）です。

Jinja2はテンプレートエンジンと呼ばれますが、これは「型紙（テンプレート）のようにHTMLの雛形を作り、そこにデータを流し込んでページを完成させる」仕組みです。

2. Jinja2の基本的な使い方

FlaskでJinja2を使うためには、まずHTMLファイルをtemplatesという名前のフォルダに保存します。

たとえば、hello.htmlというHTMLテンプレートを作りたいときは、次のようにします。



<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>こんにちは</title>
</head>
<body>
    <h1>こんにちは、{{ name }}さん！</h1>
</body>
</html>

{{ name }}の部分がポイントです。これはJinja2の「変数」を表示する書き方で、Pythonから渡した値がここに入ります。

3. Flaskでテンプレートを表示する

次に、Flaskでこのテンプレートを表示するPythonコードを書いてみましょう。


from flask import Flask, render_template

app = Flask(**name**)

@app.route("/")
def hello():
name = "結衣"
return render\_template("hello.html", name=name)

if **name** == "**main**":
app.run(debug=True)

render\_template()という関数を使うと、HTMLファイルと変数（この場合はname）をつなげて表示できます。

4. if文とfor文を使ったJinja2の応用

Jinja2ではif文やfor文も使えます。HTMLの中で条件分岐や繰り返し処理ができるんです。


<!-- templates/loop.html -->
<ul>
{% for item in items %}
    <li>{{ item }}</li>
{% endfor %}
</ul>


@app.route("/list")
def show_list():
    items = ["りんご", "バナナ", "ぶどう"]
    return render_template("loop.html", items=items)

{% for item in items %}と{% endfor %}の間でリストを繰り返し表示できます。

5. コメントや安全な表示方法

Jinja2ではHTMLの中にPythonコードを入れるとき、表示されないようにしたい部分はコメントにできます。


{# これはJinja2のコメントです。HTMLには表示されません #}

また、{{ 変数 }}の中にHTMLタグが入っていても、自動的に無害化されます（セキュリティ対策）。

たとえば、次のように悪意のあるHTMLが入っても、FlaskとJinja2は安全な形で表示してくれます。


@app.route("/safe")
def safe():
    name = "<script>alert('危険！')</script>"
    return render_template("hello.html", name=name)

6. Jinja2の文法まとめと注意点

{{ 変数 }}：値を表示する
{% if 条件 %} ... {% endif %}：条件分岐
{% for item in items %} ... {% endfor %}：繰り返し
{# コメント #}：テンプレート内のコメント

HTMLの中にPythonを書いているような気がするかもしれませんが、実際にはPythonとは別物のテンプレート構文です。Jinja2の記号には独自のルールがあるので、{% %}や{{ }}の使い方を間違えないようにしましょう。

まとめ

Flaskで使われるテンプレートエンジンJinja2は、Webアプリケーションを構築する際に欠かせない重要な仕組みです。HTMLに動的な値を埋め込み、柔軟にページを生成できるため、Flaskによる開発の中心となります。今回学んだ内容を振り返りながら、Jinja2がどのように役立つのか、どんな文法がありどのように応用できるのかを整理して理解を深めていきましょう。

Jinja2の大きな特徴として、{{ }} や {% %} といった特別な記号によって値の埋め込みや条件分岐、繰り返し処理を実現できる点があります。HTMLという静的な構造に対し、動的なデータを自然に組み込めるため、ユーザーに応じた画面表示や、リストの動的描画、フォームの値の反映など、さまざまなWebアプリでの標準的な処理に適しています。

また、Flask側で render_template() を使って変数をテンプレートへ渡す仕組みも、テンプレートエンジンならではの重要な流れです。テンプレートファイルは templates フォルダに置き、Python側からデータを受け取って最終的なHTMLとしてブラウザに出力されます。この仕組みによって、Flaskはロジックと見た目を分離し、整ったコード構成を維持しやすくしています。

応用として、テンプレートの中ではif文やfor文を利用でき、さらにコメント機能や安全な自動エスケープ機能も備わっています。これにより、ユーザーから渡された値に悪意あるスクリプトが含まれていても、勝手に実行されてしまうことなく安全に表示できます。特にWebアプリではセキュリティが欠かせないため、この自動エスケープ機能はとても重要です。

例えば、商品一覧ページの表示や、ユーザー名の埋め込み、検索結果のリスト表示など、Webアプリで頻出する処理の多くは、このJinja2の基本文法で実装できます。複雑なページでも、テンプレートにデータを渡し、それを適切にループや条件分岐で処理するだけで動的なページが簡単に生成できます。

また、テンプレートのネストやレイアウト拡張にも対応しているため、より大型のWebアプリケーションでもスケールしやすい構造を作ることができます。特に、複数ページで共通するヘッダー、フッター、メニューバーなどをテンプレート継承で管理すると、保守性が大幅に向上します。

これからFlaskでアプリを作る際は、まずはテンプレートにどのデータを渡し、どのように表示したいかを整理するところから始めると良いでしょう。Jinja2は直感的でわかりやすいため、文法に慣れると開発スピードは一気に上がります。今回学んだ基礎を土台により高度なテンプレート活用へ進んでいくことで、Webアプリの表現力を自由自在に拡張していけるようになります。

■ Jinja2の応用例サンプルコード


<!-- templates/dashboard.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ダッシュボード</title>
</head>
<body>
    <h1>{{ user_name }}さんのダッシュボード</h1>

    {% if notifications %}
        <h2>お知らせ</h2>
        <ul>
            {% for n in notifications %}
                <li>{{ n }}</li>
            {% endfor %}
        </ul>
    {% else %}
        <p>現在お知らせはありません。</p>
    {% endif %}

    <h2>お気に入りアイテム</h2>
    <ul>
        {% for item in favorites %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>
</body>
</html>


# app.py
from flask import Flask, render_template

app = Flask(__name__)

@app.route("/dashboard")
def dashboard():
    return render_template(
        "dashboard.html",
        user_name="結衣",
        notifications=["新しいメッセージがあります", "パスワードの期限が近づいています"],
        favorites=["りんご", "バナナ", "メロン"]
    )

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

このようにテンプレートに複数の変数を渡し、Jinja2側で柔軟に処理することで、ユーザーごとに異なるページ内容を簡単に表現できます。アプリの成長に合わせて、テンプレート側に処理を分離していくことでコードが整理され、管理しやすい構造を維持できます。

先生と生徒の振り返り会話

生徒：「Jinja2ってHTMLの中でPythonみたいなことができるんですね！不思議な感じです。」

先生：「そうですね。Pythonそのものではありませんが、Pythonで扱うデータをHTMLに綺麗に埋め込むのが得意なんです。」

生徒：「{{ }} と {% %} の違いもよく分かりました。表示したいときは {{ }}、処理は {% %} なんですね！」

先生：「その理解で完璧です。テンプレート内の処理を整理しやすくなりますよ。」

生徒：「for文でリストを表示したり、if文で条件分岐したり、結構なんでもできるんですね！」

先生：「応用するともっと便利になりますよ。テンプレート継承なども学ぶと、大規模なアプリでも構造がまとまります。」

生徒：「まずは今日学んだ変数、if、forの基本文法をしっかり使えるようにします！」

先生：「その積み重ねが大切です。どんどんテンプレートを作って慣れていきましょう。」