2.

Django テンプレート完全ガイド — 構文 / 継承 / カスタムタグ

編集
この記事の要点
  • Django テンプレートは HTML の中に 変数 {{ var }}タグ {% ... %}フィルタ {{ var|filter }} を埋め込むテンプレート言語
  • ファイルは app/templates/app/index.html に配置。render(request, "app/index.html", context) で呼ぶ
  • 継承: {% extends "base.html" %} + {% block content %}{% endblock %} で共通レイアウト
  • 制御: {% if %} / {% for %} / {% url "name" %} / {% include "_partial.html" %} / {% static "path" %}
  • カスタムタグ/フィルタは templatetags/ 配下に作成し {% load %} で読み込む

Django テンプレートとは

Django テンプレートは、HTML と テンプレート構文を混在させて、動的な HTML を組み立てる仕組みです。プログラマでなくてもデザイナが触れるよう、Python の構文ではなく独自の DSL を採用しています。

配置と呼び出し

myapp/
├── views.py
├── models.py
└── templates/
    └── myapp/
        ├── base.html
        ├── index.html
        └── detail.html
# myapp/views.py
from django.shortcuts import render

def index(request):
    context = {
        "title": "記事一覧",
        "articles": Article.objects.all(),
        "user_name": "taro",
    }
    return render(request, "myapp/index.html", context)

変数・フィルタ・タグの 3 構文

{# 1. 変数 #}

{{ title }}

こんにちは、{{ user_name }} さん

{# 2. フィルタ #}

{{ name|upper }}

{# 大文字 #}

{{ body|truncatechars:50 }}

{# 50 文字で切る #}

{{ price|floatformat:2 }}

{# 小数 2 桁 #}

{{ created_at|date:"Y-m-d H:i" }}

{# 日付フォーマット #}

{{ html|safe }}

{# エスケープ無効 (安全な場合のみ) #}

{{ var|default:"未設定" }}

{# null/空のときの代替値 #} {# 3. タグ #} {% if articles %}
    {% for a in articles %}
  • {{ a.title }}
  • {% endfor %}
{% else %}

記事はありません

{% endif %}

主要フィルタ一覧

フィルタ用途
upper / lower大文字/小文字{{ s|upper }}
title各単語の頭文字を大文字{{ s|title }}
length長さ{{ list|length }}
truncatechars:NN 文字で切る{{ s|truncatechars:50 }}
date:"Y-m-d"日付フォーマット{{ dt|date:"Y-m-d" }}
floatformat:N小数点 N 桁{{ p|floatformat:2 }}
default:"-"null/空時の代替{{ v|default:"-" }}
safeHTML エスケープを無効化{{ html|safe }}
escapeHTML エスケープ{{ s|escape }}
linebreaks改行を
/

{{ s|linebreaks }}
add:N加算{{ n|add:1 }}
join:","配列を結合{{ list|join:"," }}

主要タグ一覧

{# for ループ #}
{% for a in articles %}
  {{ forloop.counter }}: {{ a.title }}
{% empty %}
  記事なし
{% endfor %}

{# if #}
{% if user.is_authenticated %}
  ようこそ {{ user.username }} さん
{% elif user.is_anonymous %}
  ゲストです
{% else %}
  不明
{% endif %}

{# URL 逆引き #}
詳細

{# static ファイル #}
{% load static %}

ロゴ

{# パーシャル取り込み #}
{% include "myapp/_card.html" with article=a %}

{# コメント #}
{# 一行コメント #}
{% comment %}
ブロックコメント
複数行
{% endcomment %}

{# CSRF トークン (フォーム必須) #}
{% csrf_token %} ...
{# 変数定義 #} {% with total=cart.items|length %} カート: {{ total }} 件 {% endwith %}

テンプレート継承 (extends + block)

レイアウト共通化の必須テクニックです。

{# templates/base.html #}



  
  {% block title %}サイト名{% endblock %}
  {% load static %}
  
  {% block extra_css %}{% endblock %}


  
{% include "_nav.html" %}
{% block content %}{% endblock %}
© 2026
{% block extra_js %}{% endblock %}
{# templates/myapp/index.html #}
{% extends "base.html" %}
{% load static %}

{% block title %}記事一覧 | {{ block.super }}{% endblock %}

{% block extra_css %}
  
{% endblock %}

{% block content %}
  

記事一覧

{% endblock %}

カスタムタグ / カスタムフィルタ

# myapp/templatetags/myfilters.py
from django import template
register = template.Library()

@register.filter
def yen(value):
    """1234 → ¥1,234"""
    return f"¥{value:,}"

@register.simple_tag
def current_year():
    from datetime import date
    return date.today().year

@register.inclusion_tag("myapp/_card.html")
def article_card(article):
    return {"article": article}
{# 利用側 #}
{% load myfilters %}

{{ price|yen }}

{# ¥1,234 #}

© {% current_year %} 会社名

{% article_card a %}

セキュリティ — エスケープ

Django テンプレートはデフォルトで HTML エスケープします:

{# context: {"user_input": ""} #}

{{ user_input }}
{# → <script>alert(1)</script> に変換され安全 #}

{{ user_input|safe }}
{# → そのまま 

Post Share
子ページ
  1. Templateの使用準備
  2. Template の定義方法
  3. テンプレートの作成と共通化
  4. setting.pyにおけるテンプレートの設定
  5. テンプレートの名前の重複について
  6. 静的ファイルの読み込み
  7. if文
  8. テンプレートで定数を使用する方法
  9. aタグのhrefの記載方法
同階層のページ
  1. ビュー(View)
  2. テンプレート(Template)
  3. モデル(Model)
  4. ルーティングの作成
  5. viewからtemplateへの遷移方法