【Django3 入門】テンプレートの使い方

Django

今回は、テンプレート(画面の表示部分)の使い方についてみていきます。

アプリの作成

まずはアプリを作成します。
今回は「my_app」という名前にします。

python manage.py startapp my_app


そして、作成したアプリを settings.py の INSTALLED_APPS に設定します。

INSTALLED_APPS = [
.
.
.

    'my_app',
]

テンプレートの作成

「my_app」の中に「templates」ディレクトリを作成し、その中に「index.html」を作成します。

<h1>Hello</h1>


次に、「my_app」の中の「views.py」を以下のように書きます。

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.

def index(request):
    return render(request, 'index.html')

render()の第二引数にファイルを指定します。
templates」という名前のディレクトリの中身を自動的に探すため、「templates/ファイル名」とする必要はありません。




次に、「my_app」の中に「urls.py」を作成し、以下のように書きます。

from django.urls import path
from . import views

app_name = 'my_app'

urlpatterns = [
    path('', views.index, name='index'),
]


そして、この url の設定を、プロジェクトディレクトリの「urls.py」に設定します。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('my_app/', include('my_app.urls')),
]


これで「/my_app」にアクセスすると、「Hello」と表示されるかと思います。

テンプレートディレクトリの位置の変更

「settings.py」の中から「BASE_DIR」が定義されているところを探し、
以下のように修正します。

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')


そして、同ファイルの「TEMPLATES」の「DIRS」に、いま定義した「TEMPLATE_DIR」を指定します。

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [TEMPLATE_DIR,],
.
.
.



次に、アプリディレクトリ(my_app)と同階層に「templates」ディレクトリを作成し、その中に「index.html」を作成します。


これで「/my_app」にアクセスすると「Good bye」と表示され、
テンプレートディレクトリの位置を変更できたことが確認できます。

テンプレートに値を渡す

「my_app」の「views.py」の中で context を用いることで、テンプレートに値を渡すことができます。

def index(request):
    return render(request, 'index.html', context={'msg': 'Hello'})


この例では、「msg」というキーで「Hello」という値を渡しています。


ではテンプレートでこの値を使用します。

<h1>{{ msg }}</h1>


このように書くことで、「Hello」と表示されます。

制御文の使用

テンプレートに if, for などの制御文を入れるには、「{% %}」で囲みます。

from django.shortcuts import render
from django.http import HttpResponse

# Create your views here.

def index(request):
    return render(request, 'index.html', context={'msg': 'Hello'})

def home(request):
    info = {
        'name': 'taro',
        'age': 20,
        'favorite_fruits': ['apple', 'grape', 'lemon']
    }
    return render(request, 'home.html', context={
        'info': info,
    })
from django.urls import path
from . import views

app_name = 'my_app'

urlpatterns = [
    path('', views.index, name='index'),
    path('home', views.home, name='home'),
]
<p>名前: {{ info.name }}</p>
<p>好きな果物</p>
<ul>
    {% for fruit in info.favorite_fruits %}
        <li>{{ fruit }}</li>
    {% endfor %}
</ul>

{% if info.age < 20 %}
    <p>未成年です</p>
{% else %}
    <p>成人です</p>
{% endif %}



ブラウザで「/my_app/home」にアクセスしたときの表示↓

テンプレートの継承

<head>タグなど複数のページにおける共通部分を定義し、
それを継承させることで使いまわすことができます。

今回は、継承元のファイルを「base.html」、
継承先のファイルを「sample1.html」「sample2.html」とします。

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
        <title>{% block title %}ページ{% endblock %}</title>
    </head>
    <body>
        {% block content %}{% endblock %}
    </dody>
</html>
{% extends 'base.html' %}
{% block title %}Sample1{{ block.super }}{% endblock %}
{% block content %}
<p>これはSample1です</p>
{% endblock %}
{% extends 'base.html' %}
{% block title %}Sample2{{ block.super }}{% endblock %}
{% block content %}
<p>これはSample2です</p>
{% endblock %}


{% block 名前 %} とすることで、ブロックに名前を付けられます。
{% extends ‘ファイル名’ %} とすることで、継承元のファイルを指定します。
{{ block.super }} とすることで、親の同ブロックの中身を表示できます。

今回の例だと、

Sample1{{ block.super }}

Sample1ページ

に置き換わります。



そして、パスを通します。

.
.
.

def sample1(request):
    return render(request, 'sample1.html')

def sample2(request):
    return render(request, 'sample2.html')
from django.urls import path
from . import views

app_name = 'my_app'

urlpatterns = [
    path('', views.index, name='index'),
    path('home', views.home, name='home'),
    path('sample1', views.sample1, name='sample1'),
    path('sample2', views.sample2, name='sample2'),
]



ブラウザで「/my_app/sample1」「/my_app/sample2」にそれぞれアクセスし、
検証ツールでHTMLを確認すると、以下のようにきちんと継承されているのがわかります。

フィルター機能

フィルターを用いることで、テンプレート上の値を変換することができます。

文章全体を指定
{% filter フィルターの種類 %}~{% endfilter %}

各データを指定
{{ データ | フィルターの種類 }}


例:upper(大文字に変換)

<p>{% filter upper %}abc{% endfilter %}</p>
<p>{{ 'def' | upper }}</p>


ブラウザの表示↓




たくさんの種類のフィルターがあるので、詳細は下記URLを参照
https://docs.djangoproject.com/ja/3.1/ref/templates/builtins/#built-in-filter-reference

テンプレートでの画面遷移

基本的な使い方

<a>タグの href に以下のような指定をします。

<a href="{% url 'アプリ名:パス名' %}">home</a>


例えば、遷移先を home にする場合、
「my_app」の「urls.py」は以下のようになっているので、

from django.urls import path
from . import views

app_name = 'my_app'

urlpatterns = [
    path('', views.index, name='index'),
    path('home', views.home, name='home'),
    path('sample1', views.sample1, name='sample1'),
    path('sample2', views.sample2, name='sample2'),
]


下記のように指定することで、home を遷移先にすることができます。

<a href="{% url 'my_app:home' %}">home</a>

値を渡す

例えば、「/home/○○」のようなURLに遷移する場合を見てみます。
(今回は「/home/jiro」に遷移)


「index.html」を以下のように修正します。

<a href="{% url 'my_app:home' name='jiro' %}">home</a>


次に、「urls.py」の home のパスを修正します。

path('home/<name>', views.home, name='home'),


そして、「views.py」の home 関数を修正します。

def home(request, name):
    info = {
        'name': name,
        'age': 20,
        'favorite_fruits': ['apple', 'grape', 'lemon']
    }
    return render(request, 'home.html', context={
        'info': info,
    })



これで、<a>タグから home へ遷移すると、jiro という値を渡せていることが確認できます。

静的コンテンツの利用

cssファイル、jsファイル、画像ファイルなど静的コンテンツを利用したい場合、
「static」というディレクトリを用います。

今回は「my_app」と同階層に「static」ディレクトリを作り、その中に「sample.jpg」というサンプル画像を保存しました。


では、まずは「static」ディレクトリの位置を settings.py に設定します。

from pathlib import Path
import os

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent
TEMPLATE_DIR = os.path.join(BASE_DIR, 'templates')
STATIC_DIR = os.path.join(BASE_DIR, 'static')

.
.
.

STATIC_URL = '/static/'

STATICFILES_DIRS = [
    STATIC_DIR
]


そして、静的コンテンツを使いたいテンプレートで以下のように書きます。

{% load static %}

<img src="{% static 'sample.jpg' %}">


これだけで画像が表示されます。



また、読込先のファイルを識別子で分けて管理したい場合、
以下のように書くことで実現できます。

STATICFILES_DIRS = [
    ('名前', STATIC_DIR)
]
<img src="{% static '名前/sample.jpg' %}">






本日は以上になります。
ご覧いただきありがとうございました!

続きはこちら↓

コメント

コンタクトフォーム

    タイトルとURLをコピーしました