本文へスキップ
BecomeCoder

Djangoコース · 第3章 テンプレート · レッスン11

条件と繰り返し ― {% if %} と {% for %}

ブラウザで完結

導入

一覧ページでは「商品を全部並べる」、ログイン状態では「名前を出す/出さない」を切り替えたい。テンプレートには、{% %} で書くタグという制御構文があります。

説明

{{ }} が「値の表示」なのに対し、{% %} は「ロジック(繰り返し・条件)」です。

import django
from django.conf import settings
if not settings.configured:
    settings.configure(DEBUG=True, SECRET_KEY="dev",
        TEMPLATES=[{"BACKEND": "django.template.backends.django.DjangoTemplates",
                    "DIRS": [], "APP_DIRS": False, "OPTIONS": {}}])
    django.setup()

from django.template import Template, Context

tpl = Template("""
{% if user %}<p>ようこそ {{ user }} さん</p>{% else %}<p>ゲストさん</p>{% endif %}
<ul>
{% for item in items %}
  <li>{{ forloop.counter }}: {{ item }}</li>
{% endfor %}
</ul>
""")

html = tpl.render(Context({"user": "Aki", "items": ["りんご", "みかん", "ぶどう"]}))
print(html)
  • {% if user %} ... {% else %} ... {% endif %}条件分岐。必ず {% endif %} で閉じます。
  • {% for item in items %} ... {% endfor %} … 繰り返し。リストの各要素が item に入ります。
  • {{ forloop.counter }} … ループの回数(1から始まる番号)。テンプレートが自動で用意してくれる便利な変数です。

Python と違い、テンプレートではインデントではなく {% end... %} でブロックの終わりを示します。

やってみよう

Contextitems に要素を足したり、user を空文字 "" にしたりして実行し、{% for %}{% if %} の出力の変化を確かめましょう(user="" のときは「ゲストさん」になります)。

演習

items に渡した数字のリスト [10, 20, 30]{% for %} で1行ずつ表示してください。テンプレートに {% for n in items %}<p>{{ n }}</p>{% endfor %} を書き、Context({"items": [10, 20, 30]}) を渡します。

ヒント1を見る

{% for n in items %}...{% endfor %} で囲み、中で {{ n }} を表示します。

ヒント2を見る

{% endfor %} を書き忘れるとエラーになります。

実際に動かしてみよう

本文のサンプルや演習のコードは、コードブロック右上の「コピー」ボタンでコピーして、下のエディタに貼り付ければそのまま実行できます。

Python — ライブラリ付きで実行(Pyodide)

numpy / pandas / matplotlib が使える本物のPython(Pyodide)を読み込みます。初回のみ読み込みに少し時間がかかります(以降はブラウザにキャッシュされます)。
スクロールして表示された時点でも自動で読み込まれます。