いいね機能の実装（スタイル変更）

class Like(models.Model):
    tweet = models.ForeignKey(Tweet, related_name="likes", on_delete=models.CASCADE)
    user = models.ForeignKey(
        User, related_name="likes", on_delete=models.CASCADE
    )

    class Meta:
        verbose_name_plural = "いいね"
        constraints = [
            models.UniqueConstraint(fields=["tweet", "user"], name="like_unique"),
        ]

    def __str__(self):
        return f"{self.tweet.content} by {self.user.username}"

def LikeView(request, pk):

    tweet = Tweet.objects.get(pk=pk)
    user = request.user
    Like.objects.get_or_create(user=user, tweet=tweet)

    is_liked = True
    like_count = tweet.likes.count()
    
    ctxt = {
        "is_liked": is_liked,
        "like_count": like_count,
        "tweet_id": pk,
    }

    return JsonResponse(ctxt)


def UnlikeView(request, pk):
    tweet = Tweet.objects.get(pk=pk)
    user = request.user
    like = Like.objects.filter(user=user, tweet=tweet)

    if like.exists():
        like.delete()
    
    is_liked = False
    like_count = tweet.likes.count()

    ctxt = {
        "is_liked": is_liked,
        "like_count": like_count,
        "tweet_id": pk,
    }
    return JsonResponse(ctxt)

    <a href="javascript:void(0)" id="tweet_{{ tweet.id }}" class="like" name="{{ tweet.id }}" type="button" data-is_liked="False" data-url="{% url 'tweets:like' tweet.pk %}">いいね ({{ tweet.like_count }})</a><br>

    <a href="{% url 'tweets:delete' tweet.pk %}">
        <button type="button" class="btn btn-outline-danger">削除</button>
    </a>
    <a class="reverse_button" href="{% url 'tweets:home' %}">
        <button type="button" class="btn btn-primary btn-back">戻る</button>
    </a>
</div>
{% endblock %}

{% block extrajs %}
<script type="text/javascript">

    function getCookie(name) {
        var cookieValue = null;
        if (document.cookie && document.cookie != '') {
            var cookies = document.cookie.split(';');
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + '=')) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
    var csrftoken = getCookie('csrftoken');

    function csrfSafeMethod(method) {
        // these HTTP methods do not require CSRF protection
        return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
    }
    $.ajaxSetup({
        crossDomain: false, // obviates need for sameOrigin test
        beforeSend: function (xhr, settings) {
            if (!csrfSafeMethod(settings.type)) {
                xhr.setRequestHeader("X-CSRFToken", csrftoken);
            }
        }
    });

    $(".like").on("click", function () {
        console.log("clicked");
        var tweet_id = $(this).attr("name")
        $.ajax({
            type: "POST",
            method: "POST",
            url: $(this).data("url"),
            data: {
                "id": tweet_id
            },
            dataType: "json"
        }).done(function(data){
            
            $("#tweet_"+String(data["tweet_id"])).text("いいね " + "(" + String(data["like_count"] + ")"));

            el = $(".like")

            if (el.data("is_liked") == "False") {
                el.data("is_liked") = "True";
                el.data("url") = "{% url 'tweets:unlike' tweet.pk %}";
            } else {
                el.data("is_liked") = "False";
                el.data("url") = "{% url 'tweets:like' tweet.pk %}";
            }
        })
    });

</script>
{% endblock %}