Django: 2つのモデルを取り入れたリストビューを汎用クラスベースで実現したい

Question

閲覧ありがとうございます。

概要

現在、日本語と英語から、簡単なクイズのアプリを作ろうとしています。実現したい機能自体は関数ベースのビューで実装できたのですが、Djangoの利点である汎用クラスベースビューを使った実装を実現したいと思い質問させていただきました。

実現したい機能・要件

htmlファイルのform中のinputタグから「間違った英語」と「間違った日本語」を受信し、データベースの難易度を上昇。その後、間違った間違った英語と日本語を一覧として表示。以上の機能を、汎用クラスベースビューで実現したい。

思い当たる原因

• そもそもgeneric.ListViewを利用すべき動作ではない
• generic.ListViewを利用するときに、定義すべきメソッドが定義されていない
• Mixinと多重継承への理解が不十分

コード

丸々載せていたら文字制限にひっかかったので、動作に関係がある部分のみ抜き出すと、以下のようになります。リクエストしてもらえれば、quiz作成部分等も追記します。

models.py

日本語と英語とをM:N対応で定義しています。今回のプログラムではデータを取得することにのみ利用しており、メソッド等は使っていません。

import datetime

from django.db import models
from django.utils import timezone

class JapaneseWord(models.Model):
    """
    日本語とそれに伴う情報を規定する

    Attributes
    ----------
    japanese_mean: CharField
        英単語に対応する日本語の意味
    difficulty: IntegerField
        日本語の難易度
    
    Note
    ----
    EnglishWordとJapaneseWordはM:Nで対応している
    """
    japanese_mean = models.CharField(max_length=50)
    pub_date = models.DateTimeField('date published', default=timezone.now)
    difficulty = models.IntegerField(default=0)

    def __str__(self):
        return self.japanese_mean


class EnglishWord(models.Model):
    """
    英単語とそれに伴う情報を定義する。

    Attributes
    ----------
    spell: CharField
        英単語のスペル
    pub_date: DateTimeField
        英単語の作成日
    difficulty: IntegerField
        英単語の難易度
    japanese_words: ManyToManyField
        英単語と日本語のM:N対応
    """
    spell = models.CharField(max_length=30)
    pub_date = models.DateTimeField('date published', default=timezone.now)
    difficulty = models.IntegerField(default=0)
    japanese_words = models.ManyToManyField(JapaneseWord, verbose_name='日本語', blank=True)

    def __str__(self):
        return self.spell
    
    def was_published_recently(self):
        now = timezone.now()
        return now - datetime.timedelta(days=1) <= self.pub_date <= now
    
    was_published_recently.admin_order_field = 'pub_date'
    was_published_recently.boolean = True
    was_published_recently.short_description = 'Published Recently?'

テンプレートのquiz.html

コンテキストからクイズを表示するためのhtmlファイルです。JavaScriptを使って解答を集計し、form内に追加したinput要素を経由して、postで値を送信しています。

{% extends 'wordapp/base.html' %}

{% load static %}

{% block title %}my-wordapp_quiz_dummy_sample{% endblock %}

{% block hero_unit %}
    <h1 class="h3">英単語のクイズページ</h1>
{% endblock %}

{% block body %}
    <h3>クイズ</h3>
    <form>
        {% csrf_token %}
        <input type="hidden" id="quiz-length" value="{{ quizzes | length }}">
        {% for quiz in quizzes %}
            <div class="quiz">
                <p class="question_english">{{ quiz.word }}</p>
                <p class="word_id">word_id: {{ quiz.word_id }}</p>
                <p class="answer">answer: {{ quiz.answer }}</p>
                <input type="hidden" id="answer-{{ quiz.id }}" value="{{ quiz.answer }}">
                <input type="hidden" id="id-{{ quiz.id }}" value="{{ quiz.word_id }}">
                <ul>
                {% for choice in quiz.choices %}
                    <li><input id="choice-{{ quiz.id }}-{{ forloop.counter }}" class="choice" type="radio" value="{{ choice }}"
                    name="quiz-{{ quiz.id }}">
                    <label for ="choice-{{ quiz.id }}-{{ forloop.counter }}">{{ choice }}</label></li>
                {% endfor %}
                </ul>
            </div>
        {% endfor %}
        <input type="button" value="集計" onclick="aggregate()">
        <p>正解した問題数: <span id="number-of-right-answer"></span></p>
        <p>間違えた問題: <span id="wrong-problem"></span></p>
        <p>間違えた選択肢に含まれる日本語: <span id="wrong_japanese_answers"></span></p>
    </form>
    
    <script>
        function aggregate() {
            let result = 0;
            let quiz_length = document.getElementById('quiz-length').value;
            let wrong_answer_word_id = [];
            // 間違えた日本語
            let wrong_japanese_answers = [];

            for (let i = 1; i <= quiz_length; i++){
                let answer = document.getElementById(`answer-${i}`).value;
                let choices = document.getElementsByName(`quiz-${i}`);
                let word_id = document.getElementById(`id-${i}`).value;

                for (var j = 0; j < choices.length; j++){
                    if (choices[j].checked) {
                        if (answer == choices[j].value){
                            result++;
                        }
                        else {
                            // 間違えた英語
                            wrong_answer_word_id.push(word_id);
                            // 間違えた日本語追加
                            /*
                            ここでノードリストになっている
                            for文で全展開
                            */
                            for(let k=0; k < choices.length; k++){
                                wrong_japanese_answers.push(choices[k].value);
                            }
                        }
                        break;
                    }
                }
            }
            document.getElementById("number-of-right-answer").textContent = result;
            document.getElementById("wrong-problem").textContent = wrong_answer_word_id;
            //間違えた日本語の出力確認(重複排除)
            wrong_answer_words_array = Array.from(new Set(wrong_japanese_answers));
            document.getElementById("wrong_japanese_answers").textContent = wrong_answer_words_array;
            
            let form = document.createElement('form');
            let wrong_question = [];

            form.method = "POST";
            form.action = "{% url 'wordapp:quiz_feedback_sample' %}";
            form.id = "wrong_answer_word";
            
            // 間違えた英語のinput
            let wrong_english_input = document.createElement('input');
            wrong_english_input.type = 'hidden';
            wrong_english_input.name = 'wrong_english_word_id';
            wrong_english_input.value = wrong_answer_word_id;
            // 間違えた日本語のinput
            let wrong_japanese_input = document.createElement('input');
            wrong_english_input.type = 'hidden';
            wrong_japanese_input.name = 'wrong_japanese_words';
            wrong_japanese_input.value = wrong_answer_words_array;
            //csrf_tokenの追加手動
            let csrf_element = document.createElement('input');
            csrf_element.type = 'hidden';
            csrf_element.name = 'csrfmiddlewaretoken';
            csrf_element.value = '{{ csrf_token }}';
            
            form.appendChild(csrf_element);
            form.appendChild(wrong_english_input);
            form.appendChild(wrong_japanese_input);
            document.body.appendChild(form);
            
            form.submit();
        }

    </script>
{% endblock %}

views.py中のquiz_feedback関数

上記のhtmlファイルから送信されたinput要素を取得し、データベースの読み取り用に加工した後、データを操作しています。

取得直後のデータは、

wrong_english_word_id: 10,9,11
wrong_japanese_words: (ある場所から他へ)持っていく,作る,(手などで)取る,もたらす

のような文字列になっており、データベースの読み取り用に加工した後は、

wrong_english_word_id_list: [10, 9, 11],type: <class 'list'>
wrong_japanese_words_list: ['(ある場所から他へ)持っていく', '作る', '(手などで)取る', 'もたらす'],type: <class 'list'>

のようなリスト型のデータになっています。

def quiz_feedback(request):
    """
    クイズのフィードバックを受け取る関数
    """
    wrong_english_word_id = request.POST["wrong_english_word_id"]
    wrong_english_word_id_list = [
        int(wrong_english_word_id) for wrong_english_word_id in wrong_english_word_id.split(",")
        ]
    wrong_japanese_words = request.POST["wrong_japanese_words"]
    wrong_japanese_words_list = wrong_japanese_words.split(",")
    wrong_english_words_queryset = EnglishWord.objects.filter(pk__in=wrong_english_word_id_list)
    wrong_japanese_words_queryset = JapaneseWord.objects.filter(japanese_mean__in=wrong_japanese_words_list)

    context = {
        "wrong_english_words": wrong_english_words_queryset,
        "wrong_japanese_words": wrong_japanese_words_queryset
    }

    return render(
        request,
        "wordapp/quiz_feedback_sample.html",
        context
    )

views.py内で試作した汎用クラスビューを利用した実装(未動作)

上記のquiz_feedback関数を改めて自分で見なおしたときに、結局やっていることは要素の羅列であると思ったので、generic.ListViewを使った実装を試みました。
必要な動作は一通り書き込んだつもりだったのですが、実際にurls.pyを変更してアクセスしてみると、Method Not Allowedというエラーが表示されます。
おそらくPOSTの取得についてなにがしかの設定をしていないため、そうなっているとおもうのですが、なにを実装すべきなのかがわかりませんでした。

class QuizFeedBack(generic.ListView):
    """
    クイズのフィードバックを受けて、間違えた英語と日本語の一覧を表示する
    """
    context_object_name = "wrong_english_word_list"
    model = EnglishWord
    template_name = "quiz_feedback_sample.html"

    def get_queryset(self, request, *args, **kwargs):
        wrong_english_word_post = request.POST["wrong_english_word_id"]
        wrong_english_word_id_list = [
            int(wrong_english_word_id) for wrong_english_word_id in wrong_english_word_post.split(",")
        ]
        queryset_to_return = EnglishWord.objects.filter(pk__in=wrong_english_word_id_list)
        print(queryset_to_return)
        return queryset_to_return
    
    def get_context_data(self, request, *args, **kwargs):
        context = super().get_context_data(*args, **kwargs)
        wrong_japanese_word_post = request.POST["wrong_japanese_words"]
        wrong_japanese_words_list = wrong_japanese_word_post.split(",")
        wrong_japanese_word_queryset = JapaneseWord.objects.filter(japanese_mean__in=wrong_japanese_words_list)
        print(wrong_japanese_word_queryset)
        context["wrong_japanese_words"] = wrong_japanese_word_queryset
        return context 

また、下記のpost関数をメソッドとして追加してみましたが、変わらず動作しませんでした。

    def post(self, request, *args, **kwargs):
        print(request.POST)

Answer 1

一方のモデルでListViewを実装して、get_context_dataで、もう一方のモデルインスタンスのQuerySetを渡すくらいでしょうか。
両方のモデルでページネーションするとなると、ややこしそうですが。

Comments

[kensoon]

ご回答ありがとうございます。

質問した後、汎用ビューの実装について少し調べてみた結果、generic.ListViewにはpostに対応したメソッドが継承されていないようでした。おっしゃっているペジネーションについても問題の数を増やすと困りそうなので、とりあえずは関数ビューで妥協しつつ、汎用ビューの実装について学んでいくことにします。

改めて、ご対応ありがとうございました。

[hasami]

ListViewはdjango.views.generic.Viewから継承されているため、dispatchメソッドによりpostメソッドは呼ばれます。

[kensoon]

コメントありがとうございます。

ということは単純にQuizFeedbackクラスのdef postの実装が間違っているということになるのでしょうか。

https://intellectual-curiosity.tokyo/2019/02/27/django%E3%81%A7get%EF%BC%8Fpost%E3%81%8B%E3%82%89%E5%80%A4%E3%82%92%E5%8F%96%E5%BE%97%E3%81%99%E3%82%8B%E6%96%B9%E6%B3%95/

こちらのサイトのdef post部分を参考に仮引数を設定したみたのですが、どうにも根本的に間違っているような気がしてなりません。

[hasami]

postが動作していないと、判断した理由は何ですか。