（最終更新月：2022年7月）
✔このような方へ向けて書かれた記事となります
「Webブラウザから自分のページへアクセスしたい！」
「HTMLファイルをブラウザで表示するにはどうしたら良いの？」
「Djangoのtemplate（テンプレート）の書き方が知りたい」
✔当記事を通じてお伝えすること
- templateを表示するための事前準備
- templateの書き方
- templateの使い方
当記事を最後までご覧いただければ、templateの書き方はもちろん、templateとviews.pyがどのように値を渡しているかが理解できるようになります。
✔YouTube解説動画
当記事の内容は動画を見ながら進めると、約15分程度で完了します。
動画ならではの情報も解説しているので、記事と一緒にご覧ください。
動画の概要欄には、単元ごとのコードを紹介しているgithubページも載せています。
筆者プロフィール
【現職】プロダクトマネージャー
【副業】ブログ（月間20万PV）/YouTube/Web・アプリ制作
「プログラミング × ライティング × 営業」の経験を活かし、30後半からのIT系職へシフト。現在はプロダクトマネージャーとして、さまざまな関係者の間に入り奮闘してます。当サイトでは、実際に手を動かせるWebアプリの開発を通じて、プログラミングはもちろん、IT職に必要な情報を提供していきます。
【当ブログで紹介しているサイト】
✔人に見せても恥ずかしくないコードを書こう
「リーダブルコード」は、わかりやすく良いコードの定義を教えてくれる本です。
- 見るからにきれいなコードの書き方
- コードの分割方法
- 変数や関数の命名規則
エンジニアのスタンダートとすべき基準を一から解説しています。
何回も読むのに値する本なので、ぜひ手にとって読んでみてください。
template（テンプレート）とは？
Djangoのtemplate（テンプレート）とは、高機能なページが作れるDjango特有のHTMLファイルのことになります。
通常のHTMLと比べて高機能な理由としては、以下のようなことができるからです。
- 変数を埋め込める
- 指示が書ける
- for文やif文などが使える
通常のHTMLでは、ページを表示することに限られてしまうのに対し、Djangoのtemplateでは、プログラミング言語のように記述できるのが特徴です。
templateを書く前に
templateの書き方を説明する前に、template作成のための準備をしていきます。
当ブログでは、一からアプリ公開までを解説しているため、それぞれに該当する記事をご覧ください。
Djangoのインストールとプロジェクト作成
Djangoのインストールがまだの方は、こちらをご覧ください。
settings.pyで、templateフォルダの設定
Djangoのプロジェクトを立ち上げたら、一番最初におこないたい設定変更です。
以下のような記述をしておきましょう。
TEMPLATES = [
{
....,
'DIRS': [BASE_DIR / "templates"],
....,
},
]詳しく知りたい方は、こちらの記事をどうぞ。
アプリの立ち上げから設定まで
アプリを立ち上げて、設定を済ませます。
主には、以下の3点を確認しましょう。
- settings.py
- urls.py
- templateフォルダの作成
settings.py
INSTALLED_APPS = [
...,
...,
'nippo',
]ページを表示するアプリ名が載っていればOKです！
urls.py
settings.pyと同列のurls.pyの記述を以下のとおりとします。
...
from django.urls import path, include #includeがインポートされているか？
urlpatterns = [
...,
path('nippo/', include('nippo.urls')), #app名.urlsがincludeされているか
]appフォルダ内にurls.pyを作り、以下のとおりとします。
from django.urls import path
urlpatterns = [
]現状のurlpatternsは空リストで構いません。
templateフォルダの作成
appフォルダ内で下記のように2つのフォルダを作成します。
「templates」フォルダ > 「app名」フォルダ
ここまでのフォルダ構成は以下のとおり。
nippo #appフォルダ名 ├── __init__.py ├── admin.py ├── apps.py ├── migrations ├── models.py ├── templates #テンプレート用のフォルダ1 │ └── nippo #テンプレート用のフォルダ2 ├── tests.py ├── urls.py └── views.py
詳しく知りたい方は以下の記事をご覧ください。
templateの作り方
以下のフォルダ構成になっていれば、準備は完了です。
nippo ├── __init__.py ├── admin.py ├── apps.py ├── migrations ├── models.py ├── templates │ └── nippo ├── tests.py ├── urls.py └── views.py
ここからtemplateを作り、ページを表示していきます。
順序は以下のとおりです。
- templateファイルを作る
- views.pyで、ビュー関数を記述する
- urls.pyで、ビュー関数とURLを紐づけする
templateファイルを作る
templateファイルは「templates > nippo」内に、「nippo-list.html」という名前で新たに作ります。
nippo . . ├── templates │ └── nippo │ └── nippo-list.html #こちらです . └── views.py
ひとまずコードは、通常のHTMLファイルと同様に以下の通り。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>日報アプリ</title>
</head>
<body>
<h1>こちらは日報アプリのページになります</h1>
</body>
</html>タイトルの指定とh1タグが表示されるよう記述しました。
views.pyで、ビュー関数を記述する
views.pyでは、ビュー関数もしくは、ビュークラスで、使用するtemplateを指定できます。
下記の通り記述してください。
from django.shortcuts import render
def nippoListView(request):
return render(request, "nippo/nippo-list.html")関数では、下記を返す（return）ことで指定のtemplateファイルを読み込めます。
render(request, HTMLファイル名)
記述のポイントとしては、以下を頭に入れておきましょう。
- 関数では必ず引数「request」を受け取ること
- ファイル名の記述は、templatesフォルダ以下のパスとすること
こちらでは、「nippoListView」というビュー関数が作成されました。
urls.pyで、ビュー関数とURLを紐づけする
urls.pyで、作成したビュー関数「nippoListView」とURLを紐付ける作業をします。
以下のとおりです。
from django.urls import path
from .views import nippoListView #ポイント1
urlpatterns = [
path("", nippoListView), #ポイント2
]ポイントは以下のとおり。
- インポートの際、同列フォルダからの場合は、最初に「 . (ドット)」を忘れないこと
- urlpatterns内では、path(“URL”, インポートした関数)とすること
ブラウザに表示されるか確認しよう
ブラウザで表示されるか確認します。
サーバーを立ち上げるコマンドをターミナルで打ち込みます。
python manage.py runserverブラウザで以下のとおりURLを打ち込みます。
無事表示されていれば成功です！
応用：templateの使い方
こちらでは、templateの使い方として、以下の方法を伝えます。
- 変数を使う方法
- templateを継承する方法
- フォームの値を渡す方法
- templateでif文を使う方法
詳しくは各リンク先の当ブログ記事にて解説しています。
変数を使う方法
Djangoのtemplateでは、ビュー関数やビュークラスから渡された変数を表示できます。
template上で以下のように記述します。
{{ 変数名 }}
詳しい方法は以下の記事で解説しています。
templateを継承する方法
Djangoのtemplateでは、コードをできるだけ短くできるよう、ほかのtemplateを継承する仕組みが用意されています。
継承するには、extendsブロックタグを使用します。
{% extends “base.html” %}
詳しい方法は以下の記事で説明しています。
フォームの値を渡す方法
アプリの入力フォームや問い合わせフォームなど、Webページにはフォームの使用が欠かせません。
フォームに入力された値を受け取り、処理する方法を以下の記事にて解説しています。
templateでif文を使う方法
Djangoのtemplateでは、プログラミング言語同様にif文（条件分岐）が使えます。
「if」「else」など、一般的なプログラミング言語と同じような使い方ですが、以下の記事にて詳しい説明をご覧いただければすぐにご理解いただけます。
まとめ：templateを使いこなそう
当記事の内容をまとめます。
Djangoアプリでtemplateを表示するには、以下の手順でおこないましょう。
- settings.py、urls.pyを正しく設定する
- templateフォルダを作る
- templateファイルとビュー関数を繋ぐ
- ビュー関数とURLを繋ぐ
- templateに好きな記述を書いていく
今後は、保存したデータの一覧が表示されるように、templateを変更していきます。
今のうちに色々とコードを変えてみて、HTMLページが表示される仕組みをしっかりと頭に入れておきましょう。
次回は、別ページ「nippo-detail.html」を作り、views.pyで生成したランダムな値を表示するという「views.pyの関数からHTMLへ値を渡す方法について」を解説していきます。