謎の「 {% … %} 」

Djangoに触れていると、HTMLファイルでみなれない表記を見かけることがあります。

{% load render_bundle from webpack_loader %}

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% render_bundle 'base' 'css' %}
    {% block external_header %}
    {% endblock %}
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    {% block content %}{% endblock %}

    {% render_bundle 'vendor' 'js' %}
    {% render_bundle 'base' 'js' %}

    {% block external_footer %}{% endblock %}
</body>
</html>

この{% ... %}で囲まれたタグは「テンプレートタグ」と呼ばれるもので、ざっくり言うと「この部分で決められた動きをするよ」というものです。

上のコード例だと、django-webpack-loaderが提供するテンプレートタグで、webpackでバンドルしたファイルを読み込んでいます。

テンプレートタグを活用すると、繰り返し処理や条件分岐を扱うことはもちろん、フロントエンドで構築したReactのUIをwebpackでバンドルし、Djangoから読み取るといった連携もできるようになります。