この記事ではDjangoのテンプレートの書き方について解説します。
Djangoのテンプレートは一般的なフレームワークで必要な機能がすべて実装されています。
使いこなすことでウェブサイト作成がとても楽しくなりますので、ぜひ自在に使いこなせるようになってください。
テンプレートとは
テンプレートとは、ウェブページを表示するためのひな形です。
通常ウェブページはHTMLタグとCSS、JavaScriptなどが記述されています。
更新する時はページを編集してアップロードする、というような手間が発生します。
しかし、それでは非効率ですし、一般のウェブ作成に従事していない人はページの更新ができません。
そこでHTMLタグなどでページを作成しておき、所々に変数を埋め込んでおく部分を用意しておいてコンテンツによって表示する内容を変更できるようにしてあります。
これがテンプレートシステムです。Djangoだけでなくさまざまなウェブアプリケーションで同様の機能を持っています。
イメージとしては、ブログシステムを思い浮かべていただければわかりやすいと思います。タイトルや記事の内容は変わりますが、デザインは変わりません。
そういったシステムはタイトルや記事の内容を変更できるようになっているわけです。
これにより、ウェブページを作成できない一般の人でもウェブサイトを更新できるようになりました。
今ではあたりまえの事ですが、そういったシステムを下支えしているのがテンプレートシステムです。
もちろん、Djangoのテンプレートもそうなっています。
本稿ではそういった変数やテンプレートタグなどの紹介をしていきます。
変数
変数はPythonでいうところの変数と同義です。
テンプレートでは変数を表示させることができます。
たとえば、テンプレートにtitleという変数が渡されてきた場合、テンプレートでは{{ title }}と記述して変数の内容を表示することができます。
{{ }}は変数を表示する時の記号です。この記号がないと、アルファベットで文章titleと記述したときと、変数titleを表示する時の区別がつきませんからね。
もし、変数がクラスだった場合はドット記号でインスタンス変数を指定します。
{{ article.title }}と記述すればOKです。Pythonと同じですね。
あるいは、辞書であった場合も同様にドット記号でキーを指定します。
{{ someDict.someKey }}と記述します。クラスの時と同様です。
リストだった場合はどうでしょう。こちらもドット記号です。
{{ articles.3 }}と記述します。ちょっと変な感じです。
最後に、メソッドを呼び出すときもドット記号です。
{{ article.get_title }}と記述します。
というように、ドット記号で記述すればほとんどの場合正常に評価されて表示されます。
もし、表示されない場合は空白が出力されます。
空白ではなく、特定の文字を出力させたい場合は別途設定が必要です。
変数はどこからやってくるのか
テンプレートで変数を表示する方法はわかりました。
では、その変数とやらはどこからやってくるのでしょうか？
答えはViewです。
テンプレートはViewがハブになってページを作成する時に読み込まれるファイルの一つです。
Viewは自身が取得するなどしてデータを保持していますが、そのデータをテンプレートに供給します。
逆の言い方をすれば、View以外にテンプレートにデータを供給するものはいません。
ですから、テンプレートで何かしらのデータを使用したいときは必ずViewでそのデータを取得してテンプレートに供給する必要があります。
テンプレートタグとフィルタ
テンプレートタグ
テンプレートには一般的なHTMLタグの他に、テンプレート独自の機能を適用するためのテンプレートタグというものがあります。
例えば繰り返しをするforやURLを生成するurlなど、たくさんあります。
そういったテンプレートタグとHTMLタグを組み合わせてテンプレートを作成します。
テンプレートタグの例
テンプレートタグの例を示します。
テンプレートタグはたくさんありますのでひとつひとつは別の記事にします。
ここでは前述したforを例として紹介します。
{% for article in articles %}
<p>{{ article }}</p>
{% endfor %}
for自体はpythonのfor文と変わりありません。
テンプレートに渡ってくるリストをひとつづつ取り出して表示します。
フィルタ
他方、フィルタという機能も存在します。
これは、変数の値を調整する機能です。
たとえば、本文の一部だけを一覧表示したいばあい、本文にフィルタを適用して一部分だけを表示させるようにします。
これがフィルタです。
また、基本的にテンプレート内で計算などはできませんが一部フィルタを使用することによって足し算ぐらいは可能です。
計算などはできない
前述していますが、Djangoのテンプレートで表示するデータは基本的にViewから渡されたデータのみです。
テンプレート内部で複雑な計算をしたり、複雑な処理をしたりすることはできません。
あくまでも「表示」を担当するのがテンプレートの仕事です。
他の面倒な事はViewやモデルで実行されるべきです。
計算などはすべて済ませてからテンプレートに値を渡してください。
テンプレートの継承
Djangoのテンプレートはとても強力です。
テンプレートの強力な機能の一つとしてテンプレートの継承があります。
継承とは「ベースになるテンプレートの一部を別のテンプレートで置き換える」機能のことです。
言葉ではよく分からないと思いますので、例を示します。
まずはベースとなるテンプレートです。
ファイル名はbase.htmlとしましょう。
<html>
<head>
<!-- 省略 -->
</head>
<body>
{% block body %}
base.html
{% endblock %}
</body>
</html>
ベースとなるテンプレートにはテンプレートタグblockが記述されています。
これが継承のポイントです。
次に、継承したテンプレートを作成しましょう。
ファイル名はsingle.htmlとしましょう。
{% extends 'base.html' %}
テンプレートタグextendsを使用しています。
これは、テンプレートを継承するときに使用するテンプレートタグです。
実はこれだけで継承できます。ページを確認してみましょう。
single.htmlにはなにも記述していませんが、このようにベースになったテンプレートに記載されているファイル名が表示されています。
これがテンプレートの継承です。
blockタグを組み合わせる
これだけでは何もうれしくないのですが、テンプレートタグblockを使用することでとても便利になります。
single.htmlを編集してみましょう。
{% extends 'base.html' %}
{% block body %}
single.html
{% endblock %}
このように記述します。
ページを確認してみましょう。
今度はsingle.htmlに記述した内容が表示されました。
base.htmlに記述していたテンプレートタグblockを、single.htmlに記述していたテンプレートタグblockが上書きしたのです。
base.htmlとsingle.htmlに記述されているテンプレートタグblockに注目してください。
双方ともに、{% block body %}と記載されています。
テンプレートタグblockの使い方は以下のとおりです。
{% block ブロックの名前 %}
ブロックの名前が同じであれば、継承先のテンプレートの内容で上書きされます。
single.htmlにblockタグを記述する前を思い出してください。
{% extends 'base.tml' %}
上記のみ記述していたときのことです。
そのときはbase.htmlの内容が表示されていました。
つまり、継承先のテンプレートで必要があるときはblockを上書きし、必要なければ継承元の内容が表示されます。
このように、継承先のテンプレートで表示を管理することができるため非常に便利です。
テンプレートの継承はパンくずリストなどページ固有の情報を操作する時に真価を発揮します。
ベースのテンプレートを用意し、各アプリケーションで継承することでコンテンツの内容を変化させることもできます。
一見難しそうですが、使ってみるとても便利ですので上手に使いこなしてください。