LoginSignup
1
1

テンプレートを学びました。

Last updated at Posted at 2024-05-02

Webサイトの画面に表示されている部分って、htmlやcssが使われている。

普通、何かWebサイトを作るってなったとき、htmlやcssファイルの中に、コードを書いて華やかなサイトが出来上がる。しかし、これだけがしたいなら、別にWebサーバにそれらのファイルを置けばWebサイトは完成する。

じゃあ、Django(Webフレームワーク)って何のためにあるの?

Djangoでできることは、Webサイトにアクセスしてきた人の情報を用いて、いろんな処理をしたり画面出力する。これがWebフレームワークを使う利点。つまり!Djangoを使って、htmlの内容をあれこれ操作する!これが利点。(もっと私がよくわからないだけで、できることはいっぱい...)

こうした考え方で作成される表示用ページデータを「テンプレート」という。

テンプレートは、Webページの中に様々な変数などの情報を組み込んだもの。Djangoではそのテンプレートを読み込んで、そこに組み込まれている変数などに値を代入してページを完成させてからクライアント側に送り返す。

テンプレートを使ってみよう!

まず、やらなければならないこと。それが、アプリケーションの登録。これまでは、views.pyのindex関数から直接"HttpResponse("Hello!")"とかやって表示させてたけど、テンプレートのようなDjangoに組み込まれているシステムを利用して動かすとなると、あらかじめDjangoに「このプロジェクトでは、これとこれとこういうアプリケーションがあるんですよ」と知らせなければならない。このどんなアプリケーションがあるか知らせているファイルが、"settings.py"。このファイルを開くと、設定情報を保管する変数の文がたくさん並んでいる。
この中にある、INSTALLED_APPSという変数の値を設定している部分に作りたいアプリケーションの値を追加しておく。

スクリーンショット 2024-05-02 235432.png

さて、実際にテンプレートを作ってみよう!

テンプレートを置く場所は?
→Djangoでは、各アプリケーションごとに"templates"という名前のフォルダを用意して、そこ に保管する。

例えば、Django_praプロジェクトの「practice」フォルダの中に、新たに"templates"というフォルダを作成して、さらに、そのフォルダの中に"practice"フォルダを用意する。さらにその中に、"index.html"を作る!(いや、複雑ですね...)
スクリーンショット 2024-05-03 000342.png

このindex.htmlに適当にhtmlコードを入れる。

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset='utf-8'>
    <title>practice</title>
</head>
<body>
    <h1> practice/index</h1>
    <p>This is sample page.</p>
</body>
</html>

viws.pyに次のコードを書く。

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

def index(request):
    return render(request, 'practice/index.html')
# Create your views here.

render関数って何?

render関数とは、テンプレートをレンダリングするのにつかわれる関数。レンダリングとは、テンプレートに記述されている変数などを実際に使う値に置き換えて表示を完成させます!ってこと。

render(<HttpRequest>, テンプレート)

第一引数には、クライアントへの返送を管理するHttpResponseのインスタンス(具体的な機能てきなこと)を指定。第二引数には、使用するテンプレートファイルを指定。これは、"templates"フォルダからのパスで指定をする。「テンプレートファイルのパス」とは、Djangoのプロジェクト内のテンプレートファイルが格納されている場所を指定する文字列。通常、Djangoプロジェクトでは、templatesというディレクトリにテンプレートファイルが配置される。
スクリーンショット 2024-05-03 013307.png

テンプレートに値を渡そう!

まず、テンプレートのindex.htmlに次のコードを。

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset='utf-8'>
    <title>{{title}}</title>
</head>
<body>
    <h1> {{title}}</h1>
    <p>{{msg}}</p>
</body>
</html>

テンプレートには、{{title}}, {{msg}}みたいに、{{変数名}}という形で変数を埋め込むことができる。変数だけじゃなくて、関数やメソッドの呼び出しも可能。そうすると、Djangoはレンダリング(テンプレートに記述されている変数などを実際に使う値に置き換えて表示を完成させる処理のこと)の際、実際の値を、{{}}部分に置き換える。

vews.pyはこんな↓↓

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

def index(request):
    params = {
    "title": "practice/index",
    "msg" : "これは、テンプレートという型に、実際に値を渡して画面表示を完成させています。",
    }
    return render(request, "practice/index.html", params)

params = {}の部分は、Pythonの辞書(dictionary)と呼ばれる、キーと値のペアを保持するデータ構造。辞書は波括弧 {} を使って定義され、各要素はキーと値をコロン : で区切って表現され、複数のキーと値のペアはコンマ , で区切られる。

dict = { "key1" : "value1", "key2" : "value2", "key3" : "value3"}
print(dict)
print(dict["key3"])

## 出力 ##
{'key1': 'value1', 'key2': 'value2', 'key3': 'value3'}
value3

だから、paramsという辞書?には"title"というキーに"practice/index"、 "msg" というキーに "これは、テンプレートという型に、実際に値を渡して画面表示を完成させています。"がペアで保持されている。それを、renderの第三引数に設定されているため、レンダリング時にparamsで保管されているペアが使われるようになる。

【手順】
値を辞書にまとめる→レンダリング時に第3引数で辞書を渡す→テンプレートの{{}}に値を埋め込む。

これで、Webページにアクセスするとparamsをテンプレートに渡した値が表示されるはず!

1
1
1

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
1
1