DjangoでTemplates（テンプレート）を作成してHTMLを表示する

この記事ではDjangoでtemplates（テンプレート）を使う手順を紹介します。

前回の記事で「ビューを使って画面に文字を表示させる」ところまでやったので、その続きです。
次は「表示する文字列をHTMLのテンプレートに埋め込む」作業を行います。

前回の記事はこちらです。
[kanren id=”66″ target=”_blank” rel=”noopener noreferrer”]

[list class=”ol-circle li-mainbdr main-bc-before”]

templatesディレクトリを作成する
templates以下にHTMLファイルを作成する
templatesを読み込むようにプロジェクトの設定ファイル（settings.py）を編集する
views.pyにビューとなるクラスを作成する
ビュークラスを表示するようにurls.pyを編集する

[/list]

それでは順番にやっていきましょう。
前回、「web」というアプリケーションを作ったところまでやったので、そちらを確認していただけるとスムーズに理解できると思います。

テンプレート用のディレクトリを作成する

プロジェクトの直下に「templates」というディレクトリを作ってください。

「templates」の下にhomepage.htmlファイルを作ります。

ここまでで以下のような構造になります。

.
├── Pipfile
├── Pipfile.lock
├── db.sqlite3
├── helloworld
│   ├── __init__.py
│   ├── asgi.py
│   ├── settings.py
│   ├── urls.py
│   └── wsgi.py
├── manage.py
├── templates
│   └── homepage.html
└── web
    ├── __init__.py
    ├── admin.py
    ├── apps.py
    ├── migrations
    │   └── __init__.py
    ├── models.py
    ├── tests.py
    ├── urls.py
    └── views.py

テンプレートのtemplates/homepage.htmlには以下のように書いてください。

<h1>This is hamepage.html!!</h1>

プロジェクトの設定ファイルにテンプレートの場所を定義する

プロジェクトの設定ファイルを開きます。
helloworld/settings.pyを編集しましょう。

settings.pyのTEMPLATERSという変数にtemplatesのディレクトリの情報を追記してください。

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',
            ],
        },
    },
]

これでテンプレートの完成です。

views.pyにビューとなるクラスを作成する

次にアプリケーションディレクトリ（「web」）にあるviews.pyを編集します。
このviews.pyはアプリケーションのビューを定義するファイルです。

このweb/views.pyに以下のようなコードを書いてください。

from django.views.generic import TemplateView

class HomePageView(TemplateView):
  template_name = 'homepage.html'

tamplate_nameにはテンプレートとなるhtmlを指定します。

urls.pyを編集してビューと紐付ける

前回の記事でも作業したように、URLとビューの紐付けを行います（前回の記事へのリンクは冒頭にあります）

まずはDjangoプロジェクトのurls.pyを編集し、ホームページにアクセスされたときにweb/urls.pyの設定に従うようにします。

helloworld/urls.pyを以下のように編集します。

from django.contrib import admin
from django.urls import path, include # 追記したもの

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('web.urls')), # 追記したもの
]

次に「web」アプリケーションのurls.pyを編集します。

from django.urls import path
from .views import HomePageView #views.pyを参照している

urlpatterns = [
  path('', HomePageView.as_view(), name='home')
]

ここまでがクラスベースのビューを画面に表示させるまでの手順です。

python manage.py runserver

すると、画面に「This is hamepage.html!!」と表示されます。

新しいテンプレートを追加する

新しいテンプレートを追加するときも基本的には同じ手順でできます。

まずは、templates以下に新しいHTMLファイルを追加しましょう。
templates/sample.htmlを作成します。

上のsample.htmlは以下のように書きます。

<h2>This is sample page!</h2>

次に、web/views.pyに上のsample.htmlを表示するためのクラスを追加します。

from django.views.generic import TemplateView

class HomePageView(TemplateView):
  template_name = 'homepage.html'

class SamplePageView(TemplateView):
  template_name = 'sample.html'

次にweb/urls.pyを編集します。

from django.urls import path
from .views import HomePageView, SamplePageView #views.pyを参照している

urlpatterns = [
  path('', HomePageView.as_view(), name='home'),
  path('sample/', SamplePageView.as_view(), name='sample'), # 追記したもの
]

ここでもう一度サーバーを起動しましょう。