【Django】テンプレートってなにができる？

Djangoを使い始めると「テンプレート」という言葉や
HTMLに独特な書き方をし始めます。

これはDjangoにはDTL (Django Template Language)という
独特なテンプレートの言語があるため、それを使って
フロントエンドの処理を行うことができるためです。
Djangoのできる処理はバックエンド処理だけではないです。

Django特有のテンプレートの書き方をすれば
HTMLも動的に生成することができます。

今回はそのテンプレートの説明と主な使い方を紹介します。
(DTL が TDL に見えてしまう。ネズミの夢の国・・・)

テンプレートとは何か？

まず、公式サイトを見ると、以下のように書かれています。

テンプレートはコンテキストでレンダリングされます。

Django公式サイト

レンダリング？コンテキスト？よく分かりませんね。

コンテキストは実際のコードでは、”context”と書かれ
HTMLにデータを渡すために”render”の引数に使われますね。

def sample(request):
    context = {'sample':'この文字を引き渡す'}
    return render(request, sample.html, context) #ここにあります。

コンテキストの意味としては
HTMLに渡したいデータの集合と捉えると分かりやすいです。

一方、レンダリングとは、コンテキストデータを
HTMLで表示できるように形を変えることを意味します。

つまり、ベースとなる HTML を作っておき、
変更が必要な部分のみ views.py で作成したデータを
渡して表示する機能をテンプレートは持ちます。

テンプレートの役割４つ

ここからテンプレートの主な役割を４つ紹介します。

テンプレートの役割①変数

変数はコンテキストに含まれる値を出力します。
辞書型のようにキーと値を設定し、
{{キー}}と書くことで同部分に値を表示させます。

例えば、contextに以下のようなキーと値を入れます。

def sample(request):
    context = {'first_name':'John', 'last_name':'Doe'}
    return render(request, sample.html, context) 

My first name is {{ first_name }}.
My last name is {{ last_name }}.

上記のようにviews.pyとHTMLを設定すると出力は以下のようになります。

My first name is John.
My last name is Doe.

これがテンプレートの変数の機能です。

この変数は単体の値だけではなく、
リストや辞書型をコンテキストに入れても出力はできます。

def sample(request):
    test = [[1,2,3],{'first_name':'John', 'last_name':'Doe'}]
    context = {'test':test}
    return render(request, sample.html, context) 

{{ test.0 }}
{{ test.1.first_name }}

#出力結果
[1,2,3]
John

リストの場合は {{ Mylist.0 }} や {{ Mylist.1 }}などの数字を入れます。
辞書型の場合は{{ Mydict.key }} キーを入れることで値を出力します。

テンプレートの役割②タグ

タグは for文や if文などの複数の機能を持ちます。

特徴として{% csrf_token %}のように{% %}に囲まれており
{% csrf_token %}のように1行で機能するタグや
{% for i in List%}~~{% endfor %}のように
複数の行に渡って機能するタグもあります。

よく使うサンプルとしては以下のようなものがあります。
これをテンプレートの継承と言います。

{% extends './base.html' %}
  {% load static %}
  {% block customcss %}
  ~~中略（ここにcssを記載）
  {% endblock customcss %}
  {% block header %}
  ~~中略（ここにheaderを記載）
  {% endblock header %}
  {% block content %}
  ~~中略(ここにcontentを記載)
  {% endblock content %}

これは、ベースとなるHTMLを作成後
そのベースを基に同じようなレイアウト・装飾のページを量産するために
{%block%}〜{%endblock%}の中のみを変更しています。

他にもよく使うとすれば、if文になります。

{% if X == 10 %}
    Number of X : 10
{% elif Y == 10 %}
    Number of Y :10
{% else %}
    X and Y are none.
{% endif %}

この部分のより詳しい解説は後日、記事にします。

テンプレートの役割③フィルター

フィルターは変数を変換します。
使い慣れるまでは違和感がありますが
非常に便利で使いどころが多いです。

書き方としては {{ 変数｜filter }}のように書きます。
簡単なサンプルを書いていきます。

{{ value|add:"5" }}
# value = 10なら、ここには15と出力される。

{{ today|date:"Y/m/d" }}
# todayにdate time.date.today()を入れると、
# 今日の日にち(2021/03/01)が出力される。

この部分の詳細は、後日記載します。

テンプレートの役割④コメント

コメントはHTMLにも存在しますが
Djangoにもコメントがあります。
また、タグの方にもコメントがあります。

このコメントの書き方は１行に対して
タグのコメントは複数行に対して適応できます。

#コメント
{# This is Comment of Template role #}

#タグのコメント
{% comment "note" %}
~~~
~~~
{% endcomment %}

テンプレートを使うためには

最後に、立ち上げたばかりの初期設定のDjangoでは
テンプレートを使用することはできません。

settings.pyの下記の部分を編集して
テンプレートを使えるようにしましょう。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR,'フォルダ名')], #HTMLを入れるフォルダ名を入力
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [# ... some options here ...
            ],
        },
    },
]

settings.pyのTEMPLATES部分です。
‘DIRS’に[os.path.join(BASE_DIR,’フォルダ名’)]を書いて
テンプレートを作用するようにしましょう。

ここの設定は意外と忘れてしまいます。