よく使う機能とシンタックスの早見表
1. 変数 (Variables) 🎯
Pythonのビューから渡されたコンテキスト変数をテンプレートに表示します。ドット (`.`) を使って属性、辞書キー、リストインデックス、メソッド呼び出しにアクセスできます。
目的 | シンタックス | 説明 | 例 (ビューコンテキスト: `{‘name’: ‘Alice’, ‘profile’: {‘age’: 30}, ‘items’: [‘apple’, ‘banana’], ‘greet’: lambda: ‘Hello!’}`) |
---|---|---|---|
基本的な表示 | {{ variable_name }} |
変数 `variable_name` の値をそのまま表示します。HTMLエスケープが自動的に適用されます。 |
出力: Alice
|
属性アクセス | {{ variable.attribute }} |
オブジェクトの属性にアクセスします。 |
(request オブジェクトがコンテキストにある場合)
|
辞書アクセス | {{ dictionary.key }} |
辞書のキーを使って値にアクセスします。キーが文字列の場合に使用します。 |
出力: 30
|
リスト/タプルアクセス | {{ list.index }} |
リストやタプルのインデックスを使って要素にアクセスします。インデックスは0から始まります。 |
出力: apple
|
メソッド呼び出し | {{ object.method }} |
引数を取らないメソッドを呼び出し、その戻り値を表示します。注意: 引数付きのメソッド呼び出しはできません。 |
出力: Hello!
(リストの `count` メソッドは呼び出せません。代わりに `length` フィルタを使います: `{{ items|length }}`)
|
2. テンプレートタグ (Template Tags) ⚙️
テンプレートのレンダリングプロセスで特別な処理を実行するためのタグです。 {% tag %} ... {% endtag %}
のように使います。
2.1 制御構文
タグ | シンタックス | 説明 | 例 |
---|---|---|---|
if / elif / else |
|
条件分岐を行います。and , or , not , == , != , < , > , <= , >= , in , not in などの演算子が利用可能です。elif と else は任意です。 |
|
for |
|
リストやイテラブルオブジェクトを反復処理します。ループ内で `forloop` 変数を使ってループの状態を取得できます。 |
|
for ... empty |
|
for タグと似ていますが、反復対象のリストやイテラブルが空の場合に {% empty %} ブロックの内容が表示されます。 |
|
cycle |
{% cycle 'odd' 'even' %} |
ループ内で呼び出されるたびに、引数として与えられた値を順番に返します。CSSクラスの交互適用などによく使われます。 |
|
firstof |
{% firstof var1 var2 var3 "fallback" %} |
与えられた引数のうち、最初に見つかった真(Trueと評価される、空でない)の値を表示します。すべて偽の場合は最後の引数(指定があれば)を表示します。変数が存在しない場合も偽として扱われます。 |
|
2.2 読み込み・継承 🏗️
タグ | シンタックス | 説明 | 例 |
---|---|---|---|
extends |
{% extends "base.html" %} {% extends variable_name %} |
テンプレートの継承を宣言します。このタグはテンプレートファイルの最初に記述する必要があります。親テンプレートを指定し、そのテンプレートのブロックを上書きします。 |
|
block |
{% block block_name %} ... {% endblock block_name %} |
子テンプレートが上書きできるブロックを定義します。親テンプレートで定義し、子テンプレートで同名のブロックを定義して内容を置き換えます。`{{ block.super }}` を使うと、親テンプレートのブロック内容を挿入できます。 |
|
include |
{% include "partial.html" %} {% include template_name with context_var="value" only %} |
他のテンプレートファイルを読み込み、その内容をレンダリングします。`with` を使うと、読み込むテンプレートに特定の変数を渡せます。`only` をつけると、現在のコンテキストを引き継がず、`with` で指定した変数のみを渡します。 |
|
load |
{% load static %} {% load humanize %} {% load my_custom_tags %} |
カスタムテンプレートタグやフィルタ、または `static` などの組み込みタグライブラリを読み込みます。通常、テンプレートの上部(`extends` の後)で宣言します。 |
|
2.3 URL生成 🔗
タグ | シンタックス | 説明 | 例 (urls.py: `path(‘articles/<int:year>/<slug:slug>/’, views.article_detail, name=’article-detail’)`) |
---|---|---|---|
url |
{% url 'url_name' arg1 arg2 ... kwarg1=value1 ... %} {% url 'url_name' ... as variable_name %} |
`urls.py` で定義されたURLパターン名(`name`引数)から、対応するURLパスを逆引き(リバース解決)して生成します。引数やキーワード引数を渡すことも可能です。 `as` を使うと、生成したURLを変数に格納できます。 |
|
2.4 静的ファイル 🖼️
`settings.STATIC_URL` を使って静的ファイル(CSS, JavaScript, 画像など)へのURLを生成します。事前に {% load static %}
が必要です。
タグ | シンタックス | 説明 | 例 (settings.STATIC_URL = ‘/static/’) |
---|---|---|---|
static |
{% static 'path/to/file.css' %} {% static path_variable %} {% static 'path/to/file.js' as js_url %} |
指定された相対パスに対応する静的ファイルの完全なURLを生成します。`as` を使うとURLを変数に格納できます。 |
出力例: /static/css/style.css , /static/images/banner.jpg , /static/app/script.js
|
get_static_prefix |
{% get_static_prefix %} {% get_static_prefix as STATIC_PREFIX %} |
`settings.STATIC_URL` の値を取得します(例: `/static/`)。 `as` を使うと変数に格納できます。静的ファイルのURLを動的に組み立てる際に便利です。 |
出力例: `/static/`
|
get_media_prefix |
{% get_media_prefix %} {% get_media_prefix as MEDIA_PREFIX %} |
`settings.MEDIA_URL` の値を取得します(例: `/media/`)。ユーザーがアップロードしたファイルなど、メディアファイルへのURLを生成する際に使います。`{% load static %}` が必要です。 |
出力例: `/media/`
|
2.5 その他 💡
タグ | シンタックス | 説明 | 例 |
---|---|---|---|
comment |
{% comment "Optional note" %} ... {% endcomment %} |
複数行のコメントを記述します。このブロック内の内容はレンダリングされません。 |
|
csrf_token |
{% csrf_token %} |
クロスサイトリクエストフォージェリ (CSRF) 保護のための隠しフォームフィールドを生成します。POSTメソッドを使用するフォーム内には必ず含める必要があります。 |
|
debug |
{% debug %} |
現在のコンテキスト情報(変数など)とインポートされたモジュールに関するデバッグ情報を出力します。`settings.DEBUG` が `True` の場合にのみ機能します。 |
|
filter |
{% filter force_escape|lower %} ... {% endfilter %} |
ブロック内のテキストに一つ以上のフィルタを適用します。 |
出力: This text will be converted.
|
now |
{% now "Y年m月d日 H:i" %} |
指定されたフォーマット文字列に従って現在の日付と時刻を表示します。フォーマットは `date` フィルタと同じ形式です。 |
出力例: `現在の時刻: 2025/04/03午前08:16` (実行時刻に依存)
|
regroup |
{% regroup list by attribute as grouped_list %} |
リスト内の要素を、指定された属性の値に基づいてグループ化します。ループ処理と組み合わせて使われることが多いです。 |
|
spaceless |
{% spaceless %} ... {% endspaceless %} |
ブロック内のHTMLタグ間の空白文字(改行、タブ、スペース)を削除します。タグ内の空白やテキストノード内の空白は削除されません。 |
出力: <p><a href="#">Link</a></p>
|
templatetag |
{% templatetag openblock %} {% templatetag closeblock %} {% templatetag openvariable %} {% templatetag closevariable %} {% templatetag openbrace %} {% templatetag closebrace %} {% templatetag opencomment %} {% templatetag closecomment %} |
Djangoテンプレートタグの構文自体を出力します。例えば、 `{%` を表示したい場合に `{% templatetag openblock %}` を使います。 |
出力: `テンプレートタグの開始は {% 、 変数の開始は {{ です。`
|
verbatim |
{% verbatim %} ... {% endverbatim %} |
ブロック内のテキストをテンプレートエンジンが解釈しないようにします。JavaScriptテンプレートなど、Djangoテンプレートと似た構文をそのまま記述したい場合に便利です。 |
|
widthratio |
{% widthratio current_value max_value max_width %} |
現在の値と最大値の比率を計算し、指定された最大幅に基づいて幅を計算します。プログレスバーなどで使用されます。結果は整数に丸められます。 |
(completed_tasks=10 , total_tasks=20 の場合、出力は `50`)
|
with |
{% with complex_expression as alias %} ... {% endwith %} |
複雑な変数や式の評価結果を、一時的な変数名(エイリアス)に割り当てます。ブロック内でそのエイリアスを使用できます。パフォーマンス向上やコードの可読性向上に役立ちます。 |
|
3. テンプレートフィルタ (Template Filters) ✨
変数の表示形式を変更するためのフィルタです。 {{ variable|filter_name }}
や {{ variable|filter_name:"argument" }}
のようにパイプ (`|`) を使って適用します。複数のフィルタを連結することも可能です(例: {{ variable|filter1|filter2 }}
)。
3.1 文字列操作 📝
フィルタ | シンタックス | 説明 | 例 (入力値: `O’Malley & Sons`) |
---|---|---|---|
addslashes |
{{ value|addslashes }} |
引用符(シングル、ダブル)、バックスラッシュの前にバックスラッシュを追加します。JavaScript文字列内での利用に便利です。 | O\'Malley & Sons |
capfirst |
{{ value|capfirst }} |
文字列の最初の文字を大文字にします。 | O'Malley & sons |
center |
{{ value|center:"15" }} |
指定された幅の中で文字列を中央揃えします。 | (幅15で) O'Malley & Sons |
cut |
{{ value|cut:" " }} |
文字列から指定された部分文字列(引数)をすべて削除します。 | (引数” “) O'Malley&Sons |
escape / force_escape |
{{ value|escape }} {{ value|force_escape }} |
HTMLの特殊文字 (`<`, `>`, `’`, `”`, `&`) をHTMLエンティティに変換します。自動エスケープが有効な場合は通常不要ですが、明示的に行いたい場合や、自動エスケープが無効な場合に使用します。`force_escape`は自動エスケープの状態に関わらず常にエスケープします。 | O'Malley & Sons |
floatformat |
{{ value|floatformat }} {{ value|floatformat:2 }} {{ value|floatformat:"-3" }} |
浮動小数点数を指定した小数点以下の桁数で丸めてフォーマットします。引数なしの場合、通常は1桁(ただし .0 の場合は整数)。正の引数は指定桁数。負の引数は指定桁数(ただし .0 の場合は整数)。 | (値: 34.23234 ) {{ value|floatformat }} -> 34.2 {{ value|floatformat:2 }} -> 34.23 {{ value|floatformat:"-3" }} -> 34.232 (値: 34.000 ){{ value|floatformat }} -> 34 {{ value|floatformat:"-3" }} -> 34 |
iriencode |
{{ value|iriencode }} |
URLパス部分での使用に適した形式にIRI(Internationalized Resource Identifier)をエンコードします。 | (値: /test?a=1&b=ø ) /test?a=1&b=%C3%B8 |
length / length_is |
{{ value|length }} {{ value|length_is:"N" }} |
`length`: 文字列やリストの長さを返します。 `length_is`: 長さが指定した値(N)と等しい場合に `True` を返します。 |
{{ "abc"|length }} -> 3 {{ mylist|length_is:"3" }} -> True or False |
linebreaks / linebreaksbr |
{{ value|linebreaks }} {{ value|linebreaksbr }} |
`linebreaks`: プレーンテキストの改行をHTMLの ` ` タグや ` |
(値: 第一段落\n第二段落 )linebreaks : <p>第一段落</p><p>第二段落</p> linebreaksbr : 第一段落<br>第二段落 |
linenumbers |
{{ value|linenumbers }} |
テキストの各行に行番号を付けます。 | (値: line 1\nline 2 ) 1. line 1 |
ljust |
{{ value|ljust:"15" }} |
指定された幅の中で文字列を左揃えします。 | (幅15で) O'Malley & Sons |
lower |
{{ value|lower }} |
文字列をすべて小文字に変換します。 | o'malley & sons |
make_list |
{{ value|make_list }} |
文字列を文字のリストに変換します。数値の場合は各桁を文字列にしたリストに変換します。 | {{ "abc"|make_list }} -> `[‘a’, ‘b’, ‘c’]`{{ 123|make_list }} -> `[‘1’, ‘2’, ‘3’]` |
phone2numeric |
{{ value|phone2numeric }} |
電話番号に含まれる文字(例: `1-800-COLLECT`)を対応する数字に変換します。 | 1-800-COLLECT -> 1-800-2655328 |
pluralize |
{{ value|pluralize }} {{ value|pluralize:"es" }} {{ value|pluralize:"y,ies" }} |
数値が1でない場合に、単語の複数形接尾辞(デフォルトは “s”)を追加します。引数で接尾辞を指定したり、単数形と複数形の接尾辞をカンマ区切りで指定できます。 | (値: 1 ) 1 vote{{ 1|pluralize }} -> 1 vote (値: 2 ) 2 vote{{ 2|pluralize }} -> 2 votes (値: 1 ) 1 class{{ 1|pluralize:"es" }} -> 1 class (値: 2 ) 2 class{{ 2|pluralize:"es" }} -> 2 classes (値: 1 ) 1 category{{ 1|pluralize:"y,ies" }} -> 1 category (値: 2 ) 2 category{{ 2|pluralize:"y,ies" }} -> 2 categories |
rjust |
{{ value|rjust:"15" }} |
指定された幅の中で文字列を右揃えします。 | (幅15で) O'Malley & Sons |
safe / safeseq |
{{ value|safe }} {{ list_of_safe_strings|safeseq|join:", " }} |
`safe`: 文字列をHTMLエスケープしないようにマークします。信頼できないソースからのデータには絶対に使用しないでください。XSS脆弱性の原因となります。 `safeseq`: シーケンス(リストなど)内の各要素を `safe` としてマークします。 |
(値: `<b>Bold</b>`){{ value }} -> <b>Bold</b> {{ value|safe }} -> Bold |
slice |
{{ value|slice:":3" }} {{ value|slice:"1:4" }} {{ value|slice:"-2:" }} |
Pythonのスライス構文と同様に、リストや文字列の一部を切り出します。 | (値: `[‘a’, ‘b’, ‘c’, ‘d’]`){{ value|slice:":2" }} -> `[‘a’, ‘b’]`{{ value|slice:"1:-1" }} -> `[‘b’, ‘c’]` |
slugify |
{{ value|slugify }} |
文字列をスラグ(URLに適した形式)に変換します。空白をハイフンに、英数字とハイフン以外の文字を削除し、小文字に変換します。 | o-malley-sons |
stringformat |
{{ value|stringformat:"03d" }} {{ value|stringformat:".2f" }} |
Pythonの古い `%` 演算子形式の文字列フォーマットを適用します。 | (値: 5 ) {{ value|stringformat:"03d" }} -> 005 (値: 12.345 ) {{ value|stringformat:".2f" }} -> 12.35 |
striptags |
{{ value|striptags }} |
文字列からすべてのHTML/XMLタグを取り除きます。 | (値: <b>Text</b> & More ) Text & More |
title |
{{ value|title }} |
文字列をタイトルケース(各単語の先頭を大文字、残りを小文字)に変換します。アポストロフィを含む単語も考慮されます。 | O'malley & Sons |
truncatechars / truncatechars_html |
{{ value|truncatechars:9 }} {{ value|truncatechars_html:15 }} |
`truncatechars`: 文字列を指定した文字数で切り詰め、末尾に省略記号(…)を追加します。 `truncatechars_html`: HTMLタグを考慮して切り詰めます。タグは文字数にカウントされず、途中で閉じられたタグは適切に閉じられます。 |
(値: 非常に長い文字列です ){{ value|truncatechars:5 }} -> 非常に長... (値: <p>Some <strong>bold</strong> text.</p> ){{ value|truncatechars_html:12 }} -> <p>Some <strong>bo...</strong></p> |
truncatewords / truncatewords_html |
{{ value|truncatewords:2 }} {{ value|truncatewords_html:3 }} |
`truncatewords`: 文字列を指定した単語数で切り詰め、末尾に省略記号(…)を追加します。 `truncatewords_html`: HTMLタグを考慮して単語数で切り詰めます。 |
(値: This is a sample text. ){{ value|truncatewords:3 }} -> This is a ... (値: <p>One <em>two</em> three four.</p> ){{ value|truncatewords_html:2 }} -> <p>One <em>two...</em></p> |
upper |
{{ value|upper }} |
文字列をすべて大文字に変換します。 | O'MALLEY & SONS |
urlencode |
{{ value|urlencode }} |
文字列をURLクエリパラメータの値として使えるようにパーセントエンコーディングします。 | (値: a=1&b= / ) a%3D1%26b%3D+%2F |
urlize / urlizetrunc |
{{ value|urlize }} {{ value|urlizetrunc:20 }} |
プレーンテキスト中のURLやメールアドレスを検出し、クリック可能なHTMLリンク (`<a>` タグ) に変換します。`urlizetrunc` は表示されるリンクテキストを指定した文字数で切り詰めます。 | (値: Check out django.com )urlize : Check out <a href="http://django.com" rel="nofollow">django.com</a> urlizetrunc:10 : Check out <a href="http://django.com" rel="nofollow">django.c...</a> |
wordcount |
{{ value|wordcount }} |
文字列中の単語数を返します。 | (値: This has four words. ) 4 |
wordwrap |
{{ value|wordwrap:10 }} |
指定した文字数でテキストを折り返します(改行を挿入します)。 | (値: This is a long sentence. ){{ value|wordwrap:8 }} -> This is |
3.2 日付・時刻 📅
日付や時刻オブジェクト(Pythonの `datetime.date`, `datetime.datetime` など)のフォーマットや相対時間の表示に使います。
フィルタ | シンタックス | 説明 | 例 (入力値: `datetime.datetime(2025, 4, 3, 10, 30, 0)`) |
---|---|---|---|
date |
{{ value|date:"Y/m/d" }} {{ value|date:"D, M j, Y" }} {{ value|date }} |
日付を指定されたフォーマットで表示します。フォーマット文字はPHPの `date()` 関数に似ています (例: `Y`, `m`, `d`, `H`, `i`, `s`)。引数なしの場合は `settings.DATE_FORMAT` を使用します。 | {{ my_date|date:"Y-m-d" }} -> 2025-04-03 {{ my_date|date:"M. j, Y" }} -> Apr. 3, 2025 {{ my_date|date:"c" }} -> ISO 8601形式 |
time |
{{ value|time:"H:i" }} {{ value|time }} |
時刻を指定されたフォーマットで表示します。引数なしの場合は `settings.TIME_FORMAT` を使用します。 | {{ my_datetime|time:"H:i:s" }} -> 10:30:00 {{ my_datetime|time:"P" }} -> `午前` or `午後` (ロケール依存) |
timesince / timeuntil |
{{ value|timesince }} {{ value|timesince:other_date }} {{ value|timeuntil }} {{ value|timeuntil:other_date }} |
`timesince`: 指定された日時から現在までの経過時間を人間が読みやすい形式で表示します (例: “2時間前”, “3日”)。オプションで比較対象の日時を指定できます。 `timeuntil`: 現在から指定された日時までの残り時間を表示します。 |
(現在が 2025/4/3 12:30 の場合){{ my_datetime|timesince }} -> 2時間 (未来の日時 `future_date`) {{ future_date|timeuntil }} -> 1週間, 2日 |
timezone |
{% load tz %} {{ value|timezone:"Asia/Tokyo" }} {% timezone "Europe/Paris" %} ... {% endtimezone %} |
`settings.USE_TZ` が `True` の場合、awareな `datetime` オブジェクトを指定したタイムゾーンに変換して表示します。フィルタとして使うか、ブロックタグとして使うことができます。`{% load tz %}` が必要です。 |
|
3.3 リスト・辞書操作 📚
フィルタ | シンタックス | 説明 | 例 |
---|---|---|---|
dictsort / dictsortreversed |
{{ list_of_dicts|dictsort:"key_name" }} {{ list_of_dicts|dictsortreversed:"key_name" }} |
辞書のリストを、指定したキーの値でソート(または逆順ソート)します。 | (入力: `[{‘name’: ‘Bob’, ‘age’: 25}, {‘name’: ‘Alice’, ‘age’: 30}]`)dictsort:"name" -> `[{‘name’: ‘Alice’, ‘age’: 30}, {‘name’: ‘Bob’, ‘age’: 25}]`dictsortreversed:"age" -> `[{‘name’: ‘Alice’, ‘age’: 30}, {‘name’: ‘Bob’, ‘age’: 25}]` |
first / last |
{{ list|first }} {{ list|last }} |
リストの最初の要素または最後の要素を返します。リストが空の場合は空文字列を返します。 | (入力: `[‘a’, ‘b’, ‘c’]`)first -> a last -> c |
join |
{{ list|join:", " }} |
リストの要素を、指定した区切り文字(引数)で連結した文字列を返します。 | (入力: `[‘a’, ‘b’, ‘c’]`){{ value|join:"-" }} -> a-b-c |
random |
{{ list|random }} |
リストからランダムに要素を1つ選択して返します。 | (入力: `[‘apple’, ‘banana’, ‘cherry’]`) 結果は実行ごとに変わります (例: `banana`) |
unordered_list |
{{ list_of_items|unordered_list }} |
与えられたリスト(ネストも可)をHTMLの非順序リスト (`<ul>`/`<li>`) としてフォーマットします。自動エスケープは適用されないため、リストの内容が安全であることが前提です。 | (入力: `[‘Item 1’, [‘Sub 1’, ‘Sub 2’], ‘Item 3’]`)
|
3.4 数値 🔢
フィルタ | シンタックス | 説明 | 例 |
---|---|---|---|
add |
{{ value|add:"2" }} |
値に引数を加算します。数値だけでなく、文字列やリストの連結にも使えますが、型が混在する場合は注意が必要です(通常は数値に変換しようとします)。 | {{ 5|add:"3" }} -> 8 {{ "abc"|add:"def" }} -> abcdef {{ mylist|add:another_list }} -> 連結されたリスト |
get_digit |
{{ value|get_digit:"1" }} {{ value|get_digit:"-1" }} |
数値から指定した桁(1から始まるインデックス、負数は末尾から)の数字を取得します。指定した桁が存在しない場合は元の値を返します。 | (値: 12345 ){{ value|get_digit:"1" }} -> 1 {{ value|get_digit:"3" }} -> 3 {{ value|get_digit:"-1" }} -> 5 {{ value|get_digit:"6" }} -> 12345 |
3.5 その他 💡
フィルタ | シンタックス | 説明 | 例 |
---|---|---|---|
default / default_if_none |
{{ value|default:"N/A" }} {{ value|default_if_none:"-" }} |
`default`: 変数が偽(False, 空文字列, 空リスト, 0 など)の場合に、指定したデフォルト値を表示します。 `default_if_none`: 変数が `None` の場合にのみ、指定したデフォルト値を表示します。偽ではあるが `None` でない値(例: `0` や `[]`)はそのまま表示されます。 |
(値: `””`) {{ value|default:"未設定" }} -> 未設定 (値: `0`) {{ value|default:"ゼロ" }} -> ゼロ (値: `None`) {{ value|default_if_none:"データなし" }} -> データなし (値: `0`) {{ value|default_if_none:"データなし" }} -> 0 |
divisibleby |
{{ value|divisibleby:"3" }} |
値が指定した引数で割り切れる場合に `True` を返します。 | {{ 9|divisibleby:"3" }} -> True {{ 10|divisibleby:"3" }} -> False |
filesizeformat |
{{ value|filesizeformat }} |
数値(バイト単位)を人間が読みやすいファイルサイズ形式(例: “1 KB”, “1.5 MB”, “2 GB”)に変換します。 | {{ 1024|filesizeformat }} -> 1.0 KB {{ 1536000|filesizeformat }} -> 1.5 MB |
json_script |
{{ value|json_script:"element_id" }} |
Pythonの変数(辞書やリストなど)をJSON形式に変換し、指定したIDを持つHTMLの ` |
コメント