[Rails] 多対多のテーブルからデータを取得する

Question

プログラミング初心者です。アプリを１から作成しているのですが、完全に詰まってしまったので、ご教授いただけると幸いです。 ### 実現したいこと商品の登録ができるようにしたいです。以下のテーブルを作成したところ、regular_priceやdiscounted_priceはproductsテーブルに定義されていないとエラーが出てしまいます。調べても引っ張ってくる方法が分からず、、、どうしたら良いのでしょうか？ productsテーブル ```ここに言語を入力 user_id name ``` product_storesテーブル ```ここに言語を入力 product_id store_id regular_price discounted_price ``` storesテーブル ``` name ``` products_controller.rb ```ruby def new @product = Product.new end def create @product = current_user.products.build(product_params) if @product.save redirect_to products_path, success: t('defaults.message.register', item: Product.model_name.human) else flash.now[:alert] = t('defaults.message.not_register', item: Product.model_name.human) render :new end end private def product_params params.require(:product).permit(:product_name, :store_name, :regular_price, :discounted_price) end ``` app/views/products/new.html.erb ```ruby <% content_for(:title, t('.title')) %>

<%= t('.title') %>

<%= form_with model: @product, local: true do |f| %> <%= render 'layouts/error_messages', model: f.object %>

<%= f.label :product_name %> <%= f.text_field :product_name, class: 'form-control' %>

<%= f.label :store_name %> <%= f.text_field :store_name, class: 'form-control' %>

<%= f.label :regular_price %> <%= f.text_field :regular_price, class: 'form-control' %>

<%= f.label :discounted_price %> <%= f.text_field :discounted_price, class: 'form-control' %>

<%= f.submit t('defaults.signup'), class: 'btn btn-primary' %> <% end %>

```

Accepted Answer

## ステップ１・既存の store の一覧から選択できるよう変更モデルに `accepts_nested_attributes_for :一緒に保存したいアソシエーションの名前` を追加します。 ```diff [models] class Product < ApplicationRecord belongs_to :user has_many :product_stores has_many :stores, through: :product_stores + accepts_nested_attributes_for :product_stores, reject_if: :all_blank end ``` model に合わせて view を修正します。先ほどの `accepts_nested_attributes_for` に応じた `fields_for` を定義します。 ```diff [views] <%= form_with model: @product, local: true do |f| %> <%= render 'layouts/error_messages', model: f.object %>

- <%= f.label :product_name %> - <%= f.text_field :product_name, class: 'form-control' %> + <%= f.label :name %> + <%= f.text_field :name, class: 'form-control' %>

+ <%= f.fields_for :product_stores do |product_stores_form| %>

- <%= f.label :store_name %> - <%= f.text_field :store_name, class: 'form-control' %> + <%= product_stores_form.label :store %> + <%= product_stores_form.select :store_id, @store_list, {}, { class: 'form-control' } %> + <%# @store_list は後程コントローラーにて定義 ↑ %>

- <%= f.label :regular_price %> - <%= f.text_field :regular_price, class: 'form-control' %> + <%= product_stores_form.label :regular_price %> + <%= product_stores_form.text_field :regular_price, class: 'form-control' %>

- <%= f.label :discounted_price %> - <%= f.text_field :discounted_price, class: 'form-control' %> + <%= product_stores_form.label :discounted_price %> + <%= product_stores_form.text_field :discounted_price, class: 'form-control' %>

+ <% end %> <%= f.submit 'submit', class: 'btn btn-primary' %> <% end %> ``` view に表示するための @store_list を作成します。 ```diff [controllers] class ProductsController < ApplicationController + before_action :set_store_list, only: %i[new create edit update] private + # セレクトボックスの選択肢 + def set_store_list + @store_list = [ + ['選択してください', nil], + *Store.all.pluck(:name, :id), + ] + end ``` view から送られたデータを正しく受け取れるよう、 controller を修正します。 ```diff [controllers] def product_params - params.require(:product).permit(:product_name, :store_name, :regular_price, :discounted_price) + params.require(:product).permit(:name, + product_stores_attributes: [ + :id, + :store_id, + :regular_price, + :discounted_price, + ]) end ``` データの新規作成時は product に紐づく product_stores が存在しないため、 fields_for 部分に何も出力されません。それでは困るので、入力フィールドが画面に表示されるように、コントローラで空データを build します。 ```diff [controllers] def new @product = Product.new + # 表示用に3件ぶんの空データを作成 + 3.times do + @product.product_stores.build + end end ``` ここまでで、おそらく既存の store から選択して登録する処理はうまくいくと思います。 ## ステップ２・新規 store を登録できるよう機能追加ここから少しトリッキーになります。まずはセレクトボックスの選択肢に「(新規 store を登録)」を追加します。 ```diff [controllers] # セレクトボックスの選択肢 def set_store_list @store_list = [ ['選択してください', nil], *Store.all.pluck(:name, :id), + ['(新規 store を登録)', 'new-store'], ] end ``` 新規 store 名を入力するための attribute を定義します。 ```diff [models] class ProductStore < ApplicationRecord + attr_reader :new_store_name belongs_to :product belongs_to :store + def new_store_name=(name) + build_store(id: nil, name: name) if name.present? + + @new_store_name = name + end end ``` 画面に入力フィールドを追加します。 ```diff [views] <%= f.fields_for :product_stores do |product_stores_form| %>

<%= product_stores_form.label :store %> <%= product_stores_form.select :store_id, @store_list, {}, { class: 'form-control' } %> + <%= product_stores_form.text_field :new_store_name, + class: 'form-control', + placeholder: '新しい store の名前を入力してください', + disabled: product_stores_form.object.new_store_name.blank?, + hidden: product_stores_form.object.new_store_name.blank? %>

``` javascript で入力フィールドの表示・非表示を切り替える機能を実装します。 ```diff [javascript] + document.querySelectorAll('select').forEach((select) => { + select.addEventListener('change', () => { + if (select.value === 'new-store') { + select.nextElementSibling.disabled = false; + select.nextElementSibling.hidden = false; + } else { + select.nextElementSibling.disabled = true; + select.nextElementSibling.hidden = true; + } + }); + }); ``` 画面パラメータを受け取れるよう permit を変更します。 ```diff [controllers] def product_params params.require(:product).permit(:name, product_stores_attributes: [ :id, :store_id, + :new_store_name, :regular_price, :discounted_price, ]) end ``` ここまでで、画面から新たな store が登録できるようになっているはずです。 ## ステップ３・一覧画面の変更特に解説することはないです。 html は適当なので table タグなどを使って良い感じに整えてください。 ```erb <%= @product.name %> 　　　店舗名　　　　　　特別価格　　　通常価格 <% @product.product_stores.each do |product_store| %> 　　<%= product_store.store.name %> 　　<%= product_store.regular_price %> 円　　<%= product_store.discounted_price %> 円 <% end %> ``` ## ステップ４・登録画面で動的に入力欄を追加するいまの登録画面では、固定で３件分の store の入力欄が表示され、それ以上増やすことができません。回答がかなり長くなってしまったので詳細な解説は省きますが、gem cocoon を導入すればその辺りも解決できると思うので、ドキュメントを確認してみてください。 https://github.com/nathanvda/cocoon

実現したいこと

ステップ１・既存の store の一覧から選択できるよう変更

ステップ２・新規 store を登録できるよう機能追加

ステップ３・一覧画面の変更

ステップ４・登録画面で動的に入力欄を追加する

関連した質問