質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

RubyGems

RubyGemsはRubyによるプログラミングのためのパッケージマネジメントツールです。ユーザはこれを使用することで、Rubyライブラリのダウンロードやアップデートや、依存関係の自動解決が可能になります。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

解決済

1回答

1692閲覧

gem gonが動作しない

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby on Rails 6

Ruby on Rails 6は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

RubyGems

RubyGemsはRubyによるプログラミングのためのパッケージマネジメントツールです。ユーザはこれを使用することで、Rubyライブラリのダウンロードやアップデートや、依存関係の自動解決が可能になります。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/04/11 12:58

編集2020/04/11 13:01

#前提・実現したいこと
現在、Rails6でインスタクローンアプリを作成しています。
今はいいね機能の実装中です。

以下のページを参考に、いいねボタンを押すとページの再読み込みなしで
1 いいねボタンの色が変わり
2 いいね数が1増える
描画をしたいと考えています。

#発生している問題・エラーメッセージ
画面上エラーメッセージは表示されませんが、googleのデベロッパーツールを見ると以下のエラーが表示されていました。

1つ目

Uncaught Error: Cannot find module '@fortawesome/fontawesome-free' at webpackMissingModule (application.js:12) at Object../app/javascript/packs/application.js (application.js:12) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83

2つ目

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

#該当のソースコード
_like.html.erb

<% if !current_user?(micropost.user) %> <span class="like"> <% if micropost.make_like?(current_user) %> <%= form_for(micropost.likes.find_by(user_id: current_user.id), method: :delete, remote: true) do |f| %> <%= button_tag(class: "btn btn-default btn-xs") do %> <i class="fas fa-heart unlike-btn"></i> <%= content_tag :span, "#{micropost.likes_count}" %> <% end %> <% end %> <% else %> <%= form_for(micropost.likes.build, remote: true) do |f| %> <div><%= hidden_field_tag :micropost_id, micropost.id %></div> <%= button_tag(class: "btn btn-default btn-xs") do %> <i class="far fa-heart like-btn" ></i> <%= content_tag :span, "#{micropost.likes_count}" %> <% end %> <% end %> <% end %> </span> <% end %>

_micropost.html.erb

<li id="micropost-<%= micropost.id %>" data-micropost-id="<%= micropost.id %>"> <%= link_to gravatar_for(micropost.user, size: 50), micropost.user %> <%= link_to micropost.user.name, micropost.user %> <span class="content"> <%= micropost.content %> <%= image_tag micropost.picture.url if micropost.picture? %> </span> <%= render 'likes/like', micropost: micropost %> <span class="timestamp"> <%= time_ago_in_words(micropost.created_at) %>前に投稿 <% if current_user?(micropost.user) %> <%= link_to "削除", micropost, method: :delete, data: { confirm: "削除してもよろしいですか?" } %> <% end %> </span> </li>

likes_controller.rb

class LikesController < ApplicationController before_action :logged_in_user def create @micropost = Micropost.find(params[:micropost_id]) gon.micropost_id = @micropost.id unless @micropost.make_like?(current_user) @micropost.make_like(current_user) @micropost.reload respond_to do |format| format.html { redirect_to request.referrer || root_url } format.js end end end def destroy @micropost = Like.find(params[:id]).micropost gon.micropost_id = @micropost.id if @micropost.make_like?(current_user) @micropost.remove_like(current_user) @micropost.reload respond_to do |format| format.html { redirect_to request.referrer || root_url } format.js end end end end

micropost.rb

class Micropost < ApplicationRecord belongs_to :user has_many :likes, dependent: :destroy has_many :make_like_users, through: :likes, source: :user default_scope -> { order(created_at: :desc) } mount_uploader :picture, PictureUploader validates :user_id, presence: true validates :content, presence: true, length: { maximum: 200 } validates :picture, presence: true validate :picture_size def make_like(user) likes.create(user_id: user.id) end def remove_like(user) likes.find_by(user_id: user.id).destroy end def make_like?(user) make_like_users.include?(user) end private def picture_size if picture.size > 5.megabytes errors.add(:picture, "画像サイズを5MB以下にしてください") end end end

gemfile

source 'https://rubygems.org' git_source(:github) { |repo| "https://github.com/#{repo}.git" } ruby '2.6.3' gem 'rails', '~> 6.0.2', '>= 6.0.2.1' gem 'bcrypt' gem 'faker' gem 'carrierwave' gem 'mini_magick' gem 'will_paginate' gem 'bootstrap-will_paginate' gem 'puma', '~> 4.1' gem 'bootstrap-sass' gem 'sass-rails', '>= 6' gem 'bootstrap' gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby] gem 'webpacker', '~> 4.0' gem 'turbolinks', '~> 5' gem 'jbuilder', '~> 2.7' gem 'bootsnap', '>= 1.4.2', require: false gem 'rails-i18n' gem 'font-awesome-sass' gem 'counter_culture' gem 'gon' group :development, :test do gem 'byebug', platforms: [:mri, :mingw, :x64_mingw] gem 'rspec-rails' gem 'sqlite3', '~> 1.4', require: false gem 'factory_bot_rails' end group :development do gem 'web-console', '>= 3.3.0' gem 'listen', '>= 3.0.5', '< 3.2' gem 'spring' gem 'spring-watcher-listen', '~> 2.0.0' end group :production do gem 'pg' gem 'fog' end

routes.rb

Rails.application.routes.draw do get 'likes/create' get 'likes/destroy' get 'sessions/new' root 'main_page#main' get '/signup', to: 'users#new' get '/login', to: 'sessions#new' post '/login', to: 'sessions#create' delete '/logout', to: 'sessions#destroy' get '/newpost', to: 'microposts#new' resources :users do member do get :following, :followers end end resources :microposts, only: [:create, :destroy] resources :relationships, only: [:create, :destroy] resources :testsessions, only: :create resources :likes, only: [:create, :destroy] end

application.js

require("@rails/ujs").start() require("turbolinks").start() require("@rails/activestorage").start() require("channels") require('jquery') require("bootstrap") require("@fortawesome/fontawesome-free")

_head.html.erb

<head> <title><%= full_title(yield(:title)) %></title> <%= csrf_meta_tags %> <%= csp_meta_tag %> <%= stylesheet_link_tag 'custom', media: 'all', 'data-turbolinks-track': 'reload' %> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= include_gon %> <%= render 'layouts/shim' %> </head>

#試したこと
以下のサイトの方法を参考に対応しましたが、効果は見られませんでした。
https://teratail.com/questions/207172
https://blog.piyo.tech/posts/2018-08-11-gem-with-js-on-webpacker/
https://qiita.com/r_ishimori/items/4f8db624e39d9e5ba459
https://qiita.com/jiko797torayo/items/f8962bec2eefbf0aacd9
https://teratail.com/questions/250428#_=_

#補足情報(FW/ツールのバージョンなど)
関係ありそうなものを抜粋いたします。
Rails 6.0.2.1
bootstrap (4.4.1)
bootstrap-sass (3.4.1)
turbolinks (5.2.1)
turbolinks-source (5.2.0)
webpacker (4.2.2)
gon (6.3.2)

一度質問させていただいていますが、若干内容が変化したため改めて新規投稿いたしました。
長くなってしまいましたが、どうぞよろしくお願いいたします。

検証画面

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

非同期処理での解決ができなかったため、同期処理による方法を取ることにしました。

投稿2020/04/12 06:47

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問