Railsでajax処理を用いての「いいね機能」実装

Question

前提・実現したいこと

■最終的な目的：Railsアプリでajax処理での「いいね機能」実装
■アプリ概要：口コミサイトアプリで、店舗リソース、ユーザーリソース（Devise利用）、コメントリソース、いいねリソースの４つで動かしています。
■いいね機能概要：店舗詳細ページに、いいねボタンを配置し、押下することで「いいねリソース」にデータが入るという仕組みです。

現在、Qiitaの参考記事 をもとに、コードを書いてみているのですが、どうしても狙い通りに動かず困っています。

以下に記事と同じ順ににコードを転記していくので、お力を貸して頂けるようお願いします。

参考記事：【Rails】いいね機能の実装(.js.erbを用いない方法)【プログラミング学習165日目】

発生している問題・エラーメッセージ

①ローカル環境でも本番環境でも、ページ自体は開け、「いいね！（adminでいいねリソースにデータを入れると、いいね！を取り消す）」も表示されるのですが、実際に押下してみると、「いいね！に失敗しました」とエラーメッセージが表示されます。

②「いいね！（adminでいいねリソースにデータを入れると、いいね！を取り消す）」部分がテキストのままで、記事のようにボタンデザインが導入されません。

唯一、記事と異なるポイントとしては、app/assets/javascripts/application.jsで、「//= require popper」の記述を省いていることです。
理由としては、この記述を追加すると、ページにアクセスする時点でエラーが表示されるようになり、調べてみても、bootstrapやsassのことばかりが出てくる為、おそらく環境の相違によるもので、自分の場合には必要ではないのでは？と考えたからです。

試したこと

source 'https://rubygems.org'

git_source(:github) do |repo_name|
  repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/")
  "https://github.com/#{repo_name}.git"
end


# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails',        '5.1.6'
gem 'devise'
gem 'cancancan'
gem 'rails_admin', '~> 1.3'
gem 'carrierwave',             '1.2.2'
gem 'mini_magick',             '4.7.0'
gem 'bootstrap-sass', '3.3.7'
gem 'puma',         '3.9.1'
gem 'sassc-rails'
gem 'uglifier',     '3.2.0'
gem 'coffee-rails', '4.2.2'
gem 'coffee-script-source', '1.8.0'
gem 'jquery-rails', '4.3.1'
gem 'turbolinks',   '5.0.1'
gem 'jbuilder',     '2.7.0'


group :development, :test do
  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
  gem 'sqlite3', '1.3.13'
  gem 'byebug',  '9.0.6', platforms: [:mri, :mingw, :x64_mingw]
  # Adds support for Capybara system testing and selenium driver
end

group :development do
  # Access an IRB console on exception pages or by using <%= console %> anywhere in the code.
  gem 'web-console',           '3.5.1'
  gem 'listen',                '3.1.5'
  gem 'spring',                '2.0.2'
  gem 'spring-watcher-listen', '2.0.1'
end

group :test do
  gem 'rails-controller-testing', '1.0.2'
  gem 'minitest',                 '5.10.3'
  gem 'minitest-reporters',       '1.1.14'
end

group :production do
  gem 'pg', '0.20.0'
  gem 'fog', '1.42'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

app/assets/javascripts/application.js

//= require jquery3
//= require rails-ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .

app/models/like.rb

class Like < ApplicationRecord
    belongs_to :user
    belongs_to :bookshop
end

db/migrate/[timestamp]_create_likes.rb

class CreateLikes < ActiveRecord::Migration[5.1]
  def change
    create_table :likes do |t|
      t.references :bookshop, foreign_key: true
      t.references :user, foreign_key: true

      t.timestamps
    end
    add_index :likes, [:user_id, :bookshop_id], unique: true
  end
end

app/models/user.rb

class User < ApplicationRecord
  # Include default devise modules. Others available are:
  # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable
  devise :database_authenticatable, :registerable,
         :recoverable, :rememberable, :validatable

         has_many :comments, dependent: :destroy
         has_many :bookshop, through: :comments
         has_many :likes, dependent: :destroy
         has_many :like_bookshops, through: :likes, source: :bookshop

end

app/models/bookshop.rb

class Bookshop < ApplicationRecord
    mount_uploader :image_data, PictureUploader

    has_many :comments, dependent: :destroy
    has_many :users, through: :comments
    has_many :likes, dependent: :destroy
    has_many :like_users, through: :likes, source: :user

    validates :name, presence: true, length: {maximum: 50}
    validates :phone, presence: true, uniqueness: true
    validates :address, presence: true, length: {maximum: 100}
    validates :area, presence: true, length: {maximum: 20}
    validates :station, presence: true, length: {maximum: 20}


    # アップロードされた画像のサイズを最大5MBにバリデーションする
    def picture_size
        if picture.size > 5.megabytes
          errors.add(:picture, "should be less than 5MB")
        end
    end    

    def like?(user)
      like_users.include?(user)
    end

end

routes.rb

  resources :bookshops do
    resources :comments, only: [:create]
    resources :likes, only: [:create]
  end
end

app/controllers/likes_controller.rb

  def create
    @bookshop = Bookshop.find(params[:bookshop_id])
    @like = current_user.likes.find_by(bookshop: @bookshop)
    toggle
    end

  private

  def toggle
    if @like
      return head :unprocessable_entity unless @like.destroy
    else
      @like = current_user.likes.build(bookshop: @bookshop)
      return head :unprocessable_entity unless @like.save
    end
    head :ok
  end

app/views/likes/_like.html.erb

<% if user_signed_in?
unless @bookshop.like?(current_user) %>
  <a class="btn-primary" data-bookshop_id="<%= ::Temple::Utils.escape_html_safe((@bookshop.id)) %>" id="link-mark">いいね！</a>
<% else %>
  <a class="btn-secondary" data-bookshop_id="<%= ::Temple::Utils.escape_html_safe((@bookshop.id)) %>" id="link-mark">いいね！を取り消す</a>
<% end; end %>

  <%= ::Temple::Utils.escape_html_safe((javascript_include_tag('like'))) %>

app/models/bookshop.rb

    has_many :likes, dependent: :destroy
    has_many :like_users, through: :likes, source: :user

    def like?(user)
      like_users.include?(user)
    end

app/assets/javascripts/like.js

$(function(){
    // id="link-mark"の箇所(いいねボタン)をクリックしたら
    $('#link-mark').on('click', function(){
      // 非同期でlikes#createに処理を送信＋その時に店舗情報(bookshop_id)を渡す
      $.ajax({
        url: '/likes',
        type: 'POST',
        data: {bookshop_id: $(this).data('bookshop_id')}
      })
      // 処理が上手く行ったらボタンを切り替えて
      .done((data) => {
        if ($(this).text() === 'いいね！') {
          $(this).text('いいね！を取り消す').removeClass('btn-primary').addClass('btn-secondary');
        } else if ($(this).text() === 'いいね！を取り消す') {
          $(this).text('いいね！').removeClass('btn-secondary').addClass('btn-primary');
        }
      })
      // 処理が上手く行かなかったら失敗の旨を伝えるアラートを表示
      .fail((data) => {
        alert('いいね！に失敗しました');
      })
    });
  });

補足情報（FW/ツールのバージョンなど）

ruby 　2.4.5
Rails　 5.1.6

以上になります。
不足情報等あればすぐに追記しますので、よろしくお願いします。

Comments

[iwamot]

「いいね！に失敗しました」となるとき、サーバサイドにエラーログが出力されていると思います。その内容を追記していただくことは可能でしょうか？

なお、ボタンのデザインはBootstrapに依存しているので、CSSファイルが正しく参照できていないとしたら、意図と違う表示になると思います。

[SHUNSUKE_1990]

ご回答ありがとうございます！
仰る通り、サーバーサイドの方にエラーログが出力されており、「ActionController::RoutingError (No route matches [POST] "/likes"):」という表示でした。

そして、エラー通りroutes.rbのルーティングを整えることで解決することができました。
ボタンのデザインについても、アドバイス頂いた通り、cssファイルからもう一度見直してみたいと思います。
有益な情報をありがとうございました！

[iwamot]

よかったです。質問をクローズして問題ないようでしたら、ご自身で回答欄にどのように解決したのか（ざっくりとでも）書いて、それをベストアンサーに選んでいただけると、他の方の参考になるのでありがたいです。

[SHUNSUKE_1990]

わかりました、解答欄への記載もすぐにします！
何から何までありがとうございます！

Answer 1

iwamotさんの指示に従い、サーバーサイドのエラーログを確認（「rails s」を実行中のコマンドプロンプトに表示されている内容）したところ、
「ActionController::RoutingError (No route matches [POST] "/likes"):」との表示有。

routes.rbで、
「
resources :bookshops do
resources :comments, only: [:create]
resources :likes, only: [:create]
end」

と記載していたのを、↓に変更することで、無事解決しました。

「
resources :bookshops do
resources :comments, only: [:create]
end

resources :likes, only: [:create]」

iwamotさんありがとうございました！