Djangoテンプレートタグ全25種を徹底解説|サンプルコード付

Django

(最終更新月:2022年2月)

✔このような方へ向けて書かれた記事となります

「Djangoのテンプレートタグって何?」

「テンプレートタグは何ができるの?」

「テンプレートタグの種類、概要が知りたい!」

✔当記事を通じてお伝えすること

  • Djangoテンプレートタグとは?
  • Djangoのテンプレートタグ一覧 25選
  • 【26種の具体例】サンプルコード

【著者プロフィール】

profile_icon
【Python歴】11年 x 【Django歴】10年
HP作成、社内システムの構築、コンサルティング

当ブログを通じて、Webアプリの書き方やアプリの公開方法までを解説しています。

☆日報アプリ「D-Repo」(デモ版)→こちら

※Djangoをベースに作成したアプリです。

☆便利ツールアプリ「Tool Station」→こちら

※Django REST frameworkとReactで作成しているアプリです。

✔月9,800円でWebデザインが学べる

デザナルは、Webデザインに苦手意識がある方におすすめのサブスク型スクールです。

特徴は以下の通り。

  • 初期費用不要
  • 教材が使い放題
  • 案件で収入も得られる

デザナルは稼ぎながら学べる、格安のWebデザインスクールです。

>>詳細はこちら<<

安いWebデザインスクール「デザナル」を徹底分析

Djangoテンプレートタグとは?

Djangoのテンプレートを使うメリットの一つは、通常のHTMLとは違い、テンプレート上で一定のプログラミングのコードが記述でき、処理する機能がつけられることにあります。

その処理する機能を埋め込むために、「テンプレートタグ」が使われます。

つまり、テンプレートタグを使うことによって、HTMLテンプレート上で、if文やfor文などプログラミング文が記述できるようになります。

書き方としては、{% タグ名 %}というように、「{%」「%}」に囲まれているのが特徴です。

例として、if文は下記のように記述します。

{% if 条件 %}
    行いたい処理
{% endif %

公式サイトによるとifやfor文以外にも、テンプレートタグの種類は全部で25種類(2022年2月時点)です。

次章で全てを紹介しますので、何ができるのかを頭に入れておきましょう。

Djangoのテンプレートタグ一覧 25選

タグ名と簡単な説明をまとめています。

タグ名をクリックすると、次章のサンプルコードをご覧になれます。

タグ名説明
autoescapeon、offによりタグブロック内の自動エスケープを有効・無効にします。
blockテンプレートの継承後に書き換える部分を指定します。
comment<!–コメントアウト–>と同様の役割です。
csrf_tokenPOSTメソッドでフォームを送信する際に指定します。
cycle引数や文字列が順番に出力されます。for文などで使われるケースが多いです。
debugエラーの際などのデバックが表示されます。DEBUG=Falseの場合は何も出力されません。
extends親テンプレートを拡張することを宣言します。
filterタグブロック内のコンテンツを指定したフィルタに通します。
firstof複数の値を引数として渡します。その中で最初に「True」が返る値を表示します。
forforループをテンプレート上で作成します。
for … emptyemptyタグでは、forループの対象が空の時に表示する内容を指定できます。
ifテンプレート上で条件分岐を行います。
ifchangedforループ内で使われ、前回のループ実行時から値が変化しているかを調べます。
include他テンプレートを読み込みます。
loadstaticなどのテンプレートタグセットを読み込みます。
loremランダムなラテン語テキストを表示させます。
now現在の日付や時刻を表示します。
regroup既存のオブジェクトリストから、新たなリストをオブジェクトグループを再構築します。
resetcyclecycleブロック内で使用することで、cycleの最初の値へ強制的に戻ります。
spacelessブロック内のHTMLタグ間のスペースを除去します。タブや改行も同様に除去されます。
templatetagテンプレートタグで使用されている文字を、通常の文字として出力する時に使います。
urlurls.pyで指定した「name」から、実際のURLを返します。
verbatimJavaScriptテンプレートの文法がDjangoと衝突してしまう時に使われます。
widthratio指定した値と最大値との比を計算し、定数に欠けた値を返します。
withブロック内で使用できる変数を宣言します。

【25種の具体例】サンプルコード

autoescape

【views.py】

from django.shortcuts import render

def myapp_list_view(request):
    html_string = "<p style='color:red;'>red font</p>"
    ctx = {"want_to_escape": html_string}
    return render(request, "myapp/myapp_list.html", ctx)

【autoescapeが「on」の時】

{% autoescape on %}{{ want_to_escape }}{% endautoescape %}

ブラウザでの表示↓

【autoescapeが「off」の時】

{% autoescape off %}{{ want_to_escape }}{% endautoescape %}

ブラウザでの表示↓

block 

{% block %}{% endblock %}

comment

{% comment %}コメントアウトしたい文字列{% endcomment %}

csrf_token

<form method="POST">{% csrf_token %}
    ....
</form>

cycle

【views.py】

from django.shortcuts import render

def myapp_list_view(request):
    ctx = {}
    ctx["object_list"] = ["python", "javascript", "html", "css"]
    return render(request, "myapp/myapp_list.html", ctx)
{% for obj in object_list %}
    <div style="color: {% cycle 'green' 'blue' %};">{{obj}}</div>
{% endfor %}

ブラウザでの表示↓

debug

{% debug %}

extends

{% extends 'base.html' %}

filter

全て大文字に変換する「upper」フィルタを使う例です。

{% filter upper %}
i like to study python and django
{% endfilter %}

ブラウザでの表示↓

firstof 

テンプレートへ渡されているコンテキストが下記のとおりとします。

ctx = {
    "first_variable": "",
    "second_variable": "",
    "third_variable": "firstofのテスト"
}

HTMLテンプレート上で下記のように記述します。

{% firstof first_variable second_variable third_variable "Nothing is stored" %}

ブラウザでの表示↓

下記と同様の内容になります。

{% if first_variable %}
  {{ first_variable }}
{% elif second_variable %}
  {{ second_variable }}
{% elif third_variable %}
  {{ third_variable }}
{% else %}
  Nothing is stored.
{% endif %}

for

{% for obj in object_list %}
    {{ obj }}
{% endfor %}

for…empty

{% for obj in object_list %}
    {{ obj }}
{% empty %}
    リストは空です。
{% endfor %}

if

{% if 条件1 %}
  ...
{% elif 条件2 %}
  ...
{% else %}
  ...
{% endif %}

ifchanged

{% for obj in object_list %}
  {% ifchanged obj.date %}日付が変わりました{% endifchanged %}
{% endfor %}

include

{% include 'myapp/another_template.html" %}

load

{% load static %}

lorem

{% lorem %}

now

{% now "Y F" %}

regroup

仮に下記のリストがコンテキストで渡されているとします。

people = [
    {"name": "ダルビッシュ", "age": "35", "league": "USA"},
    {"name": "大谷", "age": "27", "league": "USA"},
    {"name": "前田", "age": "33", "league": "USA"},
    {"name": "柳田", "age": "33", "league": "Japan"},
    {"name": "山田", "age": "29", "league": "Japan"},
    {"name": "森", "age": "26", "league": "Japan"},
]

regroupタグを使います。

    {% regroup people by league as players %}
    {% for player in players %}
        <h2>{{ player.grouper}}</h2>
        {% for p in player.list %}
            <div>{{ p.name }}: {{p.age}}</div>
        {% endfor %}
        <hr />
    {% endfor %}

ブラウザでの表示↓

regroupタグの構成は下記の通りです。

{% regroup 元のリスト by 基準にしたいキー名 as 新たなリスト名 %}

resetcycle

こちらは公式サイトからの抜粋になります。
https://docs.djangoproject.com/ja/4.0/ref/templates/builtins/#resetcycle

{% for coach in coach_list %}
    <h1>{{ coach.name }}</h1>
    {% for athlete in coach.athlete_set.all %}
        <p class="{% cycle 'odd' 'even' %}">{{ athlete.name }}</p>
    {% endfor %}
    {% resetcycle %}
{% endfor %}

spaceless

{% spaceless %}
<div>
    <div>
        Test Sentence
    </div>
</div>
{% endspaceless %}

templatetag

テンプレート上でコンテキストを使う場合は {% templatetag openvariable %} から始めましょう。

url

「index」はurls.pyで指定されたページ名です。

{% url 'index' %}

verbatim

こちらは公式サイトからの抜粋になります。
https://docs.djangoproject.com/ja/4.0/ref/templates/builtins/#verbatim

{% verbatim %}
    {{if dying}}Still alive.{{/if}}
{% endverbatim %}

widthratio

こちらは公式サイトからの抜粋になります。
https://docs.djangoproject.com/ja/4.0/ref/templates/builtins/#widthratio

<img src="bar.png" alt="Bar" height="10" width="{% widthratio this_value max_value max_width %}">

with

{% with num=10 %}
    {{ num }}
{% endwith %}

まとめ

当記事の内容をまとめます。

Djangoテンプレートでは、テンプレートタグを使うことによって、if文やfor文などプログラミング文が記述できるようになります。

2022年現在でのテンプレートタグは全部で25種類です。

もう一度見てみたい方はこちらから一覧表へ戻れます。

改めて見てみると「こんなこともできるんだ!」と驚いた方も多いはずです。

是非必要な度に見返して、皆さんのWebアプリ開発のお役に立てれば幸いです。

当記事をご覧の方の中にも「そろそろウェブでアプリを公開してみたいなぁ」「どうやって公開するの?」という方もいらっしゃるのではないでしょうか?
下記の通り、別記事ではDjangoアプリの公開方法公開までの準備についての解説をしていますのでご覧ください!

「Webアプリを公開したい!」という方へ

【保存版】Apache WebサーバーでDjangoアプリを公開
Djangoが公開できる月500円~のレンタルサーバー
【初心者向け】ムームードメインで独自ドメインを取得する3ステップ
【実体験】マイIPの使い方を解説|固定IPアドレスを取得・設定する

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

「Djangoでのアプリ開発を学びたい!」
「Djangoで開発したアプリをWebで公開するにはどうするの?」

という方は必見です!

【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

タイトルとURLをコピーしました