【Django】テンプレートタグとは・概要および利用方法|PythonによるWebアプリ開発#5

当ページには広告が含まれています。

こんにちは、DXCEL WAVEの運営者(@dxcelwave)です!

この記事は、Djangoフレームワークを活用するテンプレートタグの機能概要を詳しく知りたい方向けです。代表的なテンプレートタグの機能概要と実際のコーディング方法をご説明します。

目次

テンプレートとは

テンプレートとは、ウェブページの表示内容・操作性を管理するために用いられるページデータです。詳しくは以下の記事で紹介しておりますため、ご参照ください。

テンプレートタグ とは {% %}

Djangoのテンプレート中で{{% %}]と記載されるタグは、テンプレートタグと呼ばれるものです。以下テンプレートタグの中でも特に利用頻度の高いものをご紹介します。

URL:  {% url ‘名前’ %}

指定した名前のURLが書き出されます。画面遷移の定義づけやフォームタグを読み込む際によく利用されるテンプレートタグになります。

簡単な例として、DjangoでURLを管理するurls.pyにて、下記のようpathを設定した場合を考えます。

urlpatterns = [path(' ', views.Home, name='Homepage'),]

上記name=’Homepage’と設定したのがテンプレートタグ内の名前を示しており、この場合urlタグは、以下のように記載できます。

{% url 'Homepage' %}

ファイル読込:  {% load %}

テンプレートにて静的ファイル等用いる場合、ファイルを読み込むタグを実行する必要があります。例えば、staticフォルダにあるスタイルシート(css)を読み込む際、以下のようにコードを実行します。

{% load static %}

実際のスタイルシートの読み込みは、上記に加えてlinkタグとhref属性を用いることで可能となります。以下コードの例を記載します。

{% load static %}
<link rel="stylesheet" href='{% static "css/style.css" %}'/>

href属性を用いたパスの指定では、テンプレートタグを用いてスタイルシート(css)が格納されているディレクトリを記載するようにしましょう。

 CSRF 対策: {% csrf_token %}

CSRF(Cross Site Request Forgeries)対策に用いられるテンプレートタグを意味します。CSRFとは「外部から自社サイトへ大量のフォーム送信を行う攻撃」に該当します。

{% csrf_token %}

上記のように記載することで、CSFR対策を行なっているわけです。Djangoでフォームを作成した際は、必ずこのテンプレートタグを記載するようにしましょう。

ループ処理: {% for %} 〜 {% endfor %}

配列の各要素をループ処理し、指定の要素を変数として返します。

{% for item in item_list %}
    <li> {{ item.name }} </li>
    <li> {{ item.mail }} </li>
{% endfor %}

上記の例だと、「item_list」という配列をループ処理し、指定された要素に該当する「name」と「mail」を変数として取り出す操作を行なっています。

条件分岐: {% if %} 〜 {% endif %}

条件分岐を記載する際に用いるテンプレートタグです。例えば、以下のように記載できます。

{% if x == 0 %}
    <li> x=0です </li>
{% elif x==1 %}
    <li> x=1です </li>
{% else %}
    <li> x=0,1以外です </li>
{% endif %}

この例では、変数xの値に応じてテンプレート上にリストが表示されます。

本記事ではDjangoで用いられるテンプレートタグの中でも、特に利用頻度の高いものを紹介しました。実際には他にも沢山のテンプレートタグが用意されています。まずは代表的なものの使い方をマスターし、利用用途に応じて多様なテンプレートタグを活用してみると良いでしょう!

【参考】Djangoの解説記事一覧

最後までご覧いただきありがとうございました。当サイトではDjangoフレームワークを用いた解説記事を多数取り扱っております。次のように体系的に整理しておりますため学習にお役立て下さい。

Django学習に最適!

当サイトが運営するDjango記事一覧

【参考】Pythonでできること・お仕事探し

最後に

この記事が気に入ったら
フォローしてね!

本記事をシェア!
目次