知識の枝

"All is well"

Django テンプレート内でrangeを使ってfor

約150日前 2021年6月29日22:58
デジタル
Django Python HTML

改訂履歴


2021/6/29 投稿

1. 背景


Djangoを使った開発中に覚えたことを備忘録として残します。

今回はhmtlテンプレートの中でrange()を使ってforループの繰り返し回数を制限する方法を解説します。


2. ゴール


テンプレート内でのループ回数をrange関数を使って制限する。


3. はじめに


まずどんな場面で使うのかを説明します。

下記は開発中の料理アプリの一部です。



料理を選択すると画面上には「1人前」の材料が表示されます。

ドロップダウンリストの数字を変更すると、料理を作るのに必要な材料の数が切り替わります。

このドロップダウンリストには1~10までの数字が入っており、下記のような書き方で作られています。
html
<select name="servings">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
...
</select>人前


「<option value="n">n</option>」を繰り返し書くのは面倒ですよね。

こんなときこそforループを使いたいところです。


Djangoにはforループ機能を持ったテンプレートタグ「{% for i in iter %}」があります。

このイテレータ(iter)にrange(10)のように回数を指定できれば目的が達せられそうです。


それでは解説していきます。



4. views.pyで定義


シンプルで分かり易い方法はviews.pyの中でループ回数を定義することです。

views.pyの中で下記のように書いてみましょう。
views.py
for_range = [i for i in range(10)]

「for_range」という変数にイテレータとして0~9までの10個の数字が入ったリストを入れています。

右側はリスト内包表記を使っています。

ループ回数を変更したい場合は、「range(10)」「10」の部分を目的の数字に変更して下さい。


次にこの変数をhtmlテンプレートに渡します。
views.py
context = {
'for_range': for_range,
}

return render(request, template, context)



それではテンプレートをみていきましょう。
html
<select name="servings">
{% for serve in for_range %}
<option value="{{ forloop.counter }}">{{ forloop.counter }}</option>
{% endfor %}
</select>人前
先ほど定義した変数「for_range」をテンプレート内for文のイテレータとして指定しています。

「serve」という変数に順々に数字を入れる書き方ですが、今回のパターンでは「serve」自体はループ内で使用していません。

ちなみに「serve」には 0~9までの数字が順々に入ります。(使っていませんが)


ドロップダウンリストの選択肢となる「option」部分には「{{forloop.counter}}」というものを使用しています。

このカウンター部分には「今forループの何回目か」の数字が入ります。

ですので10回ループが回る場合は1 ~10の数字が順々に入ります。

結果、こんな感じになります。




5. 補足 -表示数を制限-


用途は異なりますが、先ほど使った「{{forloop.counter}}」を用いてループ回数を制限することができます。

それはテンプレートタグ「{% if %}」を使った方法です。

「カウンターの数字が10以下なら」という条件を付ければ、ループ回数を制限できます。


この方法が使えるのは、例えばviews.pyからモデルのクエリセット(イテレータ)を受け取っているときです。

書き方は下記のようになります。
※モデルの数が10以上の場合に限る
html
{% for model in model_list %}
{% if forloop.counter <= 10 %}
<p>{{ model.name }}</p>
{% enfif %}
{% endfor %}



本題からは逸れましたが、参考になればと思います。



6. さいごに


いかがでしたでしょうか?

考え方次第で色々な使い方ができますので、新しい使い道を見つけるのも面白そうですね。

お疲れ様でした。