【Django入門】templateとHTMLを使ってWebページを表示しよう

今回は、PythonのDjangoで使われるtemplateの書き方、使い方について解説します。Djangoで使われるMTVモデルでも重要な部分を担うtemplateについて、学習していきましょう。

この記事では、

MTVモデルとは何か
templateとは何か
templateの使い方
templateの応用

を通して、より実践的な使い方を学んでいきましょう。

この記事の目次

1 MTVモデルとは
- 1.1 templateとは
2 templateを作る準備
3 templateの作り方
4 templateを使いこなそう
5 まとめ

MTVモデルとは

今回学ぶtemplateの前に、まずはMTVモデルと呼ばれる設計思想について学んでいきましょう。DjangoはMTVモデルを採用しています。

MTVとは、

Model（データベースに格納されているデータ）
Template（テンプレートファイルによって定義されたそれぞれのページのデザイン）
View（どのページを表示させるかを決定する処理）

の頭文字を取ったものです。

詳しくは以下のページで詳しく解説しました！是非ご覧ください！

【Django入門】Djangoアプリの設計哲学！MTVモデルをmodelsを通して学ぼう！

更新日 : 2019年1月29日

MVTを図にしてみるとこのようになります。

よく似た設計にMVC（Model、View、Controller）というモデルもあります。

MVCモデルの場合は、

Model（データベースに格納されているデータ）

View（ページをどのように見せるのかを決定する処理）

Controller（ユーザーからの入力をModelに伝える処理）

になります。

MVCモデルを採用しているフレームワークには、Ruby on Railsがあります。

templateとは

これから学んでいくtemplateは具体的にどのような役割をするのか、見ていきましょう。

templateでは主にHTMLを使って表示するページを作っていきます。具体的にはHTMLにブロックと呼ばれる変数や命令を埋め込んで、より自由度の高いWebページを作ることが出来ます。

通常のHTMLでは使えないようなif文やfor文なども使うことが出来ます。

templateを作る準備

それでは早速、templateを使ってみましょう。

Djangoのインストール方法

まずはDjangoをインストールしましょう。

DjangoはPythonのパッケージとして提供されています。インストール方法はこちらの記事をご覧ください。

【Django入門】あなたのパソコンにDjangoをインストール！

更新日 : 2019年1月29日

プロジェクトとアプリケーションの作成

インストールが出来たら、次はプロジェクトとアプリケーションを作成していきます。

詳しくはこちらの記事で解説されているのでご覧下さい。

【Django入門】Djangoアプリの設計哲学！MTVモデルをmodelsを通して学ぼう！

更新日 : 2019年1月29日

settings.pyの設定をしよう

templateを使う場合は、もう一つ準備が必要になります。

Djangoにtemplateファイルを置く場所（ディレクトリ）を知らせなければなりません。

そこで、mySite/settings.pyを編集しましょう。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
          os.path.join(BASE_DIR, 'templates'),
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

TEMPLATES = [

{

'BACKEND': 'django.template.backends.django.DjangoTemplates',

'DIRS': [

os.path.join(BASE_DIR, 'templates'),

'APP_DIRS': True,

'OPTIONS': {

'context_processors': [

'django.template.context_processors.debug',

'django.template.context_processors.request',

'django.contrib.auth.context_processors.auth',

'django.contrib.messages.context_processors.messages',

]

TEMPLATESの’DIRS’に、「os.path.join(BASE_DIR, ‘templates’),」という命令を追加します。

これは、templatesというディレクトリにtemplateファイルを入れていくことを宣言しています。

BASE_DIRはDjangoに用意されている変数です。os.path.join関数は、Pythonで簡単にパスを作ってくれる関数になります。

要するに、’DIRS’にはtemplatesディレクトリのパスが入っていると考えて良いでしょう。

ここでは便宜上、templatesというディレクトリ名にしていますが、作るWebアプリケーションによって変えることも出来ます。

変えた場合は、settings.pyも同じように変更しましょう。

templateディレクトリを作成しよう

先程はどこに、どの名前のディレクトリを置くかを指定しました。

肝心のtemplatesディレクトリは、manage.pyと同じ階層に作ります。

現在は、

mySite
—manage.py
—myapp
—mySite
—templates

mySite

—manage.py

—myapp

—mySite

—templates

というディレクトリ構成になっています。

そして、その中にtemplateファイルを作っていきます。templateファイルと聞くと少し構えてしまうかもしれません。

しかしHTMLファイルにとても良く似た書き方をするのでそこまで心配する必要はありません。

HTMLについてはこちらの記事をご覧ください。

HTMLとは？初心者でも10分で理解出来る知っておくべき基礎知識

更新日 : 2019年5月9日

こちらのサンプルコードを見てみましょう。

<html>
<head>
<title>template test</title>
</head>
<body>
<p>This is template test.</p>
</body>
</html>

<html>

<head>

<title>template test</title>

</head>

<body>

This is template test.

</body>

</html>

とてもシンプルなファイルの中身になりますが、これでも立派なHTMLファイルで、ブラウザで表示をすることが出来ます。

templateファイルは、このHTMLファイルをもとに、様々な機能を付け足していくことが出来ます。

templateならではの機能は、もう少し後の章で解説します！

views.pyとurls.pyを設定しよう

templateファイルを読み込む準備はできました。

これからは、viewとURLを紐つけていきます。viewについてはこちらも併せて知っておくと、理解が進むと思います。

【Django入門】viewsを使ってページを表示させよう

更新日 : 2019年1月29日

まずは、myapp/views.pyを編集します。

from django.shortcuts import render
from django.http.response import HttpResponse
 
def index_template(request):
    return render(request, 'index.html')

from django.shortcuts import render

from django.http.response import HttpResponse

def index_template(request):

return render(request, 'index.html')

そして、myapp/urls.pyをこのように編集します。

from django.conf.urls import url
from . import views
 
urlpatterns = [
    url(r'^templates/', views.index_template, name='index_template'),
]

from django.conf.urls import url

from . import views

urlpatterns = [

url(r'^templates/', views.index_template, name='index_template'),

]

mySite/urls.pyは、最初はありませんが、自分で作る必要があります。

このように編集しましょう。

from django.conf.urls import include, url
from django.contrib import admin
 
urlpatterns = [
    url(r'^myapp/', include('myapp.urls', namespace='myapp')),
    url(r'^admin/', admin.site.urls),
]

from django.conf.urls import include, url

from django.contrib import admin

urlpatterns = [

url(r'^myapp/', include('myapp.urls', namespace='myapp')),

url(r'^admin/', admin.site.urls),

]

これで、すべての準備は完了です。

mySiteディレクトリで以下のコマンドを実行します。

python manage.py runserver

1	python manage.py runserver

実行すると、サーバーが起動します。

ブラウザで http://localhost:8000/myapp/templates/ に移動して「This is template test.」と表示されればtemplateを使う準備は完了です。

（※ポート（ここでは8000）は上のコマンドを実行するとターミナルに表示されたものを使ってください。）

templateの作り方

templateはただのHTMLを表示するだけではなく、様々な機能を使うことができます。

templateで変数を使おう

templateで変数を使うには、templateファイルにも変数を書く必要があります。

<html>
<head>
<title>template test</title>
</head>
<body>
<p>This is {{app}} test.</p>
</body>
</html>

<html>

<head>

<title>template test</title>

</head>

<body>

This is {{app}} test.

</body>

</html>

「{{app}}」が変数です。

この変数に値を追加する作業を、views.pyで行います。

from django.shortcuts import render
from django.http.response import HttpResponse
 
def index_template(request):
    myapp_data = {
    'app': 'Django'
    }
    return render(request, 'index.html', myapp_data)

from django.shortcuts import render

from django.http.response import HttpResponse

def index_template(request):

myapp_data = {

'app': 'Django'

}

return render(request, 'index.html', myapp_data)

myapp_dataという辞書型に、appというkeyでDjangoという文字列が入っています。

これをrender関数に渡すことで、変数が反映されます。

templateでコメントを書こう

templateファイルの中ではコメントを書くことができます。

<html>
<head>
<title>template test</title>
</head>
<body>
<p>This is {{app}} test.</p>
{# This is practice. #}
</body>
</html>

<html>

<head>

<title>template test</title>

</head>

<body>

This is {{app}} test.

{# This is practice. #}

</body>

</html>

「{# #}」で囲われた中はコメントと見なされて何を書いてもプログラムには影響しません。

普通のHTMLファイルよりも複雑になりやすいtemplateファイルでは使っていくことをおすすめします。

templateに配列を渡そう

templateファイルは配列を扱うこともできます。

<html>
<head>
<title>template test</title>
</head>
<body>
<p>This is {{app}} test.</p>
<p>
{% for i in num %}
{{ i }}<br>
{% endfor %}
</p>
</body>
</html>

<html>

<head>

<title>template test</title>

</head>

<body>

This is {{app}} test.

{% for i in num %}

{{ i }}

{% endfor %}

</body>

</html>

{% for 変数 in リスト %}から{% endfor %}までがfor文です。

書き方がとてもPythonに似ていますね。

views.pyはこのように編集をします。

from django.shortcuts import render
from django.http.response import HttpResponse
 
def index_template(request):
    myapp_data = {
    'app': 'Django',
    'num': range(10),
    }
    return render(request, 'index.html', myapp_data)

from django.shortcuts import render

from django.http.response import HttpResponse

def index_template(request):

myapp_data = {

'app': 'Django',

'num': range(10),

}

return render(request, 'index.html', myapp_data)

普通の変数と同じように扱えることがこれで分かっていただけたかと思います。

templateを使いこなそう

templateにはまだまだたくさんの機能が備わっています。ここからはちょっと進んだ内容に挑戦してみましょう。

templateでif文を使おう

templateでif文を使うことができれば、表示する内容を条件によって変えることが出来るようになります。

こちらのコードを見てみましょう。

<html>
<head>
<title>template test</title>
</head>
<body>
<p>This is {{app}} test.</p>
{% if is_weekday %}
<p>Today is weekday.</p>
{% else %}
<p>Today is holiday.</p>
{% endif %}
</body>
</html>

<html>

<head>

<title>template test</title>

</head>

<body>

This is {{app}} test.

{% if is_weekday %}

Today is weekday.

{% else %}

Today is holiday.

{% endif %}

</body>

</html>

「{% if %}」と「{% else %}」、「{% endif %}」が使われています。

from django.shortcuts import render
from django.http.response import HttpResponse
 
def index_template(request):
    myapp_data = {
    'app': 'Django',
    'is_weekday': True,
    }
    return render(request, 'index.html', myapp_data)

from django.shortcuts import render

from django.http.response import HttpResponse

def index_template(request):

myapp_data = {

'app': 'Django',

'is_weekday': True,

}

return render(request, 'index.html', myapp_data)

これで、状況によって表示内容を変えることが出来るようになりました。

templateの変数でfilterを使おう

filterは様々な機能がすでに用意されています。

このtemplateファイルを見てみてください。

<html>
<head>
<title>template test</title>
</head>
<body>
{{app|length}}
</body>
</html>

<html>

<head>

<title>template test</title>

</head>

<body>

</body>

</html>

「{{変数|filter}}」のようになっている部分がfilterです。

この例ではappという変数に対してすでに用意されているlengthという長さを調べるfilterをかけています。

先程も説明したようにこのfilterにはたくさんの種類があります。

詳しくはこちらをご覧ください。

templateで継承しよう

ページが複数ある場合、ヘッダーやフッターなど、共通している部分がいくつかあると思います。

その場合、templateファイルを親と子に分けて、継承をするとより簡潔に、見やすいコードが書けます。継承などについては、こちらの記事で詳しく解説されているのでぜひご覧ください。

【Python入門】クラスの使い方を簡単解説で楽々マスター

更新日 : 2019年7月31日

まずは親のtemplateファイルをbase.htmlという名前で保存します。

<html>
<head>
<title>template test</title>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>

<html>

<head>

<title>template test</title>

</head>

<body>

{% block body %}

{% endblock %}

</body>

</html>

「{% block ブロック名 %}」と「{% endblock %}」で変更が加えられる部分を囲み、その部分以外は共通化して継承することが出来ます。

この場合のbodyはブロック名なので、パーツごとに分けて適切な名前をつけましょう。

次に、実際に継承を行う子ページのindex.htmlに変更を加えましょう。

{% extends "base.html" %}
 
{% block body %}
<p>This is {{app}} test.</p>
{% if is_weekday %}
<p>Today is weekday.</p>
{% else %}
<p>Today is holiday.</p>
{% endif %}
{% endblock %}