RailsでLike機能を追加する手順をchatGPTに聞いてみた。 #Rails

質問1
ruby on rails でcookieとajaxを使ってlike機能を実装する方法を教えて。

テーブルにはLikeカラムがあって、Likeボタンを押されるとそこが+1される想定。

Ruby on RailsでCookieとAjaxを使用してLike機能を実装する手順を以下に示します。

1、コントローラーにアクションを追加する
まず、コントローラーにLikeアクションを追加します。このアクションは、Likeをカウントするためにデータベースを更新します。

class PostsController < ApplicationController
  def like
    post = Post.find(params[:id])
    post.update(like: post.like + 1)
    render json: { status: 'success', like_count: post.like }
  end
end

2、ルーティングを設定する
Likeアクションをルーティングに追加します。

Rails.application.routes.draw do
  resources :posts do
    post 'like', on: :member
  end
end

3、ビューにLikeボタンを追加する
Likeボタンを追加します。以下の例では、data-post-id属性に投稿のIDを設定します。

<button class="like-btn" data-post-id="<%= post.id %>">Like</button>

4、JavaScriptでAjaxリクエストを送信する
JavaScriptを使用して、Ajaxリクエストを送信し、サーバー上でLikeアクションを呼び出します。以下の例では、jQueryを使用しています。

$(document).on('click', '.like-btn', function() {
  var postId = $(this).data('post-id');
  $.ajax({
    url: '/posts/' + postId + '/like',
    type: 'POST',
    dataType: 'json',
    success: function(data) {
      if (data.status === 'success') {
        // カウントを更新する
        $('.like-count[data-post-id="' + postId + '"]').text(data.like_count);
      }
    },
    error: function() {
      console.log('エラーが発生しました。');
    }
  });
});

以上で、Ruby on RailsでCookieとAjaxを使用してLike機能を実装する手順が完了しました。

質問2
上の機能に加えて、likeを押したことをcookieに保存しておいて、かつ画面表示にも反映するにはどうすれば良い？

Likeを押したことをCookieに保存して、かつ画面表示にも反映するには、以下のような手順が必要です。

1、Likeを押したことをCookieに保存する
JavaScriptを使用して、Likeボタンがクリックされた場合に、CookieにLikeしたことを保存します。以下の例では、document.cookieを使用して、CookieにLikeした投稿のIDを保存しています。

$(document).on('click', '.like-btn', function() {
  var postId = $(this).data('post-id');
  // CookieにLikeした投稿のIDを保存する
  document.cookie = 'liked_post_' + postId + '=1';
  $.ajax({
    url: '/posts/' + postId + '/like',
    type: 'POST',
    dataType: 'json',
    success: function(data) {
      if (data.status === 'success') {
        // カウントを更新する
        $('.like-count[data-post-id="' + postId + '"]').text(data.like_count);
      }
    },
    error: function() {
      console.log('エラーが発生しました。');
    }
  });
});

2、CookieからLikeした投稿のIDを取得する
画面を読み込んだときに、CookieからLikeした投稿のIDを取得します。以下の例では、document.cookieとString.prototype.match()を使用して、CookieからLikeした投稿のIDを取得しています。

// CookieからLikeした投稿のIDを取得する
var likedPosts = document.cookie.match(/liked_post_\d+=1/g);
var likedPostIds = [];
if (likedPosts) {
  likedPosts.forEach(function(likedPost) {
    likedPostIds.push(likedPost.match(/\d+/)[0]);
  });
}

3、画面表示にLikeした投稿のIDを反映する
取得したLikeした投稿のIDを使用して、画面表示にLikeを反映します。以下の例では、取得したLikeした投稿のIDを使用して、Likeした投稿のボタンにactiveクラスを追加して、ボタンの色を変更しています。

// Likeした投稿のIDを使用して、画面表示に反映する
if (likedPostIds.length > 0) {
  likedPostIds.forEach(function(likedPostId) {
    $('.like-btn[data-post-id="' + likedPostId + '"]').addClass('active');
  });
}

以上で、Likeを押したことをCookieに保存して、かつ画面表示にも反映する手順が完了しました。