【Django】templateの作り方や基本を徹底解説|実例付

frame-imgDjango

(最終更新月:2022年7月)

✔このような方へ向けて書かれた記事となります

「Webブラウザから自分のページへアクセスしたい!」

「HTMLファイルをブラウザで表示するにはどうしたら良いの?」

「Djangoのtemplate(テンプレート)の書き方が知りたい」

✔当記事を通じてお伝えすること

  • templateを表示するための事前準備
  • templateの書き方
  • templateの使い方

当記事を最後までご覧いただければ、templateの書き方はもちろん、templateとviews.pyがどのように値を渡しているかが理解できるようになります。

【著者プロフィール】

profile_icon
【Python歴】11年 x 【Django歴】10年
HP作成、社内システムの構築、コンサルティング

当ブログを通じて、Webアプリの書き方やアプリの公開方法までを解説しています。

☆日報アプリ「D-Repo」(デモ版)→こちら

※Djangoをベースに作成したアプリです。

☆便利ツールアプリ「Tool Station」→こちら

※Django REST frameworkとReactで作成しているアプリです。

✔月9,800円でWebデザインが学べる

デザナルは、Webデザインに苦手意識がある方におすすめのサブスク型スクールです。

特徴は以下の通り。

  • 初期費用不要
  • 教材が使い放題
  • 案件で収入も得られる

デザナルは稼ぎながら学べる、格安のWebデザインスクールです。

>>詳細はこちら<<

安いWebデザインスクール「デザナル」を徹底分析

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を作り、ページを表示していきます。

順序は以下のとおりです。

  1. templateファイルを作る
  2. views.pyで、ビュー関数を記述する
  3. 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を指定できます。

下記の通り記述してください。

import 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
]

ポイントは以下のとおり。

  1. インポートの際、同列フォルダからの場合は、最初に「 . (ドット)」を忘れないこと
  2. urlpatterns内では、path(“URL”, インポートした関数)とすること

ブラウザに表示されるか確認しよう

ブラウザで表示されるか確認します。

サーバーを立ち上げるコマンドをターミナルで打ち込みます。

python manage.py runserver

ブラウザで以下のとおりURLを打ち込みます。

http://localhost:8000/nippo/

日報アプリで最初のHTML表示

無事表示されていれば成功です!

応用: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を表示するには、以下の手順でおこないましょう。

  1. settings.py、urls.pyを正しく設定する
  2. templateフォルダを作る
  3. templateファイルとビュー関数を繋ぐ
  4. ビュー関数とURLを繋ぐ
  5. templateに好きな記述を書いていく

今後は、保存したデータの一覧が表示されるように、templateを変更していきます。

今のうちに色々とコードを変えてみて、HTMLページが表示される仕組みをしっかりと頭に入れておきましょう。

次回は、別ページ「nippo-detail.html」を作り、views.pyで生成したランダムな値を表示するという「views.pyの関数からHTMLへ値を渡す方法について」を解説していきます。

当ブログでは、日報アプリ開発を通じて、Webアプリを一から開発し公開するまでを初学者の方でもわかるようにと記事を連載しています

「Djangoでのアプリ開発を学びたい!」
「Djangoで開発したアプリをWebで公開するにはどうするの?」

という方は必見です!

【Django】チュートリアル|日報アプリの開発から公開まで
Djangoのチュートリアルをお探しですか?具体的に「手を動かして作ってみたい!」という方へ向けて、誰でもできる簡易的な日報アプリの開発を通じて、Djangoの様々な機能に触れていくシリーズとなっています。PythonでWebアプリを作りたい方、必見の記事となります!

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