テンプレートを使う

Django を構成する 3 つの要素は、モデル、ビュー、テンプレートです。この節では、テンプレートの使い方を説明します。

前の節では、show_hello という関数を定義し、「Hello, world!」という文字列を返すようにしました。

accounts/views.py

from django.http import HttpResponse
 
def show_hello(request):
    return HttpResponse("Hello, World!")

このように、関数の中で文字列を返すと、その文字列がブラウザに表示されます。同様にして HTML を返すと、その HTML がブラウザに表示されます。 HTML を返すには、文字列の中に HTML を書きます。

accounts/views.py

from django.http import HttpResponse
 
def show_hello(request):
    return HttpResponse("<h1>Hello, World!</h1>")

しかし、すべてのページで HTML を文字列として Python のコードに書くのは大変です。視認性が悪くなりメンテナンスが大変になりますし、何より HTML を Python のファイルの中に書かなければいけないので IDE（統合開発環境）による補完といった便利な機能が使えません。

そこで Django では、HTML を別のファイルに書き、それを読み込んで返すようにします。この HTML を書いたファイルのことを「テンプレート」と呼びます。

このドキュメントでは、HTML と CSS についての説明は省略します。 HTML と CSS については、他のドキュメントを参照してください。 mdn web docs (opens in a new tab) は、Web 開発について網羅的に説明していておすすめです。

テンプレートを作る

今、ディレクトリの構成は次のようになっているはずです。

db.sqlite3

manage.py

poetry.lock

pyproject.toml

このうち、templates というディレクトリの中にテンプレートを作っていきます。

これは、settings.py の中に書かれている TEMPLATES という設定によって決まっています。

mysite/settings.py

TEMPLATES = [
    {
        "BACKEND": "django.template.backends.django.DjangoTemplates",
        "DIRS": [BASE_DIR, "templates"],
        ...
    },
]

まずは、templates/base.html というファイルを作ります。

templates/base.html

<!doctype html>
<html lang="ja">
    <head>
        <meta charset="UTF-8" />
        <title>{% block title %}{% endblock %}</title>
    </head>
    <body>
        {% block content %}{% endblock %}
    </body>
</html>

HTML に馴染みのある人にとっては、この HTML はなんの変哲もないものに見えるかもしれません。

しかし、この HTML には Django のテンプレート言語というものが使われています。

{% block title %}{% endblock %} というのは、テンプレートの中に別のテンプレートを埋め込むためのものです。この {% block title %}{% endblock %} という部分を「ブロック」と呼びます。

このブロックの中には別のテンプレートを埋め込むことができ、このようにして動的な HTML を作ることができます。

なおこのプロジェクトでは、base.html はその名の通り、他のテンプレートの土台となるテンプレートとして位置付けています。

次に、templates/accounts/hello.html というファイルを作ります。

templates/accounts/hello.html

{% extends "base.html" %} {% block title %}Hello, World!{% endblock %} {% block
content %}
<h1>Hello, World!</h1>
{% endblock %}

このテンプレートは、base.html を継承しています。 {% extends "base.html" %} というのは、base.html を継承するという意味です。これにより、base.html に記述した各ブロックに対応する部分を埋め込むことができます。

{% block title %}Hello, World!{% endblock %} というのは、base.html の title というブロックを埋め込むという意味です。 {% block content %}...{% endblock %} というのは、base.html の content というブロックを埋め込むという意味です。

このようにして、base.html に記述した HTML の一部を、別のテンプレートから埋め込むことができます。