Python/Django

Django – Template HTML表示

2026年7月15日 / tomita007

学習目標

前回は、URL・View・Templateの役割と、Djangoでページが表示される流れを学習しました。

今回は、Pythonで作成したデータをHTMLへ渡し、画面に表示する方法を学習します。

Webアプリケーションでは、商品一覧や会員一覧、お知らせなど、データベースやプログラムで作成した情報を画面へ表示する場面が数多くあります。

Djangoでは、このようなデータの受け渡しをTemplateと**render()**を利用して行います。

この章では、商品一覧ページを作成しながら、テンプレートの基本的な使い方を学習します。

render()とは

Djangoでは、ブラウザへTemplate（HTML）を表示するために render() 関数を使用します。これは、単にHTMLファイルを返すだけでなく、Pythonで作成したデータをテンプレートへ渡し、最終的なHTMLを生成する役割を持っています。

render() は、Djangoが備えているテンプレートエンジンという仕組みを利用しており、テンプレート内の {{ }} や {% %} を解析して、実際のデータを埋め込んだHTMLを作成します。

生成されたHTMLは HttpResponse としてブラウザへ返されるため、利用者は完成したWebページを閲覧できます。このように render() は、ViewとTemplateをつなぐ重要な役割を担っています。

render() の基本的な書き方は次のようになります。

return render(request, "index.html")

この場合は、index.htmlをブラウザへ表示します。さらに、Pythonで作成したデータも一緒に渡すことができます。

return render(request, "index.html", {
    "title": "商品一覧"
})

3番目の引数に辞書を指定すると、そのデータをTemplateで利用できるようになります。

テンプレート変数

Pythonから渡されたデータは、テンプレート変数としてHTML内で利用できます。

テンプレート変数は、 {{ 変数名 }} という書き方をします。

例えば、Pythonで側で以下のような状態をHTMLに渡した場合、Template側HTMLでは<h1>{{ title }}</h1>と書くことで商品一覧を表示できます。

# Python側

{
    "title": "商品一覧"
}
```

# HTML側

<h1>{{ title }}</h1>

このように、Python側で作成したデータをHTMLへ埋め込めることがテンプレート変数の特徴です。

商品一覧ページを作成する

今回は、Pythonで商品データを作成し、HTMLへ表示します。例えば、Viewで次のような商品一覧を用意します。

products = [
    {"name": "ノートパソコン", "price": 98000},
    {"name": "マウス", "price": 2500},
    {"name": "キーボード", "price": 4800},
]

この商品一覧をrender()でTemplateへ渡します。Templateでは、このデータを利用して商品一覧を表示します。

実際のWebアプリケーションでも、このようにPython側で作成したデータをHTMLへ渡す場面が数多くあります。

if文

Templateでは条件によって表示内容を変更できます。これにはifタグを使用します。基本的な書き方は次のとおりです。

{% if 条件 %}
    表示する内容
{% endif %}

例えば、商品が存在する場合だけ一覧を表示したいときは、以下のようにコーディングします。商品が存在しない場合は、else文を使用します。

# 基本的なif構文

{% if products %}
    商品があります。
{% endif %}

# elseを利用するパターン

{% if products %}
    商品があります。
{% else %}
    商品はありません。
{% endif %}

Pythonの文法をHTML内で記述できるものがTemplateになります。またTemplateでは{% %}を使用する点がpythonコードに追加されます。

for文

商品一覧のように複数のデータを表示する場合は、forタグを使用します。

基本的な書き方は次のとおりです。

{% for item in items %}
    {{ item }}
{% endfor %}

商品一覧では、productsのデータを順番に取り出して表示します。例えば、以下のように繰り返し表示したい場合はfor文を利用します。そうすることで商品名が順番に表示されます。

<ul>
{% for product in products %}
    <li>{{ product.name }}</li>
{% endfor %}
</ul>

# 価格も表示したい場合
<ul>
{% for product in products %}
    <li>{{ product.name }}</li>
    <li>{{ product.price }}</li>
{% endfor %}
</ul>

下の例のように書けば価格も表示できます。このようにfor文を利用すると、何件商品があっても同じHTMLを繰り返し表示できます。

render()・テンプレート変数・if・forの関係

今回学習した内容をまとめると、ページが表示される流れは次のようになります。

Viewでデータを作成する
render()でTemplateへ渡す
Template変数でデータを表示する
ifで条件分岐を行う
forで一覧表示を行う
ブラウザへ表示される

例えば商品一覧ページでは、

View
    ↓
productsを作成
    ↓
render()
    ↓
Template
    ↓
forで商品を繰り返し表示
    ↓
ブラウザ

という流れになります。

この仕組みは、ブログ記事一覧、会員一覧、お知らせ一覧など、多くのWebアプリケーションで利用されています。

まとめ

今回は、PythonからHTMLへデータを渡す方法を学習しました。Djangoでは、render() を使用してHTMLテンプレートを表示するとともに、Pythonで作成したデータをテンプレートへ渡すことができます。

テンプレートでは、{{ }} を使って渡されたデータを画面に表示できます。また、{% if %} を使うと条件に応じて表示内容を切り替えられ、{% for %} を使うとリストなどのデータを繰り返し表示できます。

これらを組み合わせることで、Pythonで処理したデータをHTMLへ反映し、利用者や状況に応じて表示内容が変化する動的なWebページを作成できるようになります。

ここまで学習すると、Pythonで作成した情報を自由に画面へ表示できるようになります。次回以降は、ユーザーから入力されたデータを受け取り、さらに実践的なWebアプリケーションを作成していきます。