Djangoのビューとテンプレートを使った画面表示！HTMLを生成し画面へレンダリングしてみよう！

こんにちは！
LiSMOtechの久津間です。

前回の記事ではDjangoの初期設定について記載を行いました。

内容的には初心者の方を対象にしているので、中級者以上の方には物足りない記事ではあると思います。

ですが、継続的にDjangoの記事を発信していくつもりなので、ドンドンコアな内容にしていく予定です。

楽しみにしていただけると幸いです！

それでは、本題です。

今回のセクションではビューとテンプレートを用いて、実際にHTMLを生成し、画面へレンダリングしていきたいと思います。

URLディスパッチャの編集

それでは、ブラウザで表示を行うために、URLディスパッチャの設定を行います。

URLディスパッチャは指定されたURLに対応して、ビューで記載したどの関数を返すか決定します。

configディレクトリ配下のurls.pyにも記載することは可能ですが、ここでは作成したアプリ内のurls.pyで行います。

作成したappディレクトリにurls.pyファイルを作成します。

urls.pyの作成後、以下のとおり記載していきます。

from django.urls import path
from . import views

app = '@@@'
urlpatterns = [
    path('', views.home, name='home')
]

app（@@@）には作成したアプリ名を記載してください。

続いて、configディレクトリにあるurls.pyを開き、以下のとおり編集します。

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('@@@.urls')),
]

urlpatternsに記載しているpath関数では、第一引数に”を指定しています。

これはホームディレクトリ（https://hostname）で表示されることを意味します。

第二引数ではincludeの引数として、作成した「アプリ名（@@@）.urls.py」を指定しています。

ここでは、incluedeをimportしていることに注意してください。

ビューファイルの編集

次にビューファイルの編集を行なっていきます。

作成したアプリディレクトリ配下のviews.pyを開き、以下のとおり編集します。

from django.shortcuts import render
from django.http import HttpResponse
# Create your views here.

def home(request):
    txt = 'Hello, Welocom to LiSMOtech'
    return HttpResponse(txt)

ここまで記載ができたらターミナルから「python manage.py runserver」のコマンドを叩きます。

http://127.0.0.1:8000/　へアクセスし、以下のとおりビューが表示されれば成功です！

上記のようにビューで変数をHttpResponseに渡すことで、画面表示することが可能です。

テンプレートを作成

次にテンプレートを作成していきます。

テンプレートではHTMLやCSSを記載することで様々なコンテンツを表示することが可能です。

まだ、HTMLとCSSを学習されていない方は別途、学習を進めてみてください。

それでは作成したアプリディレクトリ配下にtemplatesディレクトリを作成します。

続いてtemplatesディレクトリ配下にhome.htmlを作成してください。

作成後、home.htmlを編集します。

次にhome.htmlで記載した{{ title }}と{{ content }}に値を渡すようにviews.pyを編集します。

from django.shortcuts import render
from django.http import HttpResponse
from django.template import context, loader
# Create your views here.

def home(request):
    template = loader.get_template('home.html')
    context = {
        'title': 'Welcom to LiSMOtech',
        'content': 'DjangoでWEBアプリケーションを開発',
    }
    return HttpResponse(template.render(context, request))

ファイルの編集が完了したら、ターミナルから「python manage.py runserver」を叩き、ブラウザを確認します。

以下のようにテンプレートとビューの連携ができていれば成功です！

まとめ

今回の記事ではビューとテンプレートを使用したレンダリングについて記載しました。

Djangoの基本ばかりでしたが、ベースを理解してこそのWEB開発だと思いますので、しっかり覚えておきましょう！

次回からはモデルも交えて紹介していきたいと思います！