学習目標
前回は、GETパラメータとicontainsを利用してTodoの検索機能を実装しました。しかし、登録されるTodoの数が増えてくると、すべてのデータを1ページに表示することは難しくなります。
例えば、Todoが100件や1000件になると、一覧画面が長くなり、目的のデータを探しにくくなります。そこで利用するのがページネーションです。ページネーションとは、大量のデータを複数のページに分割して表示する仕組みです。
この章では、Djangoの**Paginator**を利用してTodo一覧をページごとに表示する方法を学習します。実装後は、「1」「2」「3」のようなページ番号を使って、必要なデータへ簡単に移動できるようになります。
ページネーションとは
ページネーションとは、大量のデータを複数のページに分割して表示する機能です。例えば、Todoが50件ある場合、1ページに10件ずつ表示すると、1ページ目にはTodo 1〜10、2ページ目にはTodo 11〜20というように分けて表示できます。
ページネーションを利用することで、1画面に大量のデータを表示する必要がなくなり、画面が見やすくなります。また、必要なデータを探しやすくなり、表示するデータ量を減らすことでページの読み込み速度向上にもつながります。ブログ記事一覧や商品一覧など、多くのWebサイトで利用されている基本的な機能です。
Paginatorとは
Djangoには、ページネーションを簡単に実装するための**Paginator**が用意されています。Paginatorを利用すると、データを指定した件数ごとに分割したり、現在表示しているページの情報を取得したりできます。
また、次のページや前のページが存在するかどうかも簡単に確認できます。ページ番号の計算やデータの切り分け処理を自分で作成する必要がないため、少ないコードで効率よくページネーション機能を実装できます。大量のデータを扱うWebアプリケーションでは、Paginatorは非常に便利な機能です。
Paginatorの基本的な使い方
Paginatorを利用するには、まずDjangoからインポートします。from django.core.paginator import Paginatorと記述することで使用できるようになります。
次に、ページ分割したいデータを指定します。例えば、Todo.objects.all()で取得したTodo一覧をPaginatorへ渡します。paginator = Paginator(todos, 10)のように記述すると、Todoデータを1ページあたり10件ずつ表示する設定になります。
ここで、todosは分割する対象のデータ、10は1ページに表示する件数を表します。このようにPaginatorを利用すると、表示件数を指定するだけで簡単にデータをページごとに分割できます。
ページ番号を取得する
ページネーションでは、表示するページ番号をGETパラメータで管理します。例えば、http://localhost:8000/?page=2というURLの場合、「2ページ目を表示する」という意味になります。
Viewでは、page_number = request.GET.get(“page”)と記述することで、URLからページ番号を取得できます。取得したページ番号をPaginatorへ渡すことで、指定されたページのデータを取得できます。
例えば、page_obj = paginator.get_page(page_number)と記述すると、現在表示するページの情報を取得できます。このようにGETパラメータを利用することで、ページ移動を簡単に管理できます。
Templateで一覧表示する
Paginatorから取得したデータは、通常のQuerySetと同じようにfor文を使ってTemplateで表示できます。例えば、以下のように表現できます。
{% for todo in page_obj %}
{{ todo.title }}
{% endfor %}{% for todo in page_obj %}と記述すると、現在表示しているページに含まれるTodoを1件ずつ取り出して表示できます。ページネーションでは、すべてのTodoデータを表示するのではなく、指定したページ分のデータだけが取得されます。そのため、データ数が多い場合でも画面に表示する量を制限でき、見やすい一覧画面を作成できます。
ページ番号を表示する
ページネーションでは、ユーザーがページを移動できるようにリンクを作成します。例えば、「1」「2」「3」や「次へ」「前へ」といったページ移動用のボタンを表示します。
Templateでは、page_objが持つページ情報を利用して、現在のページ番号や移動可能なページがあるかを確認できます。
例えば、page_obj.has_nextを利用すると次のページが存在するか確認でき、page_obj.has_previousでは前のページが存在するか確認できます。これらの情報を利用することで、ユーザーが必要なページへ簡単に移動できるページネーション機能を作成できます。
検索機能との組み合わせ
前回作成した検索機能とページネーションは、組み合わせて利用することができます。例えば、http://localhost:8000/?keyword=買い物&page=2のように、URLへ検索条件と表示するページ番号を同時に指定できます。
この場合、keywordで検索対象を指定し、pageで表示するページを管理します。実際のWebアプリケーションでは、検索結果が大量になることも多いため、検索機能とページネーションを組み合わせて利用する場面がよくあります。
これにより、条件に一致したデータを見やすい件数ごとに表示でき、ユーザーが必要な情報を効率よく探せるようになります。
ページネーションの流れ
ページネーション処理の流れは次のようになります。
ブラウザ
↓
?page=2
↓
View
↓
Paginator
↓
指定ページのデータ取得
↓
Template
↓
一覧表示
↓
1 2 3 ...
この仕組みにより、大量のデータでも見やすい一覧画面を作成できます。
まとめ
この章では、Todo一覧にページネーション機能を追加する方法を学習しました。ページネーションとは、大量のデータを複数のページに分割して表示する仕組みです。Djangoでは**Paginatorを利用することで、簡単にデータをページごとに分けて表示できます。
Paginatorでは1ページあたりの表示件数を指定でき、GETパラメータを利用して表示するページを管理します。また、get_page()**を使用すると、指定されたページのデータを簡単に取得できます。さらに、ページ番号や「次へ」「前へ」といった移動リンクを作成することで、大量のデータでもユーザーが目的の情報を探しやすい一覧画面を作成できます。
ここまでで、検索やページ分割に対応した実用的なTodo一覧画面が完成しました。次回はいよいよ最後の仕上げとして、作成したDjangoアプリケーションを公開するためのデプロイについて学習していきます。