・5 min read
Django ManyToManyFieldをTemplateに表示
#はじめに
今回の記事ではManyToManyFieldで繋いだものをTemplateに表示する方法を書いていきます。
#モデルの確認
まずモデルを確認しましょう。
class Kadai(models.Model):
class Meta:
verbose_name = '課題'
verbose_name_plural = '課題'
kadai_name = models.CharField(
verbose_name='課題名',
max_length=100,
unique=True,
)
category_number = models.IntegerField(
verbose_name='課題カテゴリ数',
default=0,
)
kadai_thumbnail = models.ImageField(
verbose_name='サムネイル画像',
upload_to='media',
)
def __str__(self):
return self.kadai_name
class KadaiCategory(models.Model):
class Meta:
verbose_name = '課題カテゴリ'
verbose_name_plural = '課題カテゴリ'
kadai_name = models.ManyToManyField(Kadai)
category_name = models.CharField(
verbose_name='カテゴリ名',
max_length=100,
unique=True
)
kadai_number = models.IntegerField(
verbose_name='課題数',
default=0
)
category_thumbnail = models.ImageField(
verbose_name='サムネイル画像',
upload_to='media',
)
def __str__(self):
return self.category_name#HTMLファイルの確認
これが全体像ですが、長いので少し短くします。
class Kadai(models.Model):
class Meta:
verbose_name = '課題'
verbose_name_plural = '課題'
kadai_name = models.CharField(
verbose_name='課題名',
max_length=100,
unique=True,
)
.
.
.
def __str__(self):
return self.kadai_name
class KadaiCategory(models.Model):
class Meta:
verbose_name = '課題カテゴリ'
verbose_name_plural = '課題カテゴリ'
kadai_name = models.ManyToManyField(Kadai)
category_name = models.CharField(
verbose_name='カテゴリ名',
max_length=100,
unique=True
)
.
.
.
def __str__(self):
return self.category_nameこれで少しは見やすくなりました。
一応説明しておくと、「Kadai」クラスは課題がいくつかあり、「KadaiCategory」クラスにはカテゴリがいくつかあります。
つまり、「多対多」なのでManyToManyFieldを使っています。
それでは早速Templateの方を見ていきましょう。
このHTMLファイルは、「KadaiCategory」つつながっています。
{% for category in object_list %}
<div class="col-4 one-card">
<div class="card" style="width: 18rem;">
<img src="{{ category.category_thumbnail.url }}" height="300" alt="サムネイル画像です。">
<div class="card-body">
<h5 class="card-title">{{ category.category_name }}</h5>
<p class="card-text">スキルチェックをして自分のスキルを上げていきましょう！</p>
<p>/{{ category.kadai_number }}</p>
<a href="#" class="btn btn-primary">Let's Challenge</a>
</div>
</div>
</div>
{% endfor %}この状態だとただModelに書かれていることを表示しているだけで、ManyToManyFieldでつながっている「Kadai」クラスのモデルを表示できていません。
ではどのようにしたらManyToManyFielfでつながっている「Kadai」クラスのモデルを表示できるのでしょうか？
答えはこのようにします。
{% for kadai in category.kadai_name.all %}
<p>{{ kadai.kadai_name }}</p>
{% endfor %}全体像を見てみましょう。
{% for category in object_list %}
<div class="col-4 one-card">
<div class="card" style="width: 18rem;">
<img src="{{ category.category_thumbnail.url }}" height="300" alt="サムネイル画像です。">
<div class="card-body">
<h5 class="card-title">{{ category.category_name }}</h5>
<p class="card-text">スキルチェックをして自分のスキルを上げていきましょう！</p>
<p>/{{ category.kadai_number }}</p>
# ここに追加
{% for kadai in category.kadai_name.all %}
<p>{{ kadai.kadai_name }}</p>
{% endfor %}
<a href="#" class="btn btn-primary">Let's Challenge</a>
</div>
</div>
</div>
{% endfor %}書き方を説明します。上の全体像をみつつ理解してください。
{% for カウンタ変数（どんな名前でも良い） in 大きなfor文のカウンタ変数部分.ManyToManyFieldで繋いでいる変数名.all %}
<p>{{ カウンタ変数.ManyToManyFieldで繋いだ先の読み込みたいモデルの変数}}</p>
{% endfor %}#最後に
しっかり伝わっているかわかりませんが、見比べながら自分のプロジェクトに反映させていってください。
