1. HOME
  2. ブログ
  3. エンジニアになろう!
  4. 【Djangoテンプレート】Web作成前に見て欲しい便利機能をご紹介!
【Djangoテンプレート】Web作成前に見て欲しい便利機能をご紹介!

【Djangoテンプレート】Web作成前に見て欲しい便利機能をご紹介!

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

にゃんこ師匠にゃんこ師匠
お?ミツオカ!
WEB作成に苦戦しているようだな!
ミツオカミツオカ
Webページで、何度も何度も同じ記述を書くのが面倒なんですうう!!
もっと簡略化できないのかしら…!!
にゃんこ師匠にゃんこ師匠
まさかミツオカ…
Djangoの超便利機能は活用しておらんのか??
ミツオカミツオカ
え…?なにそれ!?超便利機能??
師匠!早く教えてください!!
にゃんこ師匠にゃんこ師匠
(威圧的じゃ…)
仕方ないの!
今日は Django テンプレートと、その便利機能を伝授していくかの!

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

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

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

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

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

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

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

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

Django テンプレート言語

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

手順

まずは、ビューを定義して、テンプレートに埋め込みたいデータを作成します。

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

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

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

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

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

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

にゃんこ師匠にゃんこ師匠
どうじゃ?簡単に、動的なデータが埋め込まれたぞい!
ミツオカミツオカ
こんなに短い便利な記述があったなんて!
師匠!他の超便利機能も早く教えてください!
にゃんこ師匠にゃんこ師匠
うむ!次はDjangoテンプレート言語の基礎概念を教えよう!

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

タグ

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

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

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

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

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

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

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

変数

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

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

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

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

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

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

フィルター

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

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

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

フィルター

inebreaksbr

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

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

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

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

上手く改行ができましたね!

にゃんこ師匠にゃんこ師匠
これで、改行コードを <br> に変換するロジックを、わざわざ開発者が作る必要がなくなるのじゃ!
ミツオカミツオカ
超便利~~~!!
これで改行のわずらわしさが無くなりますね!
にゃんこ師匠にゃんこ師匠
フフフ…これからがDjangoテンプレート便利機能の本番じゃ!

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

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

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

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

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

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

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

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

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

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

for ループの処理は、python の for と同じです。

異なる点といえば、 {% endfor %} を利用して、for タグの終了を宣言している点ぐらいですね!

空の場合の処理

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

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

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

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

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

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

という形にします。

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

確認

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

unordered_listフィルター

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

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

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

確認

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

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

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

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

確認

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

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

にゃんこ師匠にゃんこ師匠
これで普通に書くより、圧倒的に楽になるのは間違いなしじゃ!
ミツオカミツオカ
簡単なステップだけで、だいぶシンプルに扱えちゃいました!!
こんな便利機能があるなんて、私って知れてラッキ~!
にゃんこ師匠にゃんこ師匠
もう期限が直っとっる…
分かりやすいやつじゃのう(笑)

さいごに

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

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

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

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

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

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

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

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

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

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

記事を書いた人

\ 3度のメシより技術が好き /
(株)ライトコードは、WEB・アプリ・ゲーム開発に強い「好きを仕事にするエンジニア集団」です。
システム開発依頼・お見積もりはこちらまでお願いします。
また、WEB・スマホ系エンジニアを積極採用中です!
※現在、多数のお問合せを頂いており、返信に、多少お時間を頂く場合がございます。

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

さいごの一言

にゃんこ師匠にゃんこ師匠
どうじゃった?Django テンプレートの便利機能の話を聞いて!
ミツオカミツオカ
私の今までの労力は、一体なんだったのでしょう…
にゃんこ師匠にゃんこ師匠
知れた事をポジティブに捉えて、これからトライあるのみじゃ!
ミツオカミツオカ
かぁあああ!!
…さて、さっそく爆速実装していきますか!
にゃんこ師匠にゃんこ師匠
(ミツオカはDjango テンプレートのように単純じゃな…)

書いた人はこんな人

ライトコード社員ブログ
ライトコード社員ブログ
「好きなことを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡本社、東京オフィスの2拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もりは大歓迎!
また、WEBエンジニアとモバイルエンジニアも積極採用中です!

ご応募をお待ちしております!

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア