LoginSignup
0
0

More than 3 years have passed since last update.

[Day 5]ビューとテンプレートの基礎

Last updated at Posted at 2021-01-10

January 10, 2021
←前回:Day 4 アプリケーション作成

今回のテーマは「ビューとテンプレートの基礎」です。
今までは細々と設定作業ばかりでDjangoの面白さを実感出来なかったかも知れません。
いよいよ特定のURLに対してHTMLを出力していきますよ。

Hello World

兎にも角にも、まずは文字を画面に出力しましょう。


#ここはおなじみのやつです
$ source venv/bin/activate 
(venv)$ cd ./mysite/base
(venv)$ emacs views.py

baseのviews.pyを追加します。

base/views.py
from django.http import HttpResponse
from django.template import loader

def top(request):
    return HttpResponse('Hello World')

このviews.pyに追加したtop関数をURLと結びつけるためbase/urls.pyを修正すます。

base/urls.py
from django.urls import path
from . import views
name = 'base'

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

ブラウザで確認してみましょう。


(venv)$ python manage.py runserver 8080

これでブラウザにHello Worldと出たかと思います。

templatesディレクトリを設定する

まず、settings.pyのTENPLATES部分の設定を書き換えます。

mysite/settings.py
-        'DIRS': [],
+        'DIRS': [os.path.join(BASE_DIR, 'templates')],

templatesディレクトリをプロジェクト直下に作成し、その中にbaseディレクトリを生成します。

#イメージ
mysite
   └─templates
   |    └─base
   |
   └─mysite

mysiteが二つあってわかりづらいですが、templatesは上のディレクトリです。
わかりにくいのであればプロジェクト名を変えるのもありです。

(venv)$ cd mysite #プロジェクト直下にいない場合は移動する
(venv)$ mkdir -p mysite/templates/base

テンプレートを作ってみる

baseアプリケーション用のテンプレートファイルを生成します。

mysite/templates/base/top.html

<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="content-language" content="ja">
    <title>{{title}}</title>
</head>
<body>
<h1>{{title}}</h1>
<p>テンプレートテスト表示</p>
</body>

テンプレートを使用するようにbase/views.pyのtop関数も以下のように書き直します。

base/views.py
from django.shortcuts import render
from django.http import HttpResponse
from django.template import loader

def top(request):
    template = loader.get_template('base/top.html')
    ctx = {'title': 'Django学習ちゃんねる(仮)'}
    return HttpResponse(template.render(ctx, request))

ではブラウザを確認しましょう。


(venv)$ python manage.py runserver 8080

このように表示されると思います。
nameセンスに関しては突っ込まないでください。
Dango学習帳のブログをそのまま参考にしているので、、、
スクリーンショット 2021-01-10 11.54.13.png

views.pyで渡したtitleパラメータがテンプレートに渡されていることが確認されました。
Djangoテンプレートはdict型の変数でパラメータを渡し、テンプレート側では「{{}}」でパラメータ名を囲うことで表示されます。

さて、表示されましたが、テンプレートに表示する度に先程のようにテンプレートを読み込んで表示するのは面倒なのでショートカットが用意されています。
先程のviews.pyは以下のように書き換え出来ます。

base/views.py

from django.shortcuts import render
# from django.http import HttpResponse
# from django.template import loader

def top(request):
    # template = loader.get_template('base/top.html')
    ctx = {'title': 'Django学習ちゃんねる(仮)'}
    # return HttpResponse(template.render(ctx, request))
    return render(request, 'base/top.html', ctx)    

loaderもHttpResponseも不要になりスッキリ書けますね。
renderを使用すると任意のテンプレートにコンテキスト(テンプレートに変数を渡す入れ物と考えて下さい)を渡して表示することが出来ます。

おわりに

今回はテンプレートの基礎を作成しました。
最初、templatesの場所を./mysite/mysite/templatesとしていて小一時間ほどエラーに悩まされていました。
最終的に解決したので良かったです。

それではまたまた

←前回:Day 4 アプリケーション作成
→次回:Day 6 staticファイルを扱う

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0