Rails gem "refile" で複数画像を投稿後、indexページに最初の一枚のみずつeach表示させたい

Question

現在Rails でアプリを作成しています。
美味しかったお店の写真を複数枚と感想などを併せて投稿する機能を実装中に以下のエラーメッセージが発生しました。
https://qiita.com/japwork/items/dcca7ead2d3c334b124c
https://qiita.com/corogit/items/3aeb3076115de2d26283
を参考にしたのですが、最後の一覧表示でどうも上手く動いてくれません。
shops/indexに投稿された写真の一枚目のみがそれぞれ表示されるようにしたいです。
（将来的にはスライダーを使って複数枚表示せられるように変更する予定です。）

#発生しているエラー

NoMethodError in Shops#index

Showing /home/ec2-user/environment/shokupanbu/app/views/shops/index.html.erb where line #6 raised:

undefined method `shop_images' for #<Shop::ActiveRecord_Relation:0x00007ffa3820a960>
Extracted source (around line #6):

<div class="row">
      <div class="col-lg-12">
        <% @shops.shop_images.first(1).each do |image| %>
          <div id="slider">
            <%= attachment_image_tag image, :image, :fill, 350, 350, size: "350x350" %>
          </div>

Rails.root: /home/ec2-user/environment/shokupanbu

Application Trace | Framework Trace | Full Trace
app/views/shops/index.html.erb:6:in `_app_views_shops_index_html_erb___3230042918495568755_70356330104460'

#該当のソースコード
/app/views/shops/new.html.erb

<main>
  <h2 class="title">NEW SHOP</h2>
  <div class="container">
    <div class="row">
      <div class="col-lg-6 mx-auto">
        <h3>食パン 新規投稿フォーム</h3>
        <p class="text-danger mb-5">※印は必須項目です。</p>
        <%= form_with model: @shop, local:true do |f| %>
          <div class="form-group">
            <%= f.label :image, "画像" %><span class="text-danger">※</span>
            <%= f.attachment_field :shop_images_images, multiple: true %>
          </div>
          <div class="form-group">
            <%= f.label :name, "店舗名" %><span class="text-danger">※</span>
            <%= f.text_field :name, class: "form-control" %>
          </div>
          <div class="form-group">
            <%= f.label :review, "レビュー" %><span class="text-danger">※</span>
            <%= f.text_area :review, rows: "5", class: "form-control" %>
          </div>
          <div class="my-5">
            <%= f.submit "投稿", class: "btn btn-outline-success mx-auto d-block" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</main>

/app/views/shops/index.html.erb

<main>
  <h2 class="title">SHOPS</h2>
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <% @shops.shop_images.first(1).each do |image| %>
          <div id="slider">
            <%= attachment_image_tag image, :image, :fill, 350, 350, size: "350x350" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</main>

/app/controllers/shops_controller.rb

class ShopsController < ApplicationController
  before_action :authenticate_user!

  def index
    @shops = Shop.all
  end

  def new
    @shop = Shop.new
  end

  def create
    @shop = Shop.new(shop_params)
    @shop.user_id = current_user.id
    @shop.save
    redirect_to shops_path
  end

  def show
    @shop = Shop.find(params[:id])
  end

  def destroy
  end

  private

  def shop_params
    params.require(:shop).permit(:image, :name, :review, shop_images_images: [])
  end
end

/app/models/shop.rb

class Shop < ApplicationRecord

  belongs_to :user

  has_many :shop_images, dependent: :destroy
  accepts_attachments_for :shop_images, attachment: :image
end

/app/models/shop_image.rb

class ShopImage < ApplicationRecord
  belongs_to :shop
  attachment :image
end

/db/schema.rb

ActiveRecord::Schema.define(version: 2021_12_13_141259) do

  create_table "shop_images", force: :cascade do |t|
    t.integer "shop_id", null: false
    t.integer "image_id", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["shop_id"], name: "index_shop_images_on_shop_id"
  end

  create_table "shops", force: :cascade do |t|
    t.string "name", null: false
    t.text "review", null: false
    t.integer "user_id", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
  end

  create_table "users", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.string "reset_password_token"
    t.datetime "reset_password_sent_at"
    t.datetime "remember_created_at"
    t.string "full_name", null: false
    t.string "nick_name", null: false
    t.datetime "created_at", null: false
    t.datetime "updated_at", null: false
    t.index ["email"], name: "index_users_on_email", unique: true
    t.index ["reset_password_token"], name: "index_users_on_reset_password_token", unique: true
  end

end

以上、お力をお貸しいただけますでしょうか。
何卒、よろしくお願いいたします。

Answer 1

Error message

undefined method `shop_images' for #<Shop::ActiveRecord_Relation:0x00007ffa3820a960>

なので、これは、Relation オブジェクトにはshop_imagesというメソッドは存在しない、という意味です。通常、Relationオブジェクトにそんなメソッドは存在しないので、エラー自体は当然と言えます。
この該当オブジェクトは、@shops

 # /app/controllers/shops_controller.rb 
    @shops = Shop.all

ですね。つまり、Shopモデルのすべてのオブジェクトを含む Relationです。なお、これはモデルオブジェクトではありません!

モデル(/app/models/shop.rb)を見る限り Shop モデルには、shop_images というメソッドが存在しますが、これは Relationとは関係ありません。
喩えていえば、Relationは配列みたいなもの、Modelは配列の要素みたいなものです。

一枚目だけ表示させたいのであれば、たとえば index.html.erb にて、

  <%# @shops.shop_images.first(1).each do |image|
  %>
  <% image = @shops.first.shop_images.first %>

くらいでしょうか。最初のshopについて全部のイメージでループならば、

  <% @shops.first.shop_images.each do |image| %>

くらいになりましょうか。
全部の店について全部の画像であれば、これに加えて @shops でさらにループです。
確認していませんが、上を参考に、工夫してみてください。

Comments

[Guttie]

Sakanoさん回答ありがとうございました！
お陰様で、お教えいただいた記述に下記を加えて無事に全投稿の複数写真を
それぞれ表示させることができました。本当にありがとうございました！

<% @shops.each do |shop| %>
<div id="slider_<%= shop.id %>">
<% shop.shop_images.each do |image| %>
<%= link_to shop_path(shop.id) do %>
<%= attachment_image_tag image, :image, format: 'jpeg', size: "350x350" %>
<% end %>
<% end %>
</div>
<% end %>