Django テンプレートの便利な機能ってなに？

にゃんこ師匠

お？ミツオカ！
WEB作成に苦戦しているようだな！

ミツオカ

Webページで、何度も何度も同じ記述を書くのが面倒なんですうう！！
もっと簡略化できないのかしら…！！

にゃんこ師匠

まさかミツオカ…
Djangoの超便利機能は活用しておらんのか？？

ミツオカ

え…？なにそれ！？超便利機能？？
師匠！早く教えてください！！

にゃんこ師匠

（威圧的じゃ…）
仕方ないの！
今日は Django テンプレートと、その便利機能を伝授していくかの！

Django テンプレートシステムとは？

Django テンプレートシステムとは、ザックリいうと、Django において HTML を生成する方法の１つです。

マイページ機能を例にすると…

具体的な例として、会員制 Web サービスでよく見られる、「マイページ」機能を考えてみましょう！

ユーザーによらず、全体的な画面レイアウトは同じになります。

でも、「名前・年齢・性別」といった情報は、ログインするユーザーごとに異なるものですよね…

このように、「常時変更のない静的な部分」と「状況によって変更が起こる動的な部分」が、HTML では混ざっているのです。

この「状況によって変更が起こる動的な部分」について、動的コンテンツを埋め込む仕組みが、Django テンプレートシステムとなるわけですね！

Django テンプレート言語

ちなみに、テンプレートを定義するときは、「Django テンプレート言語」を使います。

この言語を用いることで、少ないコード量で、動的コンテンツの埋め込みができるんですよ。

今回は、Django における HTML 作成で必須の技術、Django テンプレート言語を紹介していきたいと思います！

Djangoテンプレート言語の例を見てみよう！

分かりやすい例として、現在の日付を表示する HTML を、Django テンプレート言語を使って作成してみます。

例1：画面上に今日の日付を出したい

例えば以下のように、画面上に今日の日付を出したい場合を考えてみましょう！

「日付」は、そのページを見るタイミングに応じて変わる、動的なコンテンツですね。

この日付の表示は、Django テンプレート言語を利用すると、以下のような記述でテンプレート（＝ HTML ファイル）に埋め込むことができます。

1<p>
2    こんにちは！
3</p>
4<p>
5    今日は {% now "Y年m月d日" %} です
6</p>

{% now "Y年m月d日" %} が、Django テンプレート言語によって、現在の日付が埋め込まれる部分。

{%  %}  という表現がポイントです。

詳しくは、次の章で説明していきます！

例2：ビューとテンプレートを連携させたい

もう１つ例を見てみましょう。

今度は、ビューとテンプレートを連携させてみます。

ビューとは、テンプレートに埋め込みたいデータを作成する層です。

今回は以下のような、日記データを表示する HTML を、作成してみましょう！

1class DiaryGetView(TemplateView):
2    template_name = 'diary_get.html'
3
4    def get(self, request, **kwargs):
5        
6        # 通常の開発では下記のようにテンプレートに埋め込みたいデータをハードコーディングしません。
7        # APIを経由してcontextに埋め込むデータをデータベースから取得します。
8        context= {
9            'created_at': '2020/10/05',
10            'title': '今日の学習内容',
11            'text': 'Djangoのテンプレートについて学んだ。'
12        }
13        return self.render_to_response(context)

template_name = 'diary_get.html' と return self.render_to_response(context) というコードに注目してみましょう！

diary_get.html というテンプレートの内部で、context という、辞書型のデータを利用できるようにしています。

画面に対応するテンプレートは、以下のような感じとなります。

1<p>
2    {{created_at}}
3</p>
4<p>
5    タイトル：
6</p>
7<p>
8    {{title}}
9</p>
10<p>
11    本文：
12</p>
13<p>
14    {{text}}
15</p>

created_at とtitle 、text には、ビューで作成された context 辞書の値が、それぞれ埋め込まれます。

ここでは、{{  }} という表現が登場していますね！

Django では、中括弧で表現されるコードを利用して、動的コンテンツの埋め込みを行います。

にゃんこ師匠

どうじゃ？簡単に、動的なデータが埋め込まれたぞい！

ミツオカ

こんなに短い便利な記述があったなんて！
師匠！他の超便利機能も早く教えてください！

にゃんこ師匠

うむ！次はDjangoテンプレート言語の基礎概念を教えよう！

Djangoテンプレート言語の基礎概念「タグ・変数・フィルター」

タグ

前の章では、「{%  %} 」と「{{  }}」という中括弧表現が登場しましたね。

Django において、{%  %} という表現がタグになります。

ちなみにタグは、Django テンプレートが用意する組み込み機能を、利用する場合に利用されていますよ！

{% now "Y年m月d日" %} では、現在時刻を表示する、「now タグ」を利用しています。

ちなみに、「Y 年 m 月 d 日」は、now タグが持つパラメータで、現在時刻の出力フォーマットを渡している部分。

またタグは、now のように値を動的に表示するだけでなく、プログラミング言語のような if や for の機能も備えているんです。

次の章では、その他のタグの機能についても、学んでいきましょう！

変数

もう1つの中括弧表現、{{  }}は、変数と呼ばれます。

こちらは、テンプレートが参照することのできるデータを、変数名を通して表示する場合に利用します。

前の章では、ビューから渡された context 辞書内のデータを表示していましたね。

ですが他にも、ログイン中のユーザー情報を参照して、ユーザー名を表示させることもできちゃいます！

変数は、単にデータを表示させるだけではありません。

フィルターという機能を併用することで、データ操作能力が格段にアップするんですよ！

フィルター

では、フィルターについても見てきましょう！

例えば以下のように、text という変数に改行コード「 \n 」が含まれていたとします。

1context = {
2    'created_at': '2020/10/05',
3    'title': '今日の学習内容',
4    'text': 'Djangoのテンプレートについて学んだ。\n画面作りが効率化しそう！'
5}

変数タグ {{text}} を利用して画面に表示すると、以下のようになります。

inebreaksbr

でも、改行コードは、無視されていますね…

ここで、{{text}} に「inebreaksbr」というフィルター機能を追加しましょう！

1<p>
2    {{text|linebreaksbr}}
3</p>

linebreaksbr を使うと、改行コードが HTML の <br> に変換されます。

画面に表示すると以下の通り！

にゃんこ師匠

これで、改行コードを <br> に変換するロジックを、わざわざ開発者が作る必要がなくなるのじゃ！

ミツオカ

超便利～～～！！
これで改行のわずらわしさが無くなりますね！

にゃんこ師匠

フフフ…これからがDjangoテンプレート便利機能の本番じゃ！

Djangoテンプレート言語の便利な機能！

前の章では、「タグ・変数・フィルター」という概念を学びました。

この章では、知っておくと便利なタグとフィルターを、いくつか紹介していきますよ！

ちなみに、この記事に記載のタグ・フィルターは、Django 3.0に従っています。

リストデータの表示に便利な「forタグ」

まず、以下のようなリストの中身を、画面上に表示させたいとしましょう。

values': ['買い物', '部屋の片付け', 'Djangoの勉強']

なお、上記 values 変数は、これ以降の説明でバシバシと利用していきますよ！

さて、このような場合では、values に対して for タグで繰り返し処理を行うのが得策です。

1{% for value in values %}
2<p>
3    {{value}}
4</p>
5{% endfor %}

上記テンプレートを画面に出力すると、下画像のようになります。

for タグと {% empty %} タグを併用すると、繰り返しで利用するリストが、空の場合の処理を記述できます。

1<h2>今日の予定</h2>
2{% for value in values %}
3<p>{{ task }}</p>
4{% empty %}
5<p>今日の予定はありません</p>
6{% endfor %}

values を空にした場合には、下画像のような画面出力となります。

条件分岐を発生させる「ifタグ」

if タグを利用すれば、テンプレート上で「もしデータが〇〇だったら〜〜する」といった条件分岐を行うこともできます。

下記の例では、values リストの中身が、

1. 空でなければ、そのリストの長さを計算
2. 空であれば、別の処理を実行

という形にします。

リストの長さの算出では、length フィルターを利用しましょう！

1{% if values %}
2    {{values|length}}件数のタスクが未完了です！
3{% else %}
4    未完了のタスクはありません！
5{% endif %}

確認

上記テンプレートを values に対して出力させると、次のようになります。

unordered_listフィルター

先ほど、for ループを利用して、values リストの中身を画面上に表示しました。

ただ、箇条書き（HTML の unordered list）を作成したい場合には、for タグを利用する必要はありません。

unordered_list フィルターを利用すれば、わずか1行で完成します！

1{{values|unordered_list}}

確認

この辺りを知っておくと、かなり楽ができますね！

urlの表示に便利な「urlizeフィルター」

以下のような、リンクを表す文字列があったとします。

1'url': 'https://www.example.com'

このデータを、画面上でリンクとして機能させるためには、以下のように <a> タグで囲む方法が考えられます。

1<a>
2    url：{{url}}
3</a>

実はこのリンク作成も、urlize フィルターを利用することで、簡単に実装できちゃいます。

1url：{{url|urlize}}

これを記述するだけで、テンプレートシステムが、<a> に自動変換してくれるわけですね！

にゃんこ師匠

これで普通に書くより、圧倒的に楽になるのは間違いなしじゃ！

ミツオカ

簡単なステップだけで、だいぶシンプルに扱えちゃいました！！
こんな便利機能があるなんて、私って知れてラッキ～！

にゃんこ師匠

もう期限が直っとっる…
分かりやすいやつじゃのう（笑）

さいごに

今回は、Django テンプレート言語について学びました。

まとめると、次のようになります！

1. タグ：テンプレート言語の組み込み機能を利用するときに使用
2. 変数：テンプレート上でデータを表示させたいときに使用
3. フィルター：データに処理を施したり、より簡単にHTMLを生成したいときに使用

テンプレート言語に頼らず、開発者自身がビュー層などでデータ処理を行うことも、もちろんできます。

組み込み機能を積極的に利用しよう！

ただ、そのアプローチを取ると、コード量が増えてしまいますよね…

さらには、コードテストを実施する必要もあるので、余分に開発時間がかかってしまいます。

でも、組み込みで用意されている機能を積極的に利用すれば、開発を楽にスムーズに進めることが可能です。

他にもたくさんの種類がありますので、気になる方は、ぜひ公式ドキュメントを眺めてみてくださいね！

【Django：公式ドキュメント】
https://docs.djangoproject.com/ja/3.0/topics/templates/

こちらの記事もオススメ！

2020.07.17ライトコード的「やってみた！」シリーズ「やってみた！」を集めました！（株）ライトコードが今まで作ってきた「やってみた！」記事を集めてみました！※作成日が新し...

2020.07.30Python 特集実装編※最新記事順Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた！P...

さいごの一言

にゃんこ師匠

どうじゃった？Django テンプレートの便利機能の話を聞いて！

ミツオカ

私の今までの労力は、一体なんだったのでしょう…

にゃんこ師匠

知れた事をポジティブに捉えて、これからトライあるのみじゃ！

ミツオカ

かぁあああ！！
…さて、さっそく爆速実装していきますか！

にゃんこ師匠

（ミツオカはDjango テンプレートのように単純じゃな…）