Flask入門｜Jinja2で繰り返し処理を使ってリスト・表を表示する方法【チャプター2-05】
一つ前のページではrender_template関数について学習しました。
今回は テンプレートと繰り返し処理 について見ていきましょう。
Chapter１：Flask入門編
Chapter２：Jinja2入門編
・Chapter2-1：Jinja2とは何か｜テンプレートエンジン入門
・Chapter2-2：テンプレートの継承を理解しよう
・Chapter2-3：url_for関数を理解しよう
・Chapter2-4：render_template関数を理解しよう
・Chapter2-5：テンプレートと繰り返し処理 ◁今回はここ
・Chapter2-6：テンプレートと分岐処理
Chapter３：フィルター編
Chapter４：フォーム編
Chapter５：データベース編
Chapter６：Flaskの便利機能編
Chapter７：アプリ開発編
FlaskではHTMLテンプレートの中にPythonの値を埋め込むことで、柔軟なWebページを作成することができます。
たとえば、商品一覧やユーザーリストなど、同じパターンの情報を繰り返し表示したい場面は多くあります。こうしたときに便利なのが、テンプレート内での繰り返し処理です。
Pythonのfor文と似た文法で、Jinja2ではHTMLの中に自然にループを組み込むことができます。この章では、その書き方や使い方を丁寧に学んでいきましょう。
<<前のページ
Flaskの記事一覧
次のページ>>
テンプレート内でのfor文の役割をわかりやすく解説
Flaskで使われているテンプレートエンジン「Jinja2」では、HTMLの中でPythonのような繰り返し処理を行うことができます。
これにより、たとえば「商品の一覧を表示したい」「ユーザーの投稿を順番に出力したい」といった場面で、同じパターンのHTMLを何度も書かずにすみます。
Pythonにもfor文がありますが、Jinja2ではそれとよく似た構文を使って、リストや辞書などのデータを一つずつ取り出して表示することが可能です。
Webアプリケーションでは、動的に増減するデータを扱うことが多いため、テンプレート内での繰り返し処理はとても重要なスキルになります。
{% for item in items %} の基本的な使い方
Jinja2で繰り返し処理を行うときは、以下のような構文を使います。
{% for 要素 in データ %}
繰り返し中に表示したいHTMLなど
{% endfor %}たとえばPythonのリストのような「複数の要素が入ったデータ」をテンプレートに渡した場合、それを一つずつ取り出してHTMLの中で使うことができます。
例えば、以下のコードを見てみましょう。
<ul>
{% for fruit in fruits %}
<li>{{ fruit }}</li>
{% endfor %}
</ul>このコードは、Pythonファイル内の fruits という変数に入っているデータ（例えば["りんご", "みかん", "バナナ"]など）を一つずつ取り出し、それを <li> タグで囲んでリスト表示する処理です。
テンプレートとfor文の使用例｜リスト・テーブルの繰り返し表示を実装しよう
繰り返しの使用例をふたつ紹介します。
リストを繰り返し処理でHTMLに表示する方法
それでは実際に、Pythonからテンプレートにデータを渡して、HTML上にリストとして表示してみましょう。
ここでは「果物の名前」を一覧表示する例を使って説明します。
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/fruits") # もしこのURLにアクセスされたら
def show_fruits():
fruits = ["りんご", "みかん", "バナナ"]
return render_template("fruits.html", fruit_box=fruits) # fruits.htmlにfruit_boxを渡す
if __name__ == "__main__":
app.run(debug=True)このコードではfruitsというリストを作り、それをテンプレートに渡しています。
render_template関数を使ってfruits.htmlを呼び出し、その中でfruitsのデータを使えるようにしています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>果物一覧</title>
</head>
<body>
<h1>果物一覧</h1>
<ul>
{% for fruit in fruit_box %}
<li>{{ fruit }}</li> <!-- fruit の中身を表示 -->
{% endfor %}
</ul>
</body>
</html>このテンプレートでは、Jinja2の{% for %}構文を使って、fruitsリストの中身を一つずつ取り出し、それを <li> タグの中に表示しています。
繰り返し処理の構文に慣れるには、このようなシンプルな例から始めるのが効果的です。
データを表形式で繰り返し出力する方法（tableタグと組合せ）
少し実践的な例として、データを表（テーブル形式）で表示する方法を紹介します。
たとえば、ユーザーの名前や年齢など、複数の情報を整理して見せたいときに便利です。
from flask import Flask, render_template
app = Flask(__name__)
@app.route("/users") # もしこのURLにアクセスされたら
def show_users():
users = [ # 辞書の作成
{"name": "佐藤", "age": 25},
{"name": "鈴木", "age": 30},
{"name": "高橋", "age": 22}
]
return render_template("users.html", user_list=users) # users.htmlにuser_listを渡す
if __name__ == "__main__":
app.run(debug=True)ここでは「ユーザー情報」のリスト（辞書のリスト）をテンプレートに渡しています。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ユーザー一覧</title>
</head>
<body>
<h1>ユーザー一覧</h1>
<table border="1">
<tr>
<th>名前</th>
<th>年齢</th>
</tr>
{% for user in user_list %}
<tr>
<td>{{ user.name }}</td> <!-- 名前を表示 -->
<td>{{ user.age }}</td> <!-- 年齢を表示 -->
</tr>
{% endfor %}
</table>
</body>
</html>このように各ユーザーの辞書から name と age を取り出して <td> 要素に表示することで、見やすいテーブルを作成できます。
テンプレートの中で辞書の要素にアクセスする場合も、Pythonと同じように「.（ドット）記法」で書くことができます。
まとめ
Jinja2のテンプレートでは{% for %} を使うことで、リストや辞書のデータをHTML上に繰り返し表示することができます。
Pythonでおなじみのfor文に似ており、直感的に使えるのが特徴です。
リストをリストタグで表示したり、複雑な辞書データを表形式に整えたりと、繰り返し処理はWebページ作成において非常に重要な要素です。しっかり理解しておきましょう。
練習問題：Jinja2のfor文を使って繰り返し表示しよう
今回はPythonで定義した「日本の都道府県」のリストを、HTMLの中で繰り返し表示する処理を作成してください。
FlaskのPythonコードはすでに用意されており、あなたが作成するのはテンプレート（HTMLファイル）の部分だけです。
Jinja2のfor文を使って、リストに入っている都道府県名を順番に表示してください。
表示形式は番号付きリスト（<ol>タグ）を使用します。
この問題の要件
以下の要件に従ってコードを完成させてください。
- テンプレートファイル
prefectures.htmlを作成すること - HTMLの
<body>内に<h1>タグで「日本の都道府県（北から順）」と表示すること - その下に
<ol>タグ（番号付きリスト）を使い、prefecturesに入っている都道府県名をliタグで1つずつ表示すること - Jinja2の
for文（{% for ○ in △ %}）を使って繰り返し処理を行うこと - 繰り返し処理の中で
{{ ○ }}を使って値を表示すること
ただし、Flaskアプリ内で以下のようなPythonコードが実行されることを前提とする。
# Flask本体とテンプレート描画用の関数を読み込む
from flask import Flask, render_template
# Flaskアプリケーションのインスタンスを作成
app = Flask(__name__)
# "/prefectures" というURLにアクセスされたときの処理
@app.route("/prefectures")
def show_prefectures():
# 都道府県名をリストで定義（今回の記事で学習した「繰り返し処理」で使うデータ）
prefectures = ["北海道", "青森県", "岩手県", "宮城県", "秋田県"]
# テンプレートにデータを渡してHTMLを表示
return render_template("prefectures.html", prefectures=prefectures)
# アプリを直接実行する場合はこの部分が動作する
if __name__ == "__main__":
# デバッグモードでアプリを起動
app.run(debug=True)また、以下のような実行結果となるコードを書くこと。
日本の都道府県（北から順） 1. 北海道 2. 青森県 3. 岩手県 4. 宮城県 5. 秋田県
このいと感じる場合は、先に正解のコードと解説を見て内容を理解するようにしましょう。
正解コード
例えば、以下のようなプログラムが考えられます。
- 正解コード
-
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>都道府県一覧</title> </head> <body> <h1>日本の都道府県（北から順）</h1> <ol> {# 今回の記事で学習した for文を使ってリストを繰り返し表示します #} {% for p in prefectures %} <li>{{ p }}</li> {# 変数pの中身（都道府県名）を表示します #} {% endfor %} </ol> </body> </html>
<<前のページ
Flaskの記事一覧
次のページ>>
FAQ｜Jinja2で繰り返し処理を使うときによくある質問
- Q1. for文で繰り返す対象が空のときはどうなりますか？
-
テンプレート内のfor文では、繰り返し対象のリストが空だと何も表示されません。空の場合にメッセージを表示したいときは、
{% else %}を使うことで対応できます。
- Q2. for文の中でループの回数や順番を取得する方法はありますか？
-
はい、Jinja2では
loop.indexやloop.index0を使うことで、1から始まる番号や0から始まる番号を取得できます。他にもloop.firstやloop.lastといった便利な変数もあります。
- Q3. ネストしたfor文（入れ子構造）はテンプレートでも使えますか？
-
可能です。Jinja2ではfor文を入れ子にして、2重や3重の繰り返し処理も実現できます。ただし、可読性を保つためにインデントを整えることが重要です。
質問用コンタクトフォーム
この記事を書くにあたりAIを活用しています。
人間の目による確認も行っていますが、もし間違い等ありましたらご指摘頂けると大変助かります。