本文へスキップ
BecomeCoder

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

テンプレートとは ― 変数を埋め込む

ブラウザで完結

導入

「こんにちは、○○さん」の○○だけを差し替えたい。テンプレートは、変わらない部分(HTML)と変わる部分({{ 変数 }})を分けて書ける仕組みです。

説明

Django のテンプレートは、{{ 名前 }} という書き方で変数埋め込みます。テンプレート文字列Template(...)、流し込むデータを Context({...}) にして render します。

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

# テンプレート(HTMLの雛形)。{{ }} が差し込みたい場所。
tpl = Template("<h1>こんにちは、{{ name }}さん</h1><p>年齢: {{ age }}</p>")

# データを Context に入れて render すると、穴が埋まった HTML が返る
html = tpl.render(Context({"name": "Aki", "age": 20}))
print(html)
  • {{ name }}Context に渡した name の値に置き換わります。
  • 実際のプロジェクトでは、この雛形は .html ファイルとして分けて置き、ビューから render(request, "ページ.html", {...}) の形で使います(レッスン14で解説)。ここではテンプレート言語そのものに集中するため、文字列で書いています。

やってみよう

Context({...})nameage の値を変えて実行し、出力 HTML の該当箇所が変わることを確かめましょう。Context に無いキーを {{ }} で書くと、その部分は空文字になります(エラーにはなりません)。

演習

テンプレートを <p>{{ product }} は {{ price }} 円です</p> に変え、Contextproduct="りんご"price=150 を渡して、りんご は 150 円です を含む HTML を表示してください。

ヒント1を見る

Template("<p>{{ product }} は {{ price }} 円です</p>")

ヒント2を見る

tpl.render(Context({"product": "りんご", "price": 150}))

実際に動かしてみよう

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

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

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