teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問いいね機能を非同期で実装したい

編集履歴

質問編集履歴

2

コメント削除

2021/01/29 05:23

投稿

taba.3011
taba.3011

スコア12

test CHANGED
File without changes
test CHANGED
@@ -88,11 +88,7 @@
88
88
 
89
89
  def destroy
90
90
 
91
- # Like.find_by(article_id: params[:id], user_id: current_user.id).destroy
91
+ Like.find_by(article_id: params[:id], user_id: current_user.id).destroy
92
-
93
- like = Like.find_by(user_id: current_user.id, article_id: params[:article_id])
94
-
95
- like.destroy
96
92
 
97
93
  end
98
94
 

1

タイトル変更、書式の改善、情報の追記

2021/01/29 05:22

投稿

taba.3011
taba.3011

スコア12

test CHANGED
@@ -1 +1 @@
1
- いいねボタンを押しても、アイコンの色が変わらない
1
+ いいね機能を非同期で実装したい
test CHANGED
@@ -1,32 +1,74 @@
1
1
  ### 前提・実現したいこと
2
2
 
3
-
4
-
5
- アイコンをタップすると色が変わる、いいね機能を実装しています。
3
+ いいねボタンを非同期通信で実装したいです。
6
-
7
- 保存と削除はできます。
4
+
8
-
9
- アイコンをタップしても反応がないのですが、ブラウザをリロードすると反映されています
5
+ 現状、ブラウザをリロードしなければアイコンの色が変化しません。
6
+
10
-
7
+ いいね機能を非同期で実装しているサイトを参考にして実装しようとしていたのですが上手くいかず、若干違うやり方をしているサイトの方法に変えてみたりしているのですが、中々改善されません。
8
+
9
+
10
+
11
-
11
+ 初心者のため、jqueryやwebpackなどの設定がまだ理解できておらず、コピペに頼ってしまっているところがあるので根本的なミスも見落としがちですが、どなたかご教授いただけると助かります。
12
-
13
-
14
-
12
+
13
+
14
+
15
+
16
+
15
- ### 該当のソースコード
17
+ ##### routes.rb
18
+
16
-
19
+ ```
17
-
18
-
20
+
19
- ```ArticleModel
21
+ Rails.application.routes.draw do
20
-
22
+
21
- def like_user(user_id)
23
+ devise_for :users
24
+
22
-
25
+ root to: 'articles#index'
26
+
27
+ resources :articles do
28
+
29
+ collection do
30
+
31
+ get 'search'
32
+
33
+ end
34
+
35
+ resources :comments, only: :create
36
+
23
- likes.find_by(user_id: user_id)
37
+ resources :likes, only: [:create, :destroy]
38
+
39
+ end
24
40
 
25
41
  end
26
42
 
27
43
  ```
28
44
 
45
+ #####article.rb
46
+
47
+ ```
48
+
49
+ class Article < ApplicationRecord
50
+
51
+
52
+
53
+ belongs_to :user
54
+
55
+ has_many :likes
56
+
57
+
58
+
59
+ def like_user(user_id)
60
+
61
+ likes.find_by(user_id: user_id)
62
+
63
+ end
64
+
65
+ end
66
+
67
+ ```
68
+
29
- ```controller
69
+ #####likes_controller.rb
70
+
71
+ ```
30
72
 
31
73
  class LikesController < ApplicationController
32
74
 
@@ -70,12 +112,12 @@
70
112
 
71
113
  ```
72
114
 
115
+ #####_like.html.erb
116
+
73
- ```view
117
+ ```
74
118
 
75
119
  <% if user_signed_in? %>
76
120
 
77
-
78
-
79
121
  <% unless @article.like_user(current_user.id).blank? %>
80
122
 
81
123
  <%= link_to article_like_path(article_id: @article.id, id: @article.likes[0].id), method: :delete, remote: true do %>
@@ -106,39 +148,87 @@
106
148
 
107
149
  ```
108
150
 
109
- ```js
110
-
111
- [create.js.erb]
151
+ create.js.erb
152
+
112
-
153
+ ```
113
-
114
154
 
115
155
  $('.likes_buttons').html("<%= j(render partial: 'likes/like', locals: {article: @article}) %>");
116
156
 
117
157
  ```
118
158
 
119
- ```js
120
-
121
- [destroy.js.erb]
159
+ #####destroy.js.erb
160
+
122
-
161
+ ```
123
-
124
162
 
125
163
  $('.likes_buttons').html("<%= j(render partial: 'likes/like', locals: {article: @article}) %>");
126
164
 
127
165
  ```
128
166
 
129
- ```ruby
130
-
131
- [application.html.erb]
132
-
133
-
134
-
135
- <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
136
-
137
- ```
138
-
139
- ```ruby
140
-
141
- [application.js]
167
+ #####application.html.erb
168
+
169
+ ```
170
+
171
+ <!DOCTYPE html>
172
+
173
+ <html>
174
+
175
+ <head>
176
+
177
+ <title>Stockapp</title>
178
+
179
+ <%= csrf_meta_tags %>
180
+
181
+ <%= csp_meta_tag %>
182
+
183
+
184
+
185
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
186
+
187
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
188
+
189
+ <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
190
+
191
+ <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
192
+
193
+ <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
194
+
195
+ </head>
196
+
197
+
198
+
199
+ <body class="wrapper">
200
+
201
+ <header>
202
+
203
+ <%= render "shared/header" %>
204
+
205
+ </header>
206
+
207
+ <%= yield %>
208
+
209
+ <footer>
210
+
211
+ <%= render "shared/footer" %>
212
+
213
+ </footer>
214
+
215
+ </body>
216
+
217
+ </html>
218
+
219
+ ```
220
+
221
+ application.js
222
+
223
+ ```
224
+
225
+ // This file is automatically compiled by Webpack, along with any other files
226
+
227
+ // present in this directory. You're encouraged to place your actual application logic in
228
+
229
+ // a relevant structure within app/javascript and only use these pack files to reference
230
+
231
+ // that code so it'll be compiled.
142
232
 
143
233
 
144
234
 
@@ -160,41 +250,97 @@
160
250
 
161
251
  require("bootstrap");
162
252
 
253
+
254
+
255
+ // Uncomment to copy all static images under ../images to the output folder and reference
256
+
257
+ // them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
258
+
259
+ // or the `imagePath` JavaScript helper below.
260
+
261
+ //
262
+
263
+ // const images = require.context('../images', true)
264
+
265
+ // const imagePath = (name) => images(name, true)
266
+
267
+
268
+
269
+ //= require bootstrap-sprockets
270
+
271
+ import "bootstrap"
272
+
273
+ import "../src/application.scss"
274
+
275
+ import "@fortawesome/fontawesome-free/js/all"
276
+
277
+ ```
278
+
279
+ #####environment.js
280
+
281
+ ```
282
+
283
+ const { environment } = require('@rails/webpacker');
284
+
285
+
286
+
287
+ const webpack = require('webpack');
288
+
289
+ environment.plugins.append('Provide',
290
+
291
+ new webpack.ProvidePlugin({
292
+
293
+ $: 'jquery/src/jquery',
294
+
295
+ jQuery: 'jquery/src/jquery'
296
+
297
+ })
298
+
299
+ );
300
+
301
+ module.exports = environment;
302
+
163
303
  ```
164
304
 
165
305
 
166
306
 
167
307
  ### 試したこと
168
308
 
169
-
170
-
171
- jqueryの導入にはconfig/webpack/environment.jsファイルの設定の変更が必要だと聞いたので変更しました。
309
+ jsファイルにalertを記述し、確認したところ、ちゃんと作動しました。
310
+
172
-
311
+ #####create.js.erb
312
+
173
- ```
313
+ ```
174
-
314
+
175
- const { environment } = require('@rails/webpacker');
315
+ $('.likes_buttons').html("<%= j(render partial: 'likes/like', locals: {article: @article}) %>");
176
-
177
-
178
-
316
+
179
- const webpack = require('webpack');
317
+ alert('create呼ばれた！！');
180
-
181
- environment.plugins.append('Provide',
318
+
182
-
183
- new webpack.ProvidePlugin({
184
-
185
- $: 'jquery/src/jquery',
186
-
187
- jQuery: 'jquery/src/jquery'
188
-
189
- })
190
-
191
- );
192
-
193
- module.exports = environment;
194
-
195
- ```
319
+ ```
320
+
196
-
321
+ #####destroy.js.erb
322
+
323
+ ```
324
+
325
+ $('.likes_buttons').html("<%= j(render partial: 'likes/like', locals: {article: @article}) %>");
326
+
327
+ alert('destroy呼ばれた！！');
328
+
329
+ ```
330
+
197
- application.html.erbやapplication.jsなどのファイルにもjqueryを読み込む記述をしているはずなのですが...
331
+ しかし連続でタップしたところ、createは連続でアラートが表示されるのですが、destroyのアラートは最初しか常時されず、2回目以降はconsoleに
332
+
333
+ rails-ujs.js:216 DELETE http://localhost:3000/articles/14/likes/11 500 (Internal Server Error)
334
+
335
+ ./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.ajax @ rails-ujs.js:216
336
+
337
+ ./node_modules/@rails/ujs/lib/assets/compiled/rails-ujs.js.Rails.handleRemote @ rails-ujs.js:652
338
+
339
+ (anonymous) @ rails-ujs.js:172
340
+
341
+ というエラーが出でしまいます。
342
+
343
+ なんとなく、AJAX通信ができていないのかな？という予想はできるのですが、そこからの対処法がわかりません。
198
344
 
199
345
  ### 補足情報（FW/ツールのバージョンなど）
200
346