Jinja2超わかりやすいガイド

1. Jinja2とは何か？
2. 基本的な構文
1. 2.1 変数の表示
2. 2.2 制御構文
3. フィルタの使用
4. マクロの使用
5. テンプレートの継承（レイアウト）
1. 5.1 ベーステンプレート (base.html)
2. 5.2 子テンプレート (page.html)
6. テンプレートのインクルード
7. コメント
8. Flaskとの連携例
9. 安全なHTMLエスケープ
10. まとめ

1. Jinja2とは何か？

Jinja2はPythonで書かれた強力なテンプレートエンジンです。HTMLやその他のテキストファイルに動的なコンテンツを簡単に組み込むことができます。

Pythonのデータ

→

Jinja2テンプレート

→

生成されたHTML

メリット： HTMLとPythonのロジックを分離できるため、メンテナンスが容易になります。これはMVCパターン（Model-View-Controller）の「View」部分に相当します。

2. 基本的な構文

2.1 変数の表示

<p>こんにちは、{{ name }}さん！</p>

Pythonコード：

from jinja2 import Template
template = Template(“<p>こんにちは、{{ name }}さん！</p>”)
result = template.render(name=”田中”)

結果：

<p>こんにちは、田中さん！</p>

2.2 制御構文

条件分岐 (if-else)

{% if 条件 %}
条件が真の場合の内容
{% else %}
条件が偽の場合の内容
{% endif %}

{% if user_logged_in %}
<p>ようこそ、{{ username }}さん！</p>
{% else %}
<p>ログインしてください</p>
{% endif %}

ループ (for)

{% for 要素 in リスト %}
繰り返し処理する内容
{% endfor %}

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

Pythonコード：

from jinja2 import Template
template = Template(“<ul>{% for item in items %}<li>{{ item }}</li>{% endfor %}</ul>”)
result = template.render(items=[“りんご”, “バナナ”, “オレンジ”])

結果：

3. フィルタの使用

フィルタを使用して変数の値を変換できます。

フィルタ	説明	例
upper	大文字に変換	{{ name\|upper }}
lower	小文字に変換	{{ name\|lower }}
capitalize	先頭を大文字に	{{ name\|capitalize }}
default	デフォルト値を設定	{{ name\|default(‘ゲスト’) }}
length	長さを取得	{{ items\|length }}
trim	前後の空白を削除	{{ text\|trim }}
join	リストを結合	{{ list\|join(‘, ‘) }}

<p>{{ username|upper }}</p>
<p>アイテム数: {{ items|length }}</p>
<p>買い物リスト: {{ items|join(‘, ‘) }}</p>

結果：

<p>田中太郎</p>
<p>アイテム数: 3</p>
<p>買い物リスト: りんご, バナナ, オレンジ</p>

4. マクロの使用

マクロは関数のように再利用可能なコードブロックを定義できます。

{% macro マクロ名(引数1, 引数2, …) %}
マクロの内容
{% endmacro %}

{% macro input_field(name, value=”, type=’text’) %}
  <input type=”{{ type }}” name=”{{ name }}” value=”{{ value }}”>
{% endmacro %}

<form>
  {{ input_field(‘username’) }}
  {{ input_field(‘password’, type=’password’) }}
  {{ input_field(‘submit’, ‘ログイン’, ‘submit’) }}
</form>

結果：

5. テンプレートの継承（レイアウト）

テンプレートの継承を使用して、サイト全体のレイアウトを管理できます。

5.1 ベーステンプレート (base.html)

<!DOCTYPE html>
<html>
<head>
  <title>{% block title %}デフォルトタイトル{% endblock %}</title>
</head>
<body>
  <header>
    {% block header %}デフォルトヘッダー{% endblock %}
  </header>

  <main>
    {% block content %}{% endblock %}
  </main>

  <footer>
    {% block footer %}© 2025 My Website{% endblock %}
  </footer>
</body>
</html>

5.2 子テンプレート (page.html)

{% extends “base.html” %}

{% block title %}ホームページ{% endblock %}

{% block header %}
<h1>ようこそ！</h1>
{% endblock %}

{% block content %}
<p>これはコンテンツエリアです。</p>
{% endblock %}

ポイント： {% block %} で定義された部分だけを子テンプレートで上書きできます。残りの部分はベーステンプレートのまま維持されます。

6. テンプレートのインクルード

他のテンプレートファイルを現在のテンプレートに含めることができます。

{% include ‘ファイル名.html’ %}

<!– メインページ –>
<html>
<body>
  {% include ‘header.html’ %}

  <main>
    メインコンテンツ
  </main>

  {% include ‘footer.html’ %}
</body>
</html>

違い： {% include %} はテンプレートをそのまま挿入するだけですが、{% extends %} はレイアウトを継承してブロックを上書きします。

7. コメント

テンプレート内にコメントを追加できます。これはHTMLには出力されません。

{# これはコメントです #}

8. Flaskとの連携例

PythonのWebフレームワークFlaskとの連携例です。

Pythonコード (app.py):

from flask import Flask, render_template

app = Flask(__name__)

@app.route(‘/’)
def index():
  users = [
    {‘name’: ‘田中’, ‘age’: 28},
    {‘name’: ‘鈴木’, ‘age’: 32},
    {‘name’: ‘佐藤’, ‘age’: 25}
  ]
  return render_template(‘index.html’, title=’ユーザー一覧’, users=users)

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

テンプレート (index.html):

<!DOCTYPE html>
<html>
<head>
  <title>{{ title }}</title>
</head>
<body>
  <h1>{{ title }}</h1>

  <table>
    <tr>
      <th>名前</th>
      <th>年齢</th>
    </tr>
    {% for user in users %}
    <tr>
      <td>{{ user.name }}</td>
      <td>{{ user.age }}</td>
    </tr>
    {% endfor %}
  </table>
</body>
</html>