Python | f文字列で書いたテンプレートを Jinja2 に書き換える練習問題

では、f文字列 → Jinja2 への変換を理解するための練習問題を、
「ステップ付き（少しずつ変えて理解）」で作ります。

練習問題：f文字列を Jinja2 テンプレートに書き換えよう

前提

• Python の f文字列： f"Hello {name}" のように「{}」内で変数を展開。
• Jinja2 テンプレート： "Hello {{ name }}" のように「{{ }}」内で変数を展開。
  Flask や Django の HTML テンプレートでよく使われます。

ステップ①：基本の変数展開

問題

次の f文字列を Jinja2 テンプレートに書き換えてください。

f"Hello, {user_name}!"

f"Hello, {user_name}!"

✅ 解答

Hello, {{ user_name }}!

💡 解説

• {} → {{ }} に置き換えるだけ。
• f文字列は Python実行時に評価、Jinja2 は テンプレートレンダリング時に評価。

ステップ②：数値のフォーマット

問題

次の f文字列を Jinja2 で同じ見た目になるように書き換えましょう。

f"Your score is {score:.2f} points."

f"Your score is {score:.2f} points."

✅ 解答

Your score is {{ "%.2f"|format(score) }} points.

💡 解説

• f文字列では :.2f のようなフォーマット指定子が使えます。
• Jinja2 では "%.2f"|format(score) のように format フィルタを使って同じ結果を出します。

ステップ③：条件分岐の表現

問題

f文字列内で条件式を使っている次のコードを Jinja2 に変換してください。

f"Status: {'OK' if is_ok else 'NG'}"

f"Status: {'OK' if is_ok else 'NG'}"

✅ 解答

Status: {% if is_ok %}OK{% else %}NG{% endif %}

💡 解説

• f文字列では「三項演算子」的に条件を { 'OK' if 条件 else 'NG' } と書けます。
• Jinja2 は制御構文 {% if ... %}{% else %}{% endif %} で表現します。

ステップ④：繰り返し（ループ）

問題

次の Python コードを Jinja2 テンプレートに書き換えてください。

f"Items: {', '.join(items)}"

f"Items: {', '.join(items)}"

✅ 解答

Items: {{ items | join(', ') }}

💡 解説

• f文字列では Python の .join() メソッドを直接使う。
• Jinja2 では join フィルタが同様の働きをします。

ステップ⑤：複合テンプレート（HTML内で使う）

問題

次の HTML を Jinja2 に対応させてください。

html = f"""
<ul>
  {''.join(f"<li>{item}</li>" for item in items)}
</ul>
"""

html = f"""
<ul>
  {''.join(f"<li>{item}</li>" for item in items)}
</ul>
"""

✅ 解答

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

💡 解説

• f文字列での内包表記 {''.join(... for ...)} を
  Jinja2 の {% for %} ブロックで表現。
• {} は変数展開、{% %} は制御文。

まとめ