先生と生徒の会話形式で理解しよう

生徒

「FlaskでWebページを作るときに、HTMLをどうやって表示するんですか？」

先生

「FlaskではJinja2（ジンジャ・ツー）というテンプレートエンジンを使って、HTMLを動的に生成します。」

生徒

「テンプレートエンジンってなんですか？」

先生

「テンプレートエンジンとは、HTMLの中にPythonの値や処理を埋め込む仕組みです。では、実際に使い方を見ていきましょう！」

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を使ったテンプレート処理は、初心者にとって最初は少し不思議に感じる部分もありますが、実際に手を動かしてみるととても柔軟で扱いやすい仕組みだとわかります。とくに、HTMLの中に変数を埋め込んだり、条件分岐や繰り返しを行ったりする方法は、静的なページでは実現できない動的なWeb表現を可能にしてくれます。今回の記事では、FlaskとJinja2の基本的な使い方から、変数の表示方法、if文やfor文の活用、テンプレートの安全性など、実際のWebアプリ開発で欠かせない要素を丁寧に確認しました。さらに、複数のテンプレートを組み合わせることで、大規模なWebサービスでも整ったファイル構成を維持しながら開発できるという点も、FlaskとJinja2を理解する大きな手がかりになります。

テンプレートエンジンは単なるHTMLの置き換え機能ではなく、Webアプリケーションの中でデータと見た目を綺麗に分離する役割を持っています。Jinja2には独自の文法が多く存在しますが、それらの構文は覚えてしまえばシンプルで、HTMLを保ちながら効率よく画面を生成できる便利な仕組みです。また、変数の自動エスケープ機能によって、HTMLタグが混入した場合でも安全な形式で表示されるため、開発者が意識せずとも一定のセキュリティが担保される点も魅力的です。さらに、テンプレート内でのコメントや、共通レイアウトの利用など、実践的な開発でも役立つ要素が豊富に揃っています。

今回扱ったテンプレートレンダリングや変数展開は、小さなWebサイトから大規模なアプリケーションまで幅広く応用でき、Flaskを使った開発では欠かせない基礎知識です。特に、変数を使ったメッセージ表示や、リストを動的に生成する機能は、ユーザーごとに異なる内容を届ける際にはとても便利な仕組みになります。さらに、繰り返し構文や条件分岐をうまく組み合わせることで、複雑なレイアウトを持つページでも自然に表現できるようになります。こうしたテンプレートエンジンの役割を理解することで、より直感的で読みやすいコードを心掛けることができます。

ここまでの流れを振り返ると、Jinja2は単にHTMLを書き換える技術ではなく、Flaskでの画面生成全体を支える重要な仕組みであることが見えてきます。テンプレートフォルダであるtemplatesにHTMLを配置し、render_templateを使ってPythonから値を渡す流れは、どのWebアプリケーションでも大きく変わりません。基本の構文を理解しておけば、フォーム入力やデータベースの値を一覧表示したり、条件によって表示内容を切り替えたりする処理も簡単に実装できます。

サンプルコードで振り返るポイント

最後に、今回の内容を踏まえた簡単なサンプルコードをまとめておきます。


<!-- templates/sample.html -->
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>商品一覧</title>
</head>
<body>
    <h1>おすすめの商品一覧</h1>
    <ul>
        {% for item in items %}
            <li>{{ item }}</li>
        {% endfor %}
    </ul>

    {% if message %}
        <p>{{ message }}</p>
    {% else %}
        <p>メッセージはありません。</p>
    {% endif %}
</body>
</html>


from flask import Flask, render_template

app = Flask(__name__)

@app.route("/items")
def item_list():
    items = ["カメラ", "イヤホン", "スマートフォン"]
    message = "新着商品をチェックしてください！"
    return render_template("sample.html", items=items, message=message)

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

この例のように、テンプレートにリストやメッセージを渡すことで、動的にページ内容が変化します。FlaskとJinja2の組み合わせを理解することで、より柔軟で魅力的なWebページを実現できるようになります。

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

生徒

「今日の内容で、テンプレートがただのHTMLじゃないってよく分かりました！」

先生

「そうですね。Jinja2があるおかげで、Flaskでも本格的なWebアプリが作れるようになります。」

生徒

「特に変数の{{ }}とか、{％ for 〜 %}でリストが繰り返し表示されるところが面白かったです。」

先生

「繰り返し処理や条件分岐はよく使うので、自然と身についていきますよ。これからフォーム入力やデータベース連携に進むと、もっとJinja2の便利さを実感できます。」

生徒

「なるほど！もっと練習してJinja2に慣れてみます！」