Django チュートリアルシリーズの続きで、Django のテンプレートについて理解しましょう。
Web アプリケーションを作るには、フロントエンドとバックエンドの両方が必要です。
この両方を混在させると、かなり混乱します。
Django は、 HTML/CSS のフロントエンドのコードをバックエンドのコードと完全に分離しておくための、非常に強力な方法を提供してくれます。
DTL – Django テンプレート言語
Django テンプレートを使えば、フロントエンドの開発者は Python を学ぶ必要がなく、バックエンドのプログラマは HTML を知る必要がありません。
フロントエンドの開発者は、単に HTML のコメント (DB や他の情報を Django から得たい場所) を残すだけでよいのです。
後でプログラマはそれらをテンプレート言語 – Django Templates Language (DTL) として知られている – で置き換えるだけでよいのです。
このように、DTL は HTML ファイルに Django/python コードを埋め込むために使われるテンプレート言語の 1 つです。
DTL は、以下の点で他の言語より優れています。
- 単純さ
- 構文の習得が容易
- 拡張性がある
Django テンプレート言語 (DTL) の基本構文
DTL の構文は Python に似ていて、とても学びやすいものです。
この記事もチェック：Django テンプレート言語 – 初心者のための入門書
1. テンプレートタグ
このテンプレートタグは何かをするものです。
この文章はわかりにくいかもしれませんが、例を見ればなんとなくわかると思いますので、ご安心ください。
注意：テンプレートタグは、{%と%}で囲まれます。
いくつかの例を挙げます。
- 条件文/表示ロジック -> {% if %} … {% endif %} … {% if %}. … {% endif %} * ループ -> {% endif %} …
- ループ -> {% for x in y %} … {% endfor %} … %%. … {% endfor %} * ブロック宣言 -> {% for x in y %} …
- ブロックの宣言 -> {% block content %}. … {% endblock %} * コンテンツのインポート -> {% endblock %} …
- コンテンツのインポート -> {% include “header.html” %}.
- 継承 -> {% extends “base.html” %} …
2. テンプレート変数
テンプレート変数は、pythonで使用される変数に似ています。
注意：使用される構文は {{ と }} です。
いくつかの例を挙げます。
- 単純な変数 -> {{ title }} 。, {{ x }}
- リスト属性 -> {{ fruits_list.0 }} オブジェクトの属性。
- オブジェクト属性 -> {{ name.title }} ※辞書属性
- 辞書属性 -> {{ dict.key }} 。
注：ここでは、Pythonのリストの最初の要素にアクセスするためのlist[0]とは異なり、list.0が使用されています。
3. テンプレート・フィルター
テンプレート・フィルターは、変数／属性のフィルタリングに使用されます。
注：フィルタを示すには、記号｜（パイプ）が使用されます。
いくつかの例を挙げます。
- 大文字と小文字を区別する -> {{ name|title }} or {{ characters|upper_case }} 2.
- リストのフィルタリング/スライス -> {{ list|slice = ” :5 ” }} 。
これは、リストから、最初の5つの要素だけを表示することを意味します。 - 切り捨て -> {{ name|truncatewords : 80 }} 。
これは、名前から、最初の80文字だけを表示する、つまり、名前を最初の80文字に切り詰めることを意味します。 - デフォルト -> {{ value|default =”0″ }} デフォルト値を表示します。
これは、変数valueが空の場合、デフォルト値として0を表示することを意味します。
1. Django テンプレートフォルダを作成する
Django では、フロントエンドのファイルをバックエンドと分けて管理しているため、これらのテキストファイル (主に HTML ファイル) も別のフォルダに保存されます。
'APP_DIRS':True
|
settings.py に行くと、上の図のように TEMPLATES というオプションがあります。
ここで重要なのは APP_DIRS です。
“ <app_name>/<HTML file>”
|
この行が意味するのは、Django は templates というフォルダにあるテンプレート/HTML ファイルを探すということです。
つまり、Django アプリの中に templates フォルダを作り、全ての HTML ファイルをそこに保存しなければなりません。
‘books_website/index.html’
|
2. テンプレートの名前空間化
特定のテンプレートファイルをロードするとき、 Django は settings.py の INSTALLED_APPS にリストされている各アプリを調べます。
これは上から下へ順番に行い、その名前で最初に取得したファイルを読み込みます。
プロジェクトに複数のアプリがあり、また、複数のアプリに同じ名前の2つのHTMLファイルが存在する可能性があります。
例えば、「Books」アプリと「Pens」アプリがあるとします。
どちらもテンプレートフォルダにindex.htmlファイルを持っています。
もし Books アプリの views.py に index.html をインクルードしようとすると、Django は間違った index.html ファイルを読み込んでしまうかもしれません。
これは、先に述べたように、 INSTALLED_APPS リストからファイルの最初のインスタンスをロードするために起こります。
そして、それは問題を引き起こす可能性があります。
これを避けるために、テンプレートフォルダで名前空間を使用します。
どういうことかというと、テンプレートフォルダの中に、アプリ名で別のフォルダを追加するのです。
{% for book in books %}
<li>{{book.title}}</li><br>
{% endfor %}
|
私の場合、アプリの名前は「books ㊙」なので、その名前でテンプレートフォルダをネームスペースします（上のスクリーンショットの通り）。
したがって、views.pyにこのファイルをインクルードするときは、インクルードパスを次のように記述します。
render(request,<html file path>,<context>)
|
つまり、私の場合、以下のようになります。
def BookView(request):
books = BookModel.objects.all()
context = {
'books':books
}
return render(request,'books_website/BookView.html', context)
|
命名規則は必要に応じて変更可能で、アプリ名である必要はありません。
しかし、便宜上アプリ名を使うのが定石です。
この記事もチェック：Djangoでファイルアップロード機能を実装する方法を解説する
3. 基本的なDTLファイルの作成
次に、簡単なテンプレートファイルを作成し、views.pyにインクルードする方法を学びましょう。
templates/books_website フォルダに、bookView.html ファイルを追加します。
'DIRS': [os.path.join(BASE_DIR,'django_project/templates')],
|
このファイルにコードを追加します。
<h2>Hello Viewer</h2>
{% block content %}
<p> PlaceHolder to be Replaced</p>
{% endblock %}
|
{% extends 'basic.html' %}
{% block content %}
{% for book in books %}
<li>{{book.title}}</li><br>
{% endfor %}
{% endblock %}
|
このコードは、本のリストを表示するための一般的なforループなので、自明でしょう。
4. views.pyでのテンプレートのレンダリング
テンプレートファイルにモデル情報を送信する最も効率的な方法は、views.pyのrender関数を使用することです。
<h3>Book Hub</h3>
|
render メソッドはコンテキスト(モデル情報)を受け取り、そのパスを用いてテンプレートに送信し、ブラウザに適切なレスポンスを返します。
views.pyでは、BookViewの中にコードを記述します。
{% extends 'basic.html' %}
{% block content %}
{% include 'books_website/BookViewAdd.html' %}
{% for book in books %}
<li>{{book.title}}</li><br>
{% endfor %}
{% endblock %}
|
ここで
- ModelのデータをBooksに格納しました。
- コンテキストは辞書として作成しました。
- リクエスト、テンプレートパス、コンテキストを引数として受け取り、適切なレスポンスを返す render 関数を呼び出した。
では、サーバを起動してブラウザを確認してみましょう。
5. テンプレートの継承
さて、 BookView.html では小さな HTML スニペットでしたが、実際には HTML ファイルは長いのが普通です。
Web サイトのほとんどの Web ページは、内容に多少の変更があるものの同じものなので、 Django はテンプレート継承というメソッドを提供しています。
これによって、コードを繰り返したり、不必要な冗長性を加えたりする必要を回避できます。
テンプレート継承のもう一つの利点は、コードのメインファイルを変更することで、 UI/HTML の変更がアプリケーション全体に反映されるようにできることです。
そこで、全ページに共通する完全なコードフレームを持つ基本的なHTMLファイルを作成します。
このファイルをアプリの外 (プロジェクト内) のテンプレートフォルダに保存し、全ての Django アプリがアクセスできるようにします。
他のテンプレート内のコードを継承するには、 settings.py の TEMPLATES にこの行を追加してください。
この行はわかりやすいですね。
- あらかじめ定義された変数 BASE_DIR (私たちの Django プロジェクトフォルダ) を使って、Django のベースディレクトリを取得します。
- それから os モジュールを使って、 django_project/templates の行と結合しています。
上のパラグラフをきちんと何度も読んで、私たちが何をしようとしているのかを理解してください。
それでは、すべての Web ページに “Hello Viewer” を追加する、シンプルな basic.html ファイルを作ってみましょう。
このファイルを書くのに使われる構文は次の通りです。
基本ファイルでは、ブロック（私の場合は「content」という名前）を追加し、他のHTMLファイルの読み込み中にエラーが発生した場合に備えて、デフォルトの行を追加しています。
このデフォルトの行は、アプリ内のHTMLファイルにあるコンテンツに置き換えられる。
次に、BookView.htmlファイルを変更して、basic.htmlファイルを取り込んでみましょう。
以下のコードをファイルに記述してください。
- 親ファイル(basic.html)を継承するために、{% extends ‘basic.html’ %} という行を開始時に追加しています。
Basic.html ファイルにあるブロック ( 名前 – 内容 ) を置き換えることを Django に示すため、同じ名前 ( basic.html ファイルで使用したもの ) のブロックを追加しています。
そのブロックの中に、デフォルトの行を置き換えるコードを書きます。
では、サーバを起動してブラウザを確認してみましょう。
6. テンプレートのインクルージョン
継承と同様に、Django テンプレートファイルも他の HTML ファイルにインクルードすることができ ます。
BookViewAdd.html を作って、見出し “Books Hub” を追加し、それを BookView.html にインクルードしてみましょう。
books_website/templates フォルダに BookViewAdd という名前で別の HTML ファイルを作成し、次の行を追加します。
BookView.htmlのブロックコンテンツに、インクルードコードを追加します。
ここでは{% include ‘books_website/BookViewAdd.html’ %}を使用していますが、これは先ほど使用した継承構文と同様です。
では、サーバを起動してブラウザを確認してみましょう。
まとめ
Django テンプレートチュートリアルは以上です! Django のテンプレート機能について、しっかり理解していただけたでしょうか。
また、今回使用した Django テンプレート言語については、公式ドキュメントからさらに詳しく知ることができます。
Django のトピックに関するより高度なチュートリアルにご期待ください!