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

生徒

「Flaskで作ったブログで、投稿を日付の新しい順に並べたり、ページごとに分けたりできますか？」

先生

「はい、それは『ソート（並び替え）』と『ページネーション（ページ分け）』という技術を使うことで実現できます。」

生徒

「なんだか難しそうですが、プログラミング初心者でもできますか？」

先生

「もちろんです！わかりやすく説明しますので、一緒に見ていきましょう。」

1. Flaskとは？なにができるの？

Flask（フラスク）は、Pythonというプログラミング言語で作られた、軽量なウェブアプリケーションの開発ツールです。ブログや掲示板、日記アプリなどを作るときに使われます。HTMLというウェブページの仕組みと組み合わせることで、誰でも簡単にウェブサイトを作ることができます。

2. ソート（並び替え）とは？

ソートとは、データの順番を整えることです。たとえば、ブログの記事を「新しい順」や「古い順」に並べたり、タイトルのあいうえお順にしたりできます。

パソコンの中にある「日付順」や「名前順」で並べ替える機能と同じです。Flaskでもそれをプログラムでできます。

3. ページネーション（ページ分け）とは？

ページネーションとは、たくさんの情報を「1ページに全部表示せず、分けて表示すること」です。

たとえば、100件のブログ記事があると、1ページに10件ずつ表示して「次へ」や「前へ」のボタンで移動できるようにします。インターネットでよく見るページ切り替え機能です。

4. サンプル：投稿を日付でソートして表示

まずは、記事を日付の「新しい順」に並べて表示する方法を見てみましょう。


from flask import Flask, render_template
from datetime import datetime

app = Flask(__name__)

posts = [
    {"title": "記事1", "date": datetime(2024, 7, 10)},
    {"title": "記事2", "date": datetime(2025, 1, 5)},
    {"title": "記事3", "date": datetime(2023, 12, 15)}
]

@app.route("/")
def index():
    sorted_posts = sorted(posts, key=lambda x: x["date"], reverse=True)
    return render_template("index.html", posts=sorted_posts)

sorted()という関数を使って、記事の「日付（date）」を基準に新しい順（reverse=True）で並べ替えています。

5. サンプル：ページネーション（ページ分け）の実装

次に、ブログ記事を「1ページに2件ずつ」表示するようにしてみましょう。


from flask import request

@app.route("/page")
def page():
    page = request.args.get("page", default=1, type=int)
    per_page = 2
    start = (page - 1) * per_page
    end = start + per_page
    paginated = posts[start:end]
    return render_template("page.html", posts=paginated, page=page)

request.args.get()を使って、URLの「?page=2」のような番号を受け取ります。たとえば「page=3」なら3ページ目です。

startとendを計算して、必要な記事だけ取り出して表示します。

6. HTML側のページネーション表示

画面に「前へ」「次へ」のボタンをつけるには、HTML側でこうします。


<h2>記事一覧（{{ page }}ページ目）</h2>
<ul>
    {% for post in posts %}
        <li>{{ post.title }} - {{ post.date.strftime('%Y-%m-%d') }}</li>
    {% endfor %}
</ul>
<a href="/page?page={{ page - 1 }}">前へ</a> | <a href="/page?page={{ page + 1 }}">次へ</a>

これはテンプレートエンジン（Flaskで使うHTMLに似た構文）で、{{ }}で変数を表示し、{% %}で繰り返し処理をしています。

7. URLに合わせてページを切り替える方法

ページを切り替えるには、URLに「?page=2」のように数字を入れます。

たとえば：


http://localhost:5000/page?page=1
http://localhost:5000/page?page=2

このURLの数字に応じて、表示される記事が切り替わるしくみです。

8. こんな時どうする？初心者がつまずきやすいポイント

ページの番号が「マイナス」や「0」だとエラーになることがあるので注意しましょう。
ソートはPythonのsorted()で簡単にできますが、辞書形式のデータではキー名に注意が必要です。
ページネーションは、表示件数と計算方法（startとendの計算）を間違えると同じ記事が重複したり、抜けたりします。

9. ソートやページネーションはなぜ必要？

もしブログに1000件の記事があって、それをすべて1ページに表示してしまったら、画面がとても重くなってしまいます。読み込みも遅くなってしまい、見る人にとっても使いづらくなります。

そこで、表示件数を絞ってページ分けすることで、スムーズに使えるようになります。また、新しい記事を上に表示することで、読者にとっても分かりやすくなります。

まとめ

Flaskでブログや一覧ページを作成するときに欠かせないのが、ソート（並び替え）とページネーション（ページ分け）の仕組みです。今回の記事では、投稿の並び順を自由に変更したり、たくさんの投稿を複数ページに分けて表示したりする方法を学びました。とくに、記事数が増えてくると「新しい投稿を上に表示したい」「10件ずつに区切って見やすくしたい」と感じることが多くなります。そんなときに活躍するのが今回取り上げたソートとページネーションであり、Flaskのシンプルな記述と組み合わせることで、初心者でも扱いやすい形で実装できます。ソートではPythonのsorted関数を使い、辞書型データの特定のキーを基準に並べ替えることができました。またreverse=Trueを使うことで、投稿を新しい順に揃えることも簡単でした。これはブログだけでなく、日記、掲示板、買い物リストなど、あらゆるアプリで利用される基本的な手法です。一方、ページネーションは、request.args.getを使ってページ番号を取得し、「start = (page - 1) * per_page」という計算で必要な部分だけを切り取る仕組みを学びました。この考え方は、実際のWebアプリの多くで採用されている方法であり、データを効率的に扱ううえで非常に重要です。以下に、今回の内容をもう一度整理して体験できるサンプルコードを記載しています。このコードを試していただくことで、ソートとページネーションがどのように組み合わされて動作しているかを具体的に確認できるでしょう。学んだ内容をそのまま自分のアプリに応用できる構成となっているため、ぜひ挑戦してみてください。

ソートとページ分けをまとめたサンプルコード


from flask import Flask, render_template, request
from datetime import datetime

app = Flask(__name__)

posts = [
    {"title": "にっき1", "date": datetime(2024, 7, 10)},
    {"title": "にっき2", "date": datetime(2025, 1, 5)},
    {"title": "にっき3", "date": datetime(2023, 12, 15)},
    {"title": "にっき4", "date": datetime(2024, 3, 8)},
    {"title": "にっき5", "date": datetime(2024, 10, 1)},
]

@app.route("/")
def top():
    sorted_posts = sorted(posts, key=lambda x: x["date"], reverse=True)
    page = request.args.get("page", default=1, type=int)
    per_page = 2
    start = (page - 1) * per_page
    end = start + per_page
    paginated = sorted_posts[start:end]
    return render_template("index.html", posts=paginated, page=page)

このサンプルにより、投稿はまず日付で並び替えられ、そのあと1ページあたり2件ずつに区切られて表示されます。実際にブラウザで「/?page=2」などとアクセスを変えることで、ページごとに違う投稿が表示され、ページネーションが正しく動作していることが分かります。また、ソートとページネーションは同時に活用されることが多く、たとえば「最新の記事5件を1ページ目に表示」「過去の記事は2ページ目以降へ」などの仕組みを自然に構築できます。さらに応用として、タイトル順で並び替える、投稿者名でソートする、1ページの表示件数を切り替えるといった拡張も簡単に行えます。Flaskの柔軟な仕組みとPythonの自由度の高いデータ操作を組み合わせることで、初心者でも本格的な一覧ページを作りやすくなります。今回の内容を押さえておけば、ブログや掲示板アプリの基盤をしっかり作ることができ、ソートやページネーションの概念が自然と身につくでしょう。

先生と生徒の振り返り会話

生徒

「ソートとページネーションって、最初は難しそうに感じましたが、しくみが分かると意外とシンプルでした！」

先生

「投稿を並べる順番やページ分けの考え方はWebアプリではとてもよく使われるので、覚えておくと役立ちますよ。Flaskなら少ないコードで実現できるのも魅力ですね。」

生徒

「sortedで並び替えられることや、startとendの計算でページ分けできることがわかってよかったです。ブログ以外でも使ってみたいです！」

先生

「その意気です。応用すれば、検索結果のページ分けやランキング一覧の作成など、いろいろな場所で活用できますよ。」

生徒

「次はボタンやデザインも付けて、もっと本格的なブログページにしたいです！」

先生