Laravel6.2で非同期処理のいいね機能を実装したときにハマったこと

やってること

Laravel6.2を使って掲示板の実装中。今回はjQueryを使っていいね機能を実装しました。
今回は投稿・投稿に付けられるコメントにいいねをできるように実装。
白抜きの♡から赤い塗りつぶしの❤️になるようにしました。

ここが詰まった

①コメントに対していいねを付けることができない
②ハートを押下しても赤く塗り潰されない

やったこと(コメント編)

これは単にJavaScriptの仕様が分かっていませんでした(ﾊｽﾞｶﾁｰ)
投稿(post)のいいね機能をそのままコピペして実装したのですが、うまく実装できず。
今回はletを使ったのですが、違うファイルでも同じ変数宣言をするとエラーが出て登録できなくなります。

ajaxcommentfavorite.js

$(function () {
  let commentfavorite = $('.favorite-toggle');
  let FavoritePostCommentid;
  commentfavorite.on('click', function () {
    let $this = $(this);
    FavoritePostCommentid = $this.data('comment-id');
~省略~

元々はlet favoriteだったものを、commentfavoriteに変更。
投稿(post)のいいね機能で既にfavoriteは宣言していたので、違う変数にすることで実装できました。
エラーがMySQLのエラーがずっと出ていたので数時間潰しました。

やったこと(塗りつぶし編)

今回はfontawesomeを使ってハートを実装しました。
view

detailpost.blade.php

@if (!$comment_fav->isfavoritedBy(Auth::user()))
        <span class="comment-favorites">
            <i class="far fa-heart favorite-toggle" data-comment-id="{{ $comment->id }}"></i>
          <span class="comment-favorite-counter">{{ $comment_fav->commentfavorite_count }}</span>
        </span>
      @else
        <span class="comment-favorites">
            <i class="fas fa-heart favorited favorite-toggle" data-comment-id="{{ $comment->id }}"></i>
          <span class="comment-favorite-counter">{{ $comment_fav->commentfavorite_count }}</span>
        </span>
@endif

favoritedクラスにCSSで色をつけて赤くするように設定しています。
これもjQueryで制御する必要があるとのこと。
ajax処理のdone部分に下記を追加します。

ajaxcommentfavorite.js

.done(function (data) {
      if($this.hasClass('favorited')){
        $this.removeClass('favorited');
        $this.removeClass('fas');
        $this.addClass('far');
      }else{
        $this.addClass('favorited');
        $this.removeClass('far');
        $this.addClass('fas');
      }
      $this.next('.comment-favorite-counter').html(data.comment_favorite_count);
    })

removeClassで白抜きのハートのclassを削除し、塗りつぶしハートのclassを追加することでSNSでよく見るいいね機能の実装ができました。
JavaScriptの勉強はかなりサボっていたのでものすごく参考になりました！

参考にした記事

LaravelとjQueryで非同期処理で実装するいいね機能を世界一わかりやすく解説してみたい
とっても参考になりました…！ほぼこの記事のコピペです。

まとめ

備忘録のためかなり分かりづらく申し訳ございません。
エラーの原因はかなりつまらなかったりする。