【Django】views.pyから HTMLへ値を受け渡す方法

passing valuesDjango

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

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

「views.pyからHTMLテンプレートへ値を渡したい!」

「HTMLテンプレートで動的な値を表示したい!」

「HTMLとPythonのコードを連動させるにはどうするの?」

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

  • Djangoが採用しているMTVモデルについて
  • 【実例】views.pyから値をHTMLへ渡し、表示する

Djangoフレームワークでは、MTVモデル(後述)が採用されており、高機能なHTMLファイルを扱うことができます。

その機能により、Pythonコードで処理した値をHTML上に表示することができます。

まずはその仕組みをご理解頂くために、Djangoが採用しているMTVモデルについて簡単にご説明します。

その上で、Pythonで書かれたviews.pyからHTMLへ値を渡す方法へ進みましょう。

当記事の内容を理解することで、Djangoの特徴をより理解でき、よりWebアプリらしいページを作ることができます。

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

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

特徴は以下の通り。

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

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

>>詳細はこちら<<

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

MTVとは?Templateとは?

i got it!

Djangoフレームワークは、MTVモデルと呼ばれるModelTemplateViewにより組み立てられています。

Model(モデル)は、データベースとのやり取りをします。主にmodels.py内にその内容を記述します。

Template(テンプレート)は、views.pyより指示されたHTMLと値を紐づけてブラウザへ表示します。主に、settings.pyで指定した「templates」フォルダ内に.htmlファイルとして内容を記述します。

View(ビュー)は、ユーザーからのリクエストを受け取り、ModelやTemplateとのやり取りを行う中枢部分です。主に、views.py内にその内容を記述します。

MTVのイメージ図は下記の通りです。

当記事では、このMTV間のうちView(ビュー)とTemplate(テンプレート)間で値を受け渡す方法、を解説をしていきます。

次章より、実例として動的なページを作っていきましょう。

実例を通じて達成すること

Pythonのrandomモジュールを使って、ページを開くたびにランダムな数値が表示されるページを作ります。

Pythonファイル「views.py」から値が渡されることを実感してみましょう!

表示されるページの完成イメージはこちら↓

シンプルですが、リロードするたびに数字が自動的に変わっていきます

2つの重要なポイント

ビューからテンプレートへ値を渡す際のポイントは2つあります。

  1. views.pyからは辞書型のオブジェクトで値を渡す
  2. HTMLテンプレートえdでは、{{ 辞書のキー }}とすることで、辞書の値を受け取り表示ができる

言葉だけではわかりにくいので具体的に見ていきます。

1.辞書型オブジェクトで値を渡す

DjangoでViewからTemplateへ値を渡したいときは、「コンテキスト」を渡します。

コンテキストは、辞書型のオブジェクトで、下記の構造をしています。

{
  <キー(HTMLファイル内で変数名として使用)>: <値(ブラウザで実際に表示される)>
}

ビュー関数を使っている場合、renderメソッドの中でコンテキストを引数として渡します。

return render(request, テンプレート名, コンテキスト)

ビュークラスを使用している場合は、get_context_dataメソッド内で新たなコンテキストを返します。

def get_context_data(self, *args, **kwargs):
     context = super().get_context_data(*args, **kwargs)
     context["キー"] = 値
     return ctx

ここではビュー関数による方法で話を進めていきます。ビュークラスがわからない方もご心配なく!

2.HTMLテンプレートでコンテキストを受け取り表示する

HTMLテンプレートで、コンテキストを受け取り表示する方法は下記の通りです。

{{ コンテキストのキー }}

渡されたコンテキストのキーを {{ }}で囲うことで値を表示することができます。

具体的にコード全体を見ていきます。

【実例コード】views.py

値を渡すビュー関数「nippoDetailView」は下記のコードとなります。

from django.shortcuts import render
from random import randint

def nippoDetailView(request):
    template_name="nippo/nippo-detail.html"
    random_int = randint(1,10)
    ctx = {
        "random_number": random_int,
    }
    return render(request, template_name, ctx)

この場合、コンテキストは、下記のとおりとなりました。

random_int = randint(1,10)
ctx = {
    "random_number":random_int,
}
  • キーが「random_number
  • が「randint(1,10)」で計算されたランダムな数値になります

【実例コード】HTMLテンプレート

値を受け取り表示するテンプレート(「templates > nippo > nippo-detail.html」)のコードです。

<!doctype html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Views.pyからHTMLへ</title>
  </head>
  <body>
    <h1>今日のラッキーナンバーはこちら→ {{random_number}}</h1>
  </body>
</html>

h1タグ内でコンテキストのキー「random_number」を受け取り、値を表示します

{{ random_number }}

ここでは割愛しますが、urls.pyの設定も忘れずに!

...
from .views import nippoListView, nippoDetailView
urlpatterns = [
  ...,
  path("detail/", nippoDetailView)
]

いざ、アクセス!

アクセスしてみます。

http://localhost:8000/nippo/detail/

無事アクセスができました。

また、リロードする度に新たな数値が表示されます。

まとめ

当記事の内容をまとめます。

Djangoフレームワークは、MTVモデルと呼ばれるModel、Template、Viewにより組み立てられています。

このMTVモデルにより、より高機能なWebページとなっています。

実際にviews.pyから値を渡しHTMLでの表示までをまとめると下記の通りです。

views.py内のビュー関数では、コンテキストを{ “キー” : “表示したい値” }として渡します。

return render(request, HTMLファイル名、コンテキスト)

テンプレートファイルでは、ビューから渡されたコンテキストのキーから値を受け取り、表示します。

{{ コンテキストのキー }}

仕組みを図解で表すと下記の通りです。

以上で、ビューからテンプレートへ値を渡す方法の解説を終わります。

次回は、views.pyで生成する値ではなく、URLとして入力された値を受け取る方法を解説します。

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

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

という方は必見です!

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

関連書籍

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