Django ManyToManyFieldをTemplateに表示

#はじめに
今回の記事ではManyToManyFieldで繋いだものをTemplateに表示する方法を書いていきます。

#モデルの確認
まずモデルを確認しましょう。

models.py

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ファイルの確認

これが全体像ですが、長いので少し短くします。

models.py

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」つつながっています。

kadai_category.html

{% 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」クラスのモデルを表示できるのでしょうか？
答えはこのようにします。

kadai_category.html

{% for kadai in category.kadai_name.all %}
   <p>{{ kadai.kadai_name }}</p>
{% endfor %}

全体像を見てみましょう。

kadai_category.html

{% 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 %}

#最後に
しっかり伝わっているかわかりませんが、見比べながら自分のプロジェクトに反映させていってください。