Django 一覧画面（List）

2026年7月23日 / tomita007

学習目標

前回は、DjangoのORMを利用してデータベースのデータを取得・追加・更新・削除する方法を学習しました。今回は、そのORMで取得したデータをWebページへ表示する方法を学習します。

Djangoでは、Viewで取得したデータをTemplateへ渡し、HTML上で一覧表示します。この流れは、ほとんどすべてのWebアプリケーションで利用されます。

Webアプリでは、商品一覧や会員一覧、ブログ記事一覧、お知らせ一覧など、多くの画面で「一覧表示」の仕組みが利用されています。これらは表示するデータが異なるだけで、基本的な作り方は共通しています。

今回はTodo一覧画面を作成しながら、このような汎用的な一覧表示の作成方法を学びます。あわせて、データを取得するView、取得したデータを保持するQuerySet、そしてデータを画面へ表示するテンプレートの役割についても理解を深めていきます。

Viewでデータを取得する

一覧画面では、まずViewでデータベースからTodoを取得します。

前回学習したORMを利用すると、一覧表示はall()メソッドを利用して以下のように記述できます。

todos = Todo.objects.all()

取得したデータはtodosへ格納されますが、そのままではブラウザへ表示されません。Viewsでは変数todosへ格納された値をTemplateへ渡すために、render()を利用します。

return render(request, "todo_list.html", {
    "todos": todos
})

このようにすると、取得したTodo一覧をTemplateで利用できるようになります。

Viewの主な役割は、必要なデータを取得し、そのデータをTemplateへ渡すことです。Viewがデータベースなどから取得したデータをTemplateへ渡すことで、ブラウザに画面を表示できるようになります。

QuerySetとは

ORMでデータを取得すると、**QuerySet（クエリセット）**というオブジェクトが返されます。

例えば、以下のall()メソッドで取得したtodosはQuerySetです。

todos = Todo.objects.all()

QuerySetには、データベースから取得した複数のデータがまとめて保存されています。例えば、「買い物」「レポート提出」「部屋の掃除」という3件のTodoが登録されていれば、QuerySetにはその3件のデータが格納されます。

QuerySetはリストのように繰り返し処理ができるため、Templateでは**{% for %}**タグを使用してデータを1件ずつ取り出し、一覧として表示できます。

QuerySetをTemplateへ渡す

Viewで取得したQuerySetは、render() の3番目の引数に指定してTemplateへ渡します。

return render(request, "todo_list.html", {
    "todos": Todo.objects.all()
})

例えば、Todo.objects.all()で取得したデータを"todos"というキーで渡すと、Templateではtodosという変数名で利用できます。つまりTemplate側では以下のようになります。

{{ todos }}

しかし、QuerySetには複数のデータが格納されているため、{{ todos }} のようにそのまま表示することは一般的ではありません。

代わりに、**{% for %}**タグを使用して1件ずつデータを取り出し、一覧として表示します。このように、ViewからTemplateへデータを渡し、Template側で繰り返し表示することが、一覧画面を作成する基本的な流れです。辞書のキーであるtodosが、Templateで使用する変数名になります。

テンプレートで一覧表示する

Templateでは、前回学習したforタグを利用します。

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

{% for todo in todos %}
    {{ todo.title }}
{% endfor %}

このように書くと、QuerySetに保存されているTodoを1件ずつ取り出し、タイトルを表示できます。

さらに、

<ul>
{% for todo in todos %}
    <li>{{ todo.title }}</li>
{% endfor %}
</ul>

とすると、HTMLのリストとして一覧表示できます。

ModelのFieldも同じように表示できます。

例えば、

{{ todo.content }}
{{ todo.deadline }}
{{ todo.completed }}

と記述すると、それぞれの値を表示できます。

データが存在しない場合

一覧画面では、データが登録されていない場合もあります。

その場合は、ifタグを利用して表示を切り替えることができます。

{% if todos %}
    一覧を表示
{% else %}
    Todoは登録されていません。
{% endif %}

このようにすると、データがない場合でも分かりやすい画面になります。

実際のWebアプリケーションでも、このような処理はよく利用されます。

Todo一覧画面を完成させる

ここまで学習した内容を組み合わせると、Todo一覧画面が完成します。

処理の流れは次のようになります。

ブラウザから一覧ページへアクセスする
Viewが実行される
ORMでTodoを取得する
QuerySetが返される
render()でTemplateへ渡す
TemplateがTodoを繰り返し表示する
ブラウザへ一覧画面が表示される

この流れは、Djangoで一覧画面を作成するときの基本的な仕組みです。

一覧画面の仕組み

一覧画面では、次のような流れで処理が行われます。

ブラウザ
    ↓
View
    ↓
Todo.objects.all()
    ↓
QuerySet
    ↓
render()
    ↓
Template
    ↓
forで一覧表示
    ↓
ブラウザ

この流れを理解しておくと、商品一覧や記事一覧など、さまざまな一覧画面を作成できるようになります。

まとめ

Djangoでは、ViewでORMを利用してデータベースからデータを取得します。例えば、objects.all()を実行すると、取得したデータはQuerySetというオブジェクトとして返されます。QuerySetには複数のデータがまとめて格納されており、そのまま**render()を使ってテンプレートへ渡すことができます。テンプレートでは、{% for %}タグを使用してQuerySetのデータを1件ずつ繰り返し表示します。また、{% if %}**タグを利用すると、データが1件も存在しない場合に「データがありません」といった別のメッセージを表示することもできます。

ここまでで、データベースに登録されたTodoをWebページへ一覧表示できるようになりました。次回は、新しいTodoをWebページのフォームから登録する方法を学習していきます。