【Djangoテンプレート】Web作成前に見て欲しい便利機能をご紹介!
エンジニアになろう!
Django テンプレートの便利な機能ってなに?
WEB作成に苦戦しているようだな!
もっと簡略化できないのかしら…!!
Djangoの超便利機能は活用しておらんのか??
師匠!早く教えてください!!
仕方ないの!
今日は Django テンプレートと、その便利機能を伝授していくかの!
Django テンプレートシステムとは?
Django テンプレートシステムとは、ザックリいうと、Django において HTML を生成する方法の1つです。
マイページ機能を例にすると…
具体的な例として、会員制 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:ビューとテンプレートを連携させたい
もう1つ例を見てみましょう。
今度は、ビューとテンプレートを連携させてみます。
ビューとは、テンプレートに埋め込みたいデータを作成する層です。
今回は以下のような、日記データを表示する 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 テンプレートが用意する組み込み機能を、利用する場合に利用されていますよ!
{% 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> に変換されます。
画面に表示すると以下の通り!
上手く改行ができましたね!
これで改行のわずらわしさが無くなりますね!
Djangoテンプレート言語の便利な機能!
前の章では、「タグ・変数・フィルター」という概念を学びました。
この章では、知っておくと便利なタグとフィルターを、いくつか紹介していきますよ!
ちなみに、この記事に記載のタグ・フィルターは、Django 3.0に従っています。
リストデータの表示に便利な「forタグ」
まず、以下のようなリストの中身を、画面上に表示させたいとしましょう。
values': ['買い物', '部屋の片付け', 'Djangoの勉強']
なお、上記 values 変数は、これ以降の説明でバシバシと利用していきますよ!
さて、このような場合では、values に対して for タグで繰り返し処理を行うのが得策です。
1{% for value in values %}
2<p>
3 {{value}}
4</p>
5{% endfor %}
上記テンプレートを画面に出力すると、下画像のようになります。
for ループの処理は、python の for と同じです。
異なる点といえば、{% endfor %} を利用して、for タグの終了を宣言している点ぐらいですね!
空の場合の処理
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 リストの中身が、
- 空でなければ、そのリストの長さを計算
- 空であれば、別の処理を実行
という形にします。
リストの長さの算出では、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 テンプレート言語について学びました。
まとめると、次のようになります!
- タグ:テンプレート言語の組み込み機能を利用するときに使用
- 変数:テンプレート上でデータを表示させたいときに使用
- フィルター:データに処理を施したり、より簡単にHTMLを生成したいときに使用
テンプレート言語に頼らず、開発者自身がビュー層などでデータ処理を行うことも、もちろんできます。
組み込み機能を積極的に利用しよう!
ただ、そのアプローチを取ると、コード量が増えてしまいますよね…
さらには、コードテストを実施する必要もあるので、余分に開発時間がかかってしまいます。
でも、組み込みで用意されている機能を積極的に利用すれば、開発を楽にスムーズに進めることが可能です。
他にもたくさんの種類がありますので、気になる方は、ぜひ公式ドキュメントを眺めてみてくださいね!
【Django:公式ドキュメント】
https://docs.djangoproject.com/ja/3.0/topics/templates/
こちらの記事もオススメ!
2020.07.17ライトコード的「やってみた!」シリーズ「やってみた!」を集めました!(株)ライトコードが今まで作ってきた「やってみた!」記事を集めてみました!※作成日が新し...
2020.07.30Python 特集実装編※最新記事順Responder + Firestore でモダンかつサーバーレスなブログシステムを作ってみた!P...
さいごの一言
…さて、さっそく爆速実装していきますか!
ライトコードでは、エンジニアを積極採用中!
ライトコードでは、エンジニアを積極採用しています!社長と一杯しながらお話しする機会もご用意しております。そのほかカジュアル面談等もございますので、くわしくは採用情報をご確認ください。
採用情報へ
「好きを仕事にするエンジニア集団」の(株)ライトコードです! ライトコードは、福岡、東京、大阪、名古屋の4拠点で事業展開するIT企業です。 現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。 いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。 システム開発依頼・お見積もり大歓迎! また、現在「WEBエンジニア」「モバイルエンジニア」「営業」「WEBデザイナー」を積極採用中です! インターンや新卒採用も行っております。 以下よりご応募をお待ちしております! https://rightcode.co.jp/recruit
おすすめ記事
immichを知ってほしい
2024.10.31