質問編集履歴

5

一部解決による改定予告

2021/04/30 15:57

投稿

miisha002
miisha002

スコア0

test CHANGED
File without changes
test CHANGED
@@ -1,3 +1,7 @@
1
+ #一部解決したので明日以降改定します。
2
+
3
+
4
+
1
5
  ### 前提・実現したいこと
2
6
 
3
7
  ###### 問題点の主旨

4

自分で試したことのコードの誤りを訂正しました。

2021/04/30 15:57

投稿

miisha002
miisha002

スコア0

test CHANGED
File without changes
test CHANGED
@@ -450,7 +450,7 @@
450
450
 
451
451
  title
452
452
 
453
- | SmaR
453
+ | hello app
454
454
 
455
455
  meta[name="viewport" content="width=device-width,initial-scale=1"]
456
456
 
@@ -566,7 +566,7 @@
566
566
 
567
567
  ```
568
568
 
569
- (function(i,review) {
569
+ (function() {
570
570
 
571
571
  $('.js-receive_field').append(
572
572
 

3

表現を改めました。

2021/04/28 14:42

投稿

miisha002
miisha002

スコア0

test CHANGED
File without changes
test CHANGED
@@ -56,7 +56,7 @@
56
56
 
57
57
  ![](c123303ce55797dc1e189a5ffaf02c83.png)
58
58
 
59
- ↓画像3:ブラド名選択
59
+ ↓画像3:product-1 のプルダウをクリック
60
60
 
61
61
  ![](9b0ff5048fd394b1a1ccc8fba2f353e2.png)
62
62
 

2

該当するページを追加

2021/04/28 14:36

投稿

miisha002
miisha002

スコア0

test CHANGED
File without changes
test CHANGED
@@ -8,6 +8,630 @@
8
8
 
9
9
 
10
10
 
11
+ ######学習歴
12
+
13
+ ・CS基礎(キタミ式イラストIT塾 基本情報技術者)
14
+
15
+ ・Linux基礎(Linux標準教科書)
16
+
17
+ ・HTML/CSS/JavaScript基礎(ドットインストール)
18
+
19
+ ・Railsチュートリアル 2週程度
20
+
21
+
22
+
23
+
24
+
25
+ ### 発生している問題・エラーメッセージ
26
+
27
+
28
+
29
+ ###### 期待する動作
30
+
31
+ '/reviews/new'ページ
32
+
33
+
34
+
35
+ ブランド名(セレクトボックス)で項目選択
36
+
37
+
38
+
39
+ 選択したブランドに 該当する製品のみ を選択できるようにする。
40
+
41
+
42
+
43
+
44
+
45
+ 下記画像で言い換えますと、
46
+
47
+
48
+
49
+
50
+
51
+ ↓画像1:投稿画面を開いた直後
52
+
53
+ ![](ae790dd0d160efb9981a8baf91365e99.png)
54
+
55
+ ↓画像2:ブランド名選択後
56
+
57
+ ![](c123303ce55797dc1e189a5ffaf02c83.png)
58
+
59
+ ↓画像3:ブランド名選択後
60
+
61
+ ![](9b0ff5048fd394b1a1ccc8fba2f353e2.png)
62
+
63
+ ここでは本来"product-1"が一つだけ表示されれば意図した動作になります。
64
+
65
+
66
+
67
+ ##### 仮説
68
+
69
+ 大きく分けて二つの問題が原因で実装が進展していないと考えます。
70
+
71
+ - 問題A: Ajaxで通信が成功した後の処理が実行されない
72
+
73
+
74
+
75
+ - 問題B: 上記処理で、option要素追加を実行するコマンドを抽象的にかけない
76
+
77
+
78
+
79
+ ### 該当のソースコード
80
+
81
+ app/javascript/packs/application.js
82
+
83
+ ```
84
+
85
+ /* setting */
86
+
87
+ import Rails from "@rails/ujs"
88
+
89
+ import Turbolinks from "turbolinks"
90
+
91
+ import * as ActiveStorage from "@rails/activestorage"
92
+
93
+ import "channels"
94
+
95
+
96
+
97
+ Rails.start()
98
+
99
+ Turbolinks.start()
100
+
101
+ ActiveStorage.start()
102
+
103
+ require("jquery/src/jquery")
104
+
105
+ import "bootstrap"
106
+
107
+
108
+
109
+ /* post form */
110
+
111
+ /* select Product form after choosing Brand */
112
+
113
+ $(document).on('turbolinks:load', function () {
114
+
115
+ $(function () {
116
+
117
+ var selectField = $('.js-select_field').on('change', function (){
118
+
119
+ var brand_id = selectField.val();
120
+
121
+ $.ajax({
122
+
123
+ type: 'GET', // リクエストのタイプ
124
+
125
+ url: '/reviews/picks', // リクエストを送信するURL
126
+
127
+ data: { brand_id: brand_id }, // サーバーに送信するデータ
128
+
129
+ dataType: 'json' // サーバーから返却される型
130
+
131
+ })
132
+
133
+ .done(function (data) {
134
+
135
+ $('#review_product_id').children().remove(); //製品選択肢を削除
136
+
137
+ $(data).each(function(i,review) {
138
+
139
+ $('.js-receive_field').append(
140
+
141
+ $("<option>").val(i).text(review.brands.name));
142
+
143
+ });
144
+
145
+ });
146
+
147
+ });
148
+
149
+ });
150
+
151
+ });
152
+
153
+ ```
154
+
155
+
156
+
157
+ ####Controller
158
+
159
+ app/controllers/reviews/picks_controller.rb
160
+
161
+ ```ruby
162
+
163
+ class Reviews::PicksController < ApplicationController
164
+
165
+ def index
166
+
167
+ @reviews = Review.find(params[:brand_id])
168
+
169
+ respond_to do |format| # リクエスト形式によって処理を切り分ける
170
+
171
+ format.html { redirect_to :root } # html形式の場合
172
+
173
+ format.json { render json: @reviews } # json形式の場合
174
+
175
+ end
176
+
177
+ end
178
+
179
+ end
180
+
181
+ ```
182
+
183
+
184
+
185
+ config/routes.rb
186
+
187
+ ```
188
+
189
+ Rails.application.routes.draw do
190
+
191
+ devise_for :users, controllers: { registrations: 'users/registrations', sessions: 'users/sessions', users: 'users' }
192
+
193
+ root 'pages#index'
194
+
195
+ get '/about', to: 'pages#about'
196
+
197
+ get '/contact', to: 'pages#contact'
198
+
199
+ resources :users, only: [:index, :show]
200
+
201
+ namespace :reviews do
202
+
203
+ resources :picks, only: :index, defaults: { format: :json }
204
+
205
+ end
206
+
207
+ resources :reviews, only: [:create, :destroy, :new]
208
+
209
+ resources :products
210
+
211
+ resources :brands
212
+
213
+
214
+
215
+ # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
216
+
217
+ end
218
+
219
+ ```
220
+
221
+
222
+
223
+ app/controllers/reviews_controller.rb
224
+
225
+ ```reviews_controller.rb
226
+
227
+ class ReviewsController < ApplicationController
228
+
229
+ before_action :authenticate_user!, only:[:create, :destroy, :new]
230
+
231
+ before_action :correct_user, only:[:destroy]
232
+
233
+
234
+
235
+ def create
236
+
237
+ @review = current_user.reviews.build(review_params)
238
+
239
+ if @review.save
240
+
241
+ redirect_to root_url
242
+
243
+ else
244
+
245
+ render 'pages/show'
246
+
247
+ end
248
+
249
+ end
250
+
251
+
252
+
253
+ private
254
+
255
+ def review_params
256
+
257
+ params.require(:review).permit(:content, :user_id, :product_id)
258
+
259
+ end
260
+
261
+
262
+
263
+ def correct_user
264
+
265
+ @review = current_user.reviews.find_by(id: params[:id])
266
+
267
+ redirect_to root_url unless current_user
268
+
269
+ end
270
+
271
+ end
272
+
273
+ ```
274
+
275
+
276
+
277
+ #####Model
278
+
279
+ - ER図 (関連するところを抜粋)
280
+
281
+ ![](18a91ab92d3903597875f7be36d92595.png)
282
+
283
+
284
+
285
+ db/schema.rb(一部省略)
286
+
287
+ ```ruby
288
+
289
+
290
+
291
+ create_table "brands", charset: "utf8mb4", force: :cascade do |t|
292
+
293
+ t.string "name"
294
+
295
+ t.datetime "created_at", precision: 6, null: false
296
+
297
+ t.datetime "updated_at", precision: 6, null: false
298
+
299
+ end
300
+
301
+
302
+
303
+ create_table "products", charset: "utf8mb4", force: :cascade do |t|
304
+
305
+ t.string "name"
306
+
307
+ t.datetime "created_at", precision: 6, null: false
308
+
309
+ t.datetime "updated_at", precision: 6, null: false
310
+
311
+ t.bigint "brand_id", null: false
312
+
313
+ t.index ["brand_id"], name: "index_products_on_brand_id"
314
+
315
+ end
316
+
317
+
318
+
319
+ create_table "reviews", charset: "utf8mb4", force: :cascade do |t|
320
+
321
+ t.text "content"
322
+
323
+ t.bigint "user_id", null: false
324
+
325
+ t.datetime "created_at", precision: 6, null: false
326
+
327
+ t.datetime "updated_at", precision: 6, null: false
328
+
329
+ t.bigint "product_id", null: false
330
+
331
+ t.index ["product_id"], name: "index_reviews_on_product_id"
332
+
333
+ t.index ["user_id", "created_at"], name: "index_reviews_on_user_id_and_created_at"
334
+
335
+ t.index ["user_id"], name: "index_reviews_on_user_id"
336
+
337
+ end
338
+
339
+
340
+
341
+ create_table "users", charset: "utf8mb4", force: :cascade do |t|
342
+
343
+ t.datetime "created_at", precision: 6, null: false
344
+
345
+ t.datetime "updated_at", precision: 6, null: false
346
+
347
+ t.string "name"
348
+
349
+ end
350
+
351
+
352
+
353
+ add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
354
+
355
+ add_foreign_key "active_storage_variant_records", "active_storage_blobs", column: "blob_id"
356
+
357
+ add_foreign_key "products", "brands"
358
+
359
+ add_foreign_key "reviews", "products"
360
+
361
+ add_foreign_key "reviews", "users"
362
+
363
+ end
364
+
365
+ ```
366
+
367
+
368
+
369
+ app/models/review.rb
370
+
371
+ ```ruby
372
+
373
+ class Review < ApplicationRecord
374
+
375
+ belongs_to :user
376
+
377
+ belongs_to :product
378
+
379
+ validates :user_id, presence: true
380
+
381
+ validates :product_id, presence: true
382
+
383
+ validates :content, presence: true, length: { maximum: 140 }
384
+
385
+ end
386
+
387
+ ```
388
+
389
+
390
+
391
+ app/models/product.rb
392
+
393
+ ```
394
+
395
+ class Product < ApplicationRecord
396
+
397
+ has_many :reviews
398
+
399
+ belongs_to :brand
400
+
401
+ has_one_attached :image
402
+
403
+ validates :brand_id, presence: true
404
+
405
+ validates :name, presence: true
406
+
407
+ validates :soc_antutu_score, presence: true
408
+
409
+ validates :battery_capacity, presence: true
410
+
411
+ end
412
+
413
+ ```
414
+
415
+
416
+
417
+ app/models/brand.rb
418
+
419
+ ```
420
+
421
+ class Brand < ApplicationRecord
422
+
423
+ has_many :products
424
+
425
+ has_one_attached :image
426
+
427
+ validates :name, presence: true, \
428
+
429
+ uniqueness: true, length: {maximum: 50}
430
+
431
+ end
432
+
433
+ ```
434
+
435
+
436
+
437
+ #### Views
438
+
439
+
440
+
441
+ app/views/layouts/application.html.slim
442
+
443
+ ```
444
+
445
+ doctype html
446
+
447
+ html
448
+
449
+ head
450
+
451
+ title
452
+
453
+ | SmaR
454
+
455
+ meta[name="viewport" content="width=device-width,initial-scale=1"]
456
+
457
+ = csrf_meta_tags
458
+
459
+ = csp_meta_tag
460
+
461
+ = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
462
+
463
+ = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
464
+
465
+ = stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload'
466
+
467
+
468
+
469
+ body
470
+
471
+ header
472
+
473
+ (省略)
474
+
475
+ = yield
476
+
477
+ = debug(params) if Rails.env.development?
478
+
479
+ ```
480
+
481
+
482
+
483
+ app/views/reviews/new.html.slim
484
+
485
+ ```
486
+
487
+ h1 投稿画面
488
+
489
+ = render 'reviews/form'
490
+
491
+ ```
492
+
493
+
494
+
495
+ app/views/reviews/_form.html.slim
496
+
497
+ ```
498
+
499
+ .container
500
+
501
+ .row
502
+
503
+ .col-12.col-md-6.offset-md-3
504
+
505
+ .card.px-3.my-3
506
+
507
+ = form_with(model: @review, local: true) do |f|
508
+
509
+ = render 'devise/shared/error_messages', object: f.object
510
+
511
+
512
+
513
+ .field.py-3
514
+
515
+ = f.collection_select(:brand_id, @brands, :id, :name, {prompt: "ブランド名"}, {class: "js-select_field form-control"})
516
+
517
+
518
+
519
+ .field.pb-3
520
+
521
+ = f.collection_select(:product_id, @products, :id, :name, {}, {class: "js-receive_field form-control"})
522
+
523
+
524
+
525
+ .field.pb-3
526
+
527
+ = f.text_area :content, placeholder: "Write down some comment.", class: "form-control"
528
+
529
+ .d-grid
530
+
531
+ = f.submit "Post", class: "btn btn-primary mb-3"
532
+
533
+ ```
534
+
535
+
536
+
537
+ ### 試したこと
538
+
539
+ ・(Adblockerなど)ブラウザ側でjavaScriptがブロックされていないか?
540
+
541
+ => 確認済。ブロック停止状態になっています。
542
+
543
+
544
+
545
+ 自分で入力した jQuery のプログラムを、ブラウザーのコンソールから実行しました。セレクター・メソッドが適切か調べるためです。
546
+
547
+
548
+
549
+ ・option要素が消えるか確認
550
+
551
+ ```
552
+
553
+ $('#review_product_id').children().remove(); //製品選択肢を削除
554
+
555
+ #=> option要素が消えることを確認
556
+
557
+ ```
558
+
559
+
560
+
561
+ ・option要素の追加はできるのか確認
562
+
563
+ 動的に追加するために抽象的にすると分からなくなったので、value・文章を指定してoption要素を追加する方法を確認しました。
564
+
565
+
566
+
567
+ ```
568
+
569
+ (function(i,review) {
570
+
571
+ $('.js-receive_field').append(
572
+
573
+ $("<option>").val("1").text("select-1"));
574
+
575
+ });
576
+
577
+ #=> <option value="1">select-1</option>が追加されるのを確認。
578
+
579
+ ```
580
+
581
+
582
+
583
+ ・function(data)の data の中身を確認しました。
584
+
585
+ ```
586
+
587
+ $(document).on('turbolinks:load', function () {
588
+
589
+ $(function () {
590
+
591
+ var selectField = $('.js-select_field').on('change', function (){
592
+
593
+ var brand_id = selectField.val();
594
+
595
+ $.ajax({
596
+
597
+ type: 'GET', // リクエストのタイプ
598
+
599
+ url: '/reviews/picks', // リクエストを送信するURL
600
+
601
+ data: { brand_id: brand_id }, // サーバーに送信するデータ
602
+
603
+ dataType: 'json' // サーバーから返却される型
604
+
605
+ })
606
+
607
+ .done(function (data) {
608
+
609
+ console.log(data); // dataを確認する
610
+
611
+ });
612
+
613
+ });
614
+
615
+ });
616
+
617
+ ```
618
+
619
+ ![](9331d64965d64790ec04b3b0b93fb4f2.png)
620
+
621
+
622
+
623
+ product_id が確認できるので、これを基にしてproductの名前を追加できないかなと思いました。
624
+
625
+
626
+
627
+ ### 補足情報(FW/ツールのバージョンなど)
628
+
629
+
630
+
631
+ 今回初質問です。アドバイス・質問の仕方などで不適切な点ございましたら、ご遠慮なくご指摘いただけましたら幸いです。
632
+
633
+
634
+
11
635
  ###### 環境等
12
636
 
13
637
  ・AWS Cloud9 (Ubuntu 18.04.5 LTS, Bionic Beaver)
@@ -96,624 +720,6 @@
96
720
 
97
721
 
98
722
 
99
- ######学習歴
100
-
101
- ・CS基礎(キタミ式イラストIT塾 基本情報技術者)
102
-
103
- ・Linux基礎(Linux標準教科書)
104
-
105
- ・HTML/CSS/JavaScript基礎(ドットインストール)
106
-
107
- ・Railsチュートリアル 2週程度
108
-
109
-
110
-
111
-
112
-
113
- ### 発生している問題・エラーメッセージ
114
-
115
-
116
-
117
- ###### 期待する動作
118
-
119
- ブランド名(セレクトボックス)で項目選択
120
-
121
-
122
-
123
- 選択したブランドに 該当する製品のみ を選択できるようにする。
124
-
125
-
126
-
127
-
128
-
129
- 下記画像で言い換えますと、
130
-
131
-
132
-
133
-
134
-
135
- ↓画像1:投稿画面を開いた直後
136
-
137
- ![](ae790dd0d160efb9981a8baf91365e99.png)
138
-
139
- ↓画像2:ブランド名選択後
140
-
141
- ![](c123303ce55797dc1e189a5ffaf02c83.png)
142
-
143
- ↓画像3:ブランド名選択後
144
-
145
- ![](9b0ff5048fd394b1a1ccc8fba2f353e2.png)
146
-
147
- ここでは本来"product-1"が一つだけ表示されれば意図した動作になります。
148
-
149
-
150
-
151
- ##### 仮説
152
-
153
- 大きく分けて二つの問題が原因で実装が進展していないと考えます。
154
-
155
- - 問題A: Ajaxで通信が成功した後の処理が実行されない
156
-
157
-
158
-
159
- - 問題B: 上記処理で、option要素追加を実行するコマンドを抽象的にかけない
160
-
161
-
162
-
163
- ### 該当のソースコード
164
-
165
- app/javascript/packs/application.js
166
-
167
- ```
168
-
169
- /* setting */
170
-
171
- import Rails from "@rails/ujs"
172
-
173
- import Turbolinks from "turbolinks"
174
-
175
- import * as ActiveStorage from "@rails/activestorage"
176
-
177
- import "channels"
178
-
179
-
180
-
181
- Rails.start()
182
-
183
- Turbolinks.start()
184
-
185
- ActiveStorage.start()
186
-
187
- require("jquery/src/jquery")
188
-
189
- import "bootstrap"
190
-
191
-
192
-
193
- /* post form */
194
-
195
- /* select Product form after choosing Brand */
196
-
197
- $(document).on('turbolinks:load', function () {
198
-
199
- $(function () {
200
-
201
- var selectField = $('.js-select_field').on('change', function (){
202
-
203
- var brand_id = selectField.val();
204
-
205
- $.ajax({
206
-
207
- type: 'GET', // リクエストのタイプ
208
-
209
- url: '/reviews/picks', // リクエストを送信するURL
210
-
211
- data: { brand_id: brand_id }, // サーバーに送信するデータ
212
-
213
- dataType: 'json' // サーバーから返却される型
214
-
215
- })
216
-
217
- .done(function (data) {
218
-
219
- $('#review_product_id').children().remove(); //製品選択肢を削除
220
-
221
- $(data).each(function(i,review) {
222
-
223
- $('.js-receive_field').append(
224
-
225
- $("<option>").val(i).text(review.brands.name));
226
-
227
- });
228
-
229
- });
230
-
231
- });
232
-
233
- });
234
-
235
- });
236
-
237
- ```
238
-
239
-
240
-
241
- ####Controller
242
-
243
- app/controllers/reviews/picks_controller.rb
244
-
245
- ```ruby
246
-
247
- class Reviews::PicksController < ApplicationController
248
-
249
- def index
250
-
251
- @reviews = Review.find(params[:brand_id])
252
-
253
- respond_to do |format| # リクエスト形式によって処理を切り分ける
254
-
255
- format.html { redirect_to :root } # html形式の場合
256
-
257
- format.json { render json: @reviews } # json形式の場合
258
-
259
- end
260
-
261
- end
262
-
263
- end
264
-
265
- ```
266
-
267
-
268
-
269
- config/routes.rb
270
-
271
- ```
272
-
273
- Rails.application.routes.draw do
274
-
275
- devise_for :users, controllers: { registrations: 'users/registrations', sessions: 'users/sessions', users: 'users' }
276
-
277
- root 'pages#index'
278
-
279
- get '/about', to: 'pages#about'
280
-
281
- get '/contact', to: 'pages#contact'
282
-
283
- resources :users, only: [:index, :show]
284
-
285
- namespace :reviews do
286
-
287
- resources :picks, only: :index, defaults: { format: :json }
288
-
289
- end
290
-
291
- resources :reviews, only: [:create, :destroy, :new]
292
-
293
- resources :products
294
-
295
- resources :brands
296
-
297
-
298
-
299
- # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html
300
-
301
- end
302
-
303
- ```
304
-
305
-
306
-
307
- app/controllers/reviews_controller.rb
308
-
309
- ```reviews_controller.rb
310
-
311
- class ReviewsController < ApplicationController
312
-
313
- before_action :authenticate_user!, only:[:create, :destroy, :new]
314
-
315
- before_action :correct_user, only:[:destroy]
316
-
317
-
318
-
319
- def create
320
-
321
- @review = current_user.reviews.build(review_params)
322
-
323
- if @review.save
324
-
325
- redirect_to root_url
326
-
327
- else
328
-
329
- render 'pages/show'
330
-
331
- end
332
-
333
- end
334
-
335
-
336
-
337
- private
338
-
339
- def review_params
340
-
341
- params.require(:review).permit(:content, :user_id, :product_id)
342
-
343
- end
344
-
345
-
346
-
347
- def correct_user
348
-
349
- @review = current_user.reviews.find_by(id: params[:id])
350
-
351
- redirect_to root_url unless current_user
352
-
353
- end
354
-
355
- end
356
-
357
- ```
358
-
359
-
360
-
361
- #####Model
362
-
363
- - ER図 (関連するところを抜粋)
364
-
365
- ![](18a91ab92d3903597875f7be36d92595.png)
366
-
367
-
368
-
369
- db/schema.rb(一部省略)
370
-
371
- ```ruby
372
-
373
-
374
-
375
- create_table "brands", charset: "utf8mb4", force: :cascade do |t|
376
-
377
- t.string "name"
378
-
379
- t.datetime "created_at", precision: 6, null: false
380
-
381
- t.datetime "updated_at", precision: 6, null: false
382
-
383
- end
384
-
385
-
386
-
387
- create_table "products", charset: "utf8mb4", force: :cascade do |t|
388
-
389
- t.string "name"
390
-
391
- t.datetime "created_at", precision: 6, null: false
392
-
393
- t.datetime "updated_at", precision: 6, null: false
394
-
395
- t.bigint "brand_id", null: false
396
-
397
- t.index ["brand_id"], name: "index_products_on_brand_id"
398
-
399
- end
400
-
401
-
402
-
403
- create_table "reviews", charset: "utf8mb4", force: :cascade do |t|
404
-
405
- t.text "content"
406
-
407
- t.bigint "user_id", null: false
408
-
409
- t.datetime "created_at", precision: 6, null: false
410
-
411
- t.datetime "updated_at", precision: 6, null: false
412
-
413
- t.bigint "product_id", null: false
414
-
415
- t.index ["product_id"], name: "index_reviews_on_product_id"
416
-
417
- t.index ["user_id", "created_at"], name: "index_reviews_on_user_id_and_created_at"
418
-
419
- t.index ["user_id"], name: "index_reviews_on_user_id"
420
-
421
- end
422
-
423
-
424
-
425
- create_table "users", charset: "utf8mb4", force: :cascade do |t|
426
-
427
- t.datetime "created_at", precision: 6, null: false
428
-
429
- t.datetime "updated_at", precision: 6, null: false
430
-
431
- t.string "name"
432
-
433
- end
434
-
435
-
436
-
437
- add_foreign_key "active_storage_attachments", "active_storage_blobs", column: "blob_id"
438
-
439
- add_foreign_key "active_storage_variant_records", "active_storage_blobs", column: "blob_id"
440
-
441
- add_foreign_key "products", "brands"
442
-
443
- add_foreign_key "reviews", "products"
444
-
445
- add_foreign_key "reviews", "users"
446
-
447
- end
448
-
449
- ```
450
-
451
-
452
-
453
- app/models/review.rb
454
-
455
- ```ruby
456
-
457
- class Review < ApplicationRecord
458
-
459
- belongs_to :user
460
-
461
- belongs_to :product
462
-
463
- validates :user_id, presence: true
464
-
465
- validates :product_id, presence: true
466
-
467
- validates :content, presence: true, length: { maximum: 140 }
468
-
469
- end
470
-
471
- ```
472
-
473
-
474
-
475
- app/models/product.rb
476
-
477
- ```
478
-
479
- class Product < ApplicationRecord
480
-
481
- has_many :reviews
482
-
483
- belongs_to :brand
484
-
485
- has_one_attached :image
486
-
487
- validates :brand_id, presence: true
488
-
489
- validates :name, presence: true
490
-
491
- validates :soc_antutu_score, presence: true
492
-
493
- validates :battery_capacity, presence: true
494
-
495
- end
496
-
497
- ```
498
-
499
-
500
-
501
- app/models/brand.rb
502
-
503
- ```
504
-
505
- class Brand < ApplicationRecord
506
-
507
- has_many :products
508
-
509
- has_one_attached :image
510
-
511
- validates :name, presence: true, \
512
-
513
- uniqueness: true, length: {maximum: 50}
514
-
515
- end
516
-
517
- ```
518
-
519
-
520
-
521
- #### Views
522
-
523
-
524
-
525
- app/views/layouts/application.html.slim
526
-
527
- ```
528
-
529
- doctype html
530
-
531
- html
532
-
533
- head
534
-
535
- title
536
-
537
- | SmaR
538
-
539
- meta[name="viewport" content="width=device-width,initial-scale=1"]
540
-
541
- = csrf_meta_tags
542
-
543
- = csp_meta_tag
544
-
545
- = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
546
-
547
- = javascript_pack_tag 'application', 'data-turbolinks-track': 'reload'
548
-
549
- = stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload'
550
-
551
-
552
-
553
- body
554
-
555
- header
556
-
557
- (省略)
558
-
559
- = yield
560
-
561
- = debug(params) if Rails.env.development?
562
-
563
- ```
564
-
565
-
566
-
567
- app/views/reviews/new.html.slim
568
-
569
- ```
570
-
571
- h1 投稿画面
572
-
573
- = render 'reviews/form'
574
-
575
- ```
576
-
577
-
578
-
579
- app/views/reviews/_form.html.slim
580
-
581
- ```
582
-
583
- .container
584
-
585
- .row
586
-
587
- .col-12.col-md-6.offset-md-3
588
-
589
- .card.px-3.my-3
590
-
591
- = form_with(model: @review, local: true) do |f|
592
-
593
- = render 'devise/shared/error_messages', object: f.object
594
-
595
-
596
-
597
- .field.py-3
598
-
599
- = f.collection_select(:brand_id, @brands, :id, :name, {prompt: "ブランド名"}, {class: "js-select_field form-control"})
600
-
601
-
602
-
603
- .field.pb-3
604
-
605
- = f.collection_select(:product_id, @products, :id, :name, {}, {class: "js-receive_field form-control"})
606
-
607
-
608
-
609
- .field.pb-3
610
-
611
- = f.text_area :content, placeholder: "Write down some comment.", class: "form-control"
612
-
613
- .d-grid
614
-
615
- = f.submit "Post", class: "btn btn-primary mb-3"
616
-
617
- ```
618
-
619
-
620
-
621
- ### 試したこと
622
-
623
- ・(Adblockerなど)ブラウザ側でjavaScriptがブロックされていないか?
624
-
625
- => 確認済。ブロック停止状態になっています。
626
-
627
-
628
-
629
- 自分で入力した jQuery のプログラムを、ブラウザーのコンソールから実行しました。セレクター・メソッドが適切か調べるためです。
630
-
631
-
632
-
633
- ・option要素が消えるか確認
634
-
635
- ```
636
-
637
- $('#review_product_id').children().remove(); //製品選択肢を削除
638
-
639
- #=> option要素が消えることを確認
640
-
641
- ```
642
-
643
-
644
-
645
- ・option要素の追加はできるのか確認
646
-
647
- 動的に追加するために抽象的にすると分からなくなったので、value・文章を指定してoption要素を追加する方法を確認しました。
648
-
649
-
650
-
651
- ```
652
-
653
- (function(i,review) {
654
-
655
- $('.js-receive_field').append(
656
-
657
- $("<option>").val("1").text("select-1"));
658
-
659
- });
660
-
661
- #=> <option value="1">select-1</option>が追加されるのを確認。
662
-
663
- ```
664
-
665
-
666
-
667
- ・function(data)の data の中身を確認しました。
668
-
669
- ```
670
-
671
- $(document).on('turbolinks:load', function () {
672
-
673
- $(function () {
674
-
675
- var selectField = $('.js-select_field').on('change', function (){
676
-
677
- var brand_id = selectField.val();
678
-
679
- $.ajax({
680
-
681
- type: 'GET', // リクエストのタイプ
682
-
683
- url: '/reviews/picks', // リクエストを送信するURL
684
-
685
- data: { brand_id: brand_id }, // サーバーに送信するデータ
686
-
687
- dataType: 'json' // サーバーから返却される型
688
-
689
- })
690
-
691
- .done(function (data) {
692
-
693
- console.log(data); // dataを確認する
694
-
695
- });
696
-
697
- });
698
-
699
- });
700
-
701
- ```
702
-
703
- ![](9331d64965d64790ec04b3b0b93fb4f2.png)
704
-
705
-
706
-
707
- product_id が確認できるので、これを基にしてproductの名前を追加できないかなと思いました。
708
-
709
-
710
-
711
- ### 補足情報(FW/ツールのバージョンなど)
712
-
713
-
714
-
715
- 今回初質問です。アドバイス・質問の仕方などで不適切な点ございましたら、ご遠慮なくご指摘いただけましたら幸いです。
716
-
717
723
 
718
724
 
719
725
  ####参考にしたURL

1

字数オーバーにより前提環境の編集

2021/04/28 13:38

投稿

miisha002
miisha002

スコア0

test CHANGED
File without changes
test CHANGED
@@ -8,6 +8,108 @@
8
8
 
9
9
 
10
10
 
11
+ ###### 環境等
12
+
13
+ ・AWS Cloud9 (Ubuntu 18.04.5 LTS, Bionic Beaver)
14
+
15
+ ・Rails 6.1.3.1
16
+
17
+ ・Ruby 2.6.6p146
18
+
19
+ ・Bundler version 2.0.2
20
+
21
+ ・gem 3.0.8
22
+
23
+ ```Gemfile
24
+
25
+ source 'https://rubygems.org'
26
+
27
+ git_source(:github) { |repo| "https://github.com/#{repo}.git" }
28
+
29
+
30
+
31
+ gem 'rails', '~> 6.1.2', '>= 6.1.2.1'
32
+
33
+ gem 'mysql2', '~> 0.5'
34
+
35
+ gem 'dotenv-rails'
36
+
37
+ gem 'puma', '~> 5.0'
38
+
39
+ gem 'sass-rails', '>= 6'
40
+
41
+ gem 'webpacker', '~> 5.0'
42
+
43
+ gem 'turbolinks', '~> 5'
44
+
45
+ gem 'jbuilder', '~> 2.7'
46
+
47
+
48
+
49
+ gem 'bootsnap', '>= 1.4.4', require: false
50
+
51
+
52
+
53
+ gem 'html2slim'
54
+
55
+ gem 'slim-rails'
56
+
57
+
58
+
59
+ gem 'bootstrap', '~> 5.0.0.beta1'
60
+
61
+ gem 'font-awesome-rails', '~> 4.7', '>= 4.7.0.7'
62
+
63
+
64
+
65
+ gem 'devise', '~> 4.7', '>= 4.7.3'
66
+
67
+
68
+
69
+ gem 'active_storage_validations'
70
+
71
+ gem 'image_processing'
72
+
73
+ gem 'mini_magick'
74
+
75
+
76
+
77
+ gem 'pry-rails'
78
+
79
+ gem 'pry-byebug', '~> 3.7'
80
+
81
+
82
+
83
+ gem 'faker', '~> 2.16'
84
+
85
+
86
+
87
+ gem 'mimemagic', '~> 0.4.3'
88
+
89
+
90
+
91
+ gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
92
+
93
+
94
+
95
+ ```
96
+
97
+
98
+
99
+ ######学習歴
100
+
101
+ ・CS基礎(キタミ式イラストIT塾 基本情報技術者)
102
+
103
+ ・Linux基礎(Linux標準教科書)
104
+
105
+ ・HTML/CSS/JavaScript基礎(ドットインストール)
106
+
107
+ ・Railsチュートリアル 2週程度
108
+
109
+
110
+
111
+
112
+
11
113
  ### 発生している問題・エラーメッセージ
12
114
 
13
115