先生と生徒の会話形式で理解しよう

生徒

「Djangoって聞いたことはあるんですが、画面に文字を表示する仕組みがよくわかりません…」

先生

「Djangoでは、画面に表示する部分をテンプレートという仕組みで作ります。HTMLを使って、見た目を担当する場所ですね。」

生徒

「HTMLだけでいいんですか？プログラムは書かなくて大丈夫なんでしょうか？」

先生

「基本はHTMLですが、Django専用の書き方を少しだけ使います。ゆっくり説明しますよ。」

1. Djangoテンプレートとは何か

Djangoテンプレートとは、Webページの見た目を作るための仕組みです。普段インターネットで見ているページは、文字や画像、レイアウトで構成されていますが、その土台となるのがHTMLです。Djangoでは、このHTMLをそのまま使いながら、プログラムの結果を画面に表示できます。

たとえば、名前を表示するページを考えてみましょう。毎回HTMLを手で書き直すのは大変ですが、Djangoテンプレートを使えば、決まった形のHTMLに対して、あとから文字を差し込めます。これは、手紙のひな形に名前だけを書き足すようなイメージです。

2. テンプレートファイルの基本構造

Djangoのテンプレートは、.htmlという拡張子のファイルで作ります。中身は普通のHTMLとほとんど同じなので、パソコンに触ったことがない人でも、文章を書く感覚で理解できます。

以下は、もっともシンプルなDjangoテンプレートの例です。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Djangoテンプレート入門</title>
</head>
<body>
    <h1>はじめてのDjangoテンプレート</h1>
    <p>ここに文章が表示されます。</p>
</body>
</html>

この時点では、ただのHTMLと同じです。まずは「画面に表示する場所」と考えてください。

3. テンプレートで使う{{ 変数 }}

Djangoテンプレートの特徴は、{{ }}という記号を使って、プログラムから渡された値を表示できる点です。この中に書かれた名前を変数と呼びます。変数とは、文字や数字を一時的に入れておく箱のようなものです。

たとえば、名前を表示するテンプレートは次のように書けます。


<h1>こんにちは、{{ name }} さん</h1>

この{{ name }}の部分に、Pythonのプログラムから文字が渡されると、その内容が画面に表示されます。

4. ビューからテンプレートへ値を渡す

テンプレートだけでは値は表示されません。Djangoではビューという場所から、テンプレートにデータを渡します。ビューとは、画面に何を表示するかを決める係です。

以下は、とても簡単なビューの例です。


from django.shortcuts import render

def hello(request):
    data = {
        "name": "太郎"
    }
    return render(request, "hello.html", data)

ここでは、nameという箱に「太郎」という文字を入れて、テンプレートに渡しています。テンプレート側では、そのまま表示される仕組みです。

5. {% if %}で条件によって表示を変える

Djangoテンプレートでは、条件によって表示内容を変えることもできます。これは「もし〜なら」という考え方で、日常生活でもよく使っています。

たとえば、ログインしている人だけにメッセージを出す場合は、次のように書きます。


{% if user %}
<p>ようこそ、{{ user }} さん</p>
{% else %}
<p>ゲストとして閲覧しています</p>
{% endif %}

{% %}で囲まれた部分は、Djangoテンプレート専用の命令です。HTMLとは違う役割を持つ、と覚えておけば大丈夫です。

6. {% for %}で繰り返し表示する

同じ形のデータを何度も表示したいときは、forを使います。これは、名簿を上から順番に読み上げるようなイメージです。

以下は、名前の一覧を表示する例です。


<ul>
{% for name in names %}
    <li>{{ name }}</li>
{% endfor %}
</ul>

Python側で複数の名前を渡すと、自動的に同じHTMLが繰り返し作られます。手作業で書く必要がないので、とても便利です。

7. テンプレートの共通化とextends

Webサイトでは、どのページも同じヘッダーやフッターを使うことが多いです。Djangoテンプレートでは、共通部分をまとめて管理できます。

まず、共通の土台となるテンプレートを作ります。


<!DOCTYPE html>
<html>
<body>
    <header>共通ヘッダー</header>
    {% block content %}{% endblock %}
    <footer>共通フッター</footer>
</body>
</html>

そして、別のテンプレートでそれを利用します。


{% extends "base.html" %}

{% block content %}
<h1>ページごとの内容</h1>
{% endblock %}

この仕組みによって、見た目をそろえたまま、内容だけを自由に変えられます。初心者でも管理しやすい構造です。

Djangoテンプレート入門｜初心者でも理解できる基本構造と仕組み