Djangoのテンプレートを初めて触ったとき、普通のHTMLよりも少しオブジェクト指向的な考え方が必要で、理解するまで少し時間がかかりました。
変数を埋め込むだけならまだしも、テンプレート継承やタグ・フィルタといった仕組みが加わると、「このHTMLはどこから来ているのか」を追うのに慣れが必要でした。
この記事では、テンプレートの基本から、継承の仕組み、静的ファイルの管理方法までを解説します。
ビューの基本がまだの方は、先にこちらを読んでおくとつながりがわかりやすいです。
Djangoテンプレートの基本
ビューから渡されたデータをHTMLに埋め込むには、{{ }}を使います。
<!-- articles/detail.html -->
<h1>{{ article.title }}</h1>
<p>{{ article.body }}</p>条件分岐やループには{% %}タグを使います。
<ul>
{% for article in articles %}
<li>{{ article.title }}</li>
{% empty %}
<li>記事がありません</li>
{% endfor %}
</ul>{% empty %}は、ループ対象が0件だったときに表示される特別な分岐です。件数チェックを別に書かなくていいので地味に便利です。
テンプレート継承の仕組み
ヘッダーやフッターなど、全ページ共通の部分を毎回書くのは非効率です。Djangoではテンプレート継承で、共通レイアウトを1つのファイルにまとめられます。
<!-- base.html -->
<html>
<body>
<header>共通ヘッダー</header>
{% block content %}{% endblock %}
<footer>共通フッター</footer>
</body>
</html><!-- articles/detail.html -->
{% extends "base.html" %}
{% block content %}
<h1>{{ article.title }}</h1>
<p>{{ article.body }}</p>
{% endblock %}{% extends %}で親テンプレートを指定し、{% block %}で「ここを子テンプレートの内容に差し替える」という穴を開けておく。この2つがセットで、「共通部分は1箇所、ページ固有の部分だけ書く」という構造が成り立ちます。
静的ファイル（CSS・JS・画像）を管理する
CSSやJavaScript、画像は静的ファイル（static files）として扱います。テンプレート内で参照するには、まず先頭で{% load static %}を読み込みます。
{% load static %}
<link rel="stylesheet" href="{% static 'css/style.css' %}">
<img src="{% static 'images/logo.png' %}" alt="logo">パスを直接書かずに{% static %}タグを通す理由は、本番環境でファイルの配信元が変わっても（CDNに置くなど）、テンプレート側を書き換えずに済むからです。
正直、最近はあまり出番がない
ここまで基本を解説しましたが、正直に言うと、最近はNext.jsなどでフロントエンドを組むことが多く、Djangoのテンプレート機能に触れる機会自体が減っています。
管理画面や社内ツールのような、凝ったフロントが不要な場面ではまだ十分現役です。ただ、フロントを別で作る構成が前提なら、無理に今すぐ深く学ばなくても、必要になったタイミングで後回しにして問題ないと思います。
まとめ
Djangoのテンプレートは、変数埋め込み・タグ・継承の3つを押さえれば基本形は書けるようになります。静的ファイルは{% static %}タグを通すのが基本です。
フロントをNext.js等で別に組む場合は優先度を下げても構いません。管理画面や社内ツールを素早く作りたいときに知っておくと役立ちます。
Django全体のロードマップに戻りたい方はこちらからどうぞ。
コメント