【Django】HTML(template)を表示する方法を解説

frame-imgDjango

(最終更新月:2021年11月)

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

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

というDjango初学者の方へ向けた記事となります

当記事を通じて

  • ウェブブラウザにHTMLファイルを表示する方法

を徹底的に解説していきます

HTMLページを表示するには、

  1. HTMLファイルを適切な場所に作成すること
  2. views.pyでHTMLファイルを表示するための指示を書くこと
  3. 入力されたURLとviews.pyの指示を紐付けること

が必要になります

一つ一つ見ていきましょう!

初期費用ゼロ/月9,800円でWebデザインが学べる

デザインを習得するためには、客観的なフィードバックと改善が不可欠です。

以下の記事ではこんなWebデザインスクールをご紹介しています。

  • 初期費用ゼロで、月々9,800円のみ
  • オンラインで、教材が使い放題
  • コンテストや実務案件にチャレンジして報酬もGETできる

デザナルはトップデザイナーからレビューがもらえる、格安のWebデザインスクールです。

>>デザナルに興味がある方はこちらからどうぞ<<

詳細をまとめた記事もございますので、ぜひご覧ください。

最初に確認しよう!

settings.pyurls.pyで下記の設定が済んでいるかを確認してから先へ進みましょう

settings.py

下記の2点を確認してください

【INSTALLED_APPS】

INSTALLED_APPS = [
    ...,
    ...,
    'nippo',
]

ページを表示したいapp名が載っていればOKです!

【TEMPLATES】

TEMPLATES = [
    {
        ....,
        'DIRS': [BASE_DIR / "templates"],
        ....,
    },
]

「DIRS」が上記のようになっていればOKです

これらがないといくら正しい記述をしてもDjangoがHTMLファイルを認識してくれませんのでご注意ください!

urls.py

下記の2点を確認してください

【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は空リストで構いません

HTMLファイル作成

appフォルダ内で下記のように2つのフォルダを作成します

templates」フォルダ > 「app名」フォルダ

【app内ファイルツリー】

nippo #appフォルダ名
├── __init__.py
├── admin.py
├── apps.py
├── migrations
├── models.py
├── templates #今回作成しました
│   └── nippo #今回作成しました
├── tests.py
├── urls.py
└── views.py

HTMLファイルは「templates > nippo」内に「nippo-list.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でHTMLを読み込む

appフォルダ(「nippo」)内のviews.pyでは、関数、もしくはクラスを使って指定のHTMLを読み込み表示する指示を出すことができます

【views.py内の記述】

下記の通り記述すればOKです

import django.shortcuts import render

def nippoListView(request):
	return render(request, "nippo/nippo-list.html")

【解説】

関数では、下記を返すことで指定のHTMLファイルを読み込み表示する指示となります

render(request, HTMLファイル名)

記述のポイントとしては、

  • 関数では必ず引数「request」を受け取こと
  • ファイル名の記述は、templatesフォルダ以下のパスとすること

URLと関数を紐付けよう

views.pyで記述した「nippoListView」関数は「nippo-list.html」を表示するよう指示しています

この関数とURLを紐づけることで、ブラウザにURLが打ち込まれた時に、紐付けられた関数が実行されます

URLと関数の紐付けは、urls.pyによって行います

【appフォルダ > urls.py】

from django.urls import path
from .views import nippoListView

urlpatterns = [
    path("", nippoListView),
]

ポイントは、

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

いざ、アクセス!

下記の通りアドレスを打ち込みアクセスしてみましょう!

http://localhost:8000/nippo/

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

無事表示されましたでしょうか?

まとめ

DjangoアプリでHTMLを表示するには、

  1. settings.py、urls.pyを正しく設定する
  2. HTMLファイルを正しい場所に保存する
  3. views.py内の関数もしくはクラスでHTMLファイルを読み込む指示を書く
  4. urls.pyURLと指示を紐づける

という流れが必要になります

当記事で作成した「nippo-list.html」については今後保存したデータの一覧が表示されるように変更を加えていきます

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

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

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

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

という方は必見です!

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

関連書籍

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