cocoonとは？

cocoonとはフォームの追加や削除の実装を行う時とても便利なgemです。
個人的には以下の記事が大変参考になったのでこちらをご参照していただければと思います。

cocoonで保存したデータをどうやって表示するのか?

ここからはオリジナルアプリの制作時に実装した方法を紹介します。オリジナルアプリは筋トレ日記です。

ゴールは？

ゴールとしては以下のような表示です

これはオリジナルアプリの一覧表示の一部ですが、種目・重量・回数・セット数はcocoonを用いてフォームを追加・削除したりして複数のデータを保存できるようにしています。

まず日記の一覧表示はどのように実装されているのか？

結論としては以下のようになります。

diary.html.erb

<% @diaries.each do |diary|%>
        <div class="col">
          <%= link_to diary_path(diary), class:"card mt-5 mx-auto text-decoration-none link-dark" do %>
            <% if diary.image.present?%>
              <% if diary.image.content_type.include?('image/')%>
                <%= image_tag diary.image,class:"card-img-top image-fluid" %>
              <% else %>
                <%= video_tag rails_blob_path(diary.image), class: "card-img-top image-fluid",controls: true %>
              <% end%>
            <% end %>
            <div class="text-center fw-bold">
              <%= diary.start_time.strftime("%Y年%m月%d日")%>
              <div class="mt-2">
                <%= diary.user.nickname %>
              </div>
              <div class="mt-2">
                部位: <%= diary.site%>
              </div>

これは一部ですが、これで日記の一覧表示ができるようになります。

cocoonを用いて保存されたデータはどうやって表示するのか？

cocoonを用いて保存されたデータを表示するには上記のコードの下に以下のコードを記述します。

index/diary.html.erb

<table class="table table-bordered mt-3">
                <thead>
                  <th>種目</th>
                  <th>重量</th>
                  <th>回数</th>
                  <th>セット数</th>
                </thead>
              <% diary.workouts.each do |workout|%>
                <tbody>
                  <tr>
                    <td><%= workout.menu%></td>
                    <td class="text-end"><%= workout.weight%></td>
                    <td class="text-end"><%= workout.rep %></td>
                    <td class="text-end"><%= workout.set %></td>
                  </tr>
                </tbody>
              <%end%>
              </table>

これで表示できるのは何故なのか？
理由はコントローラーにあって、コントローラーは以下のようになっています。

controller/diaries.rb

def index
    @diaries = Diary.includes(:user).order('created_at DESC')
end

def new
    @diary = Diary.new
    @workout = @diary.workouts.build ##親モデル.子モデル.buildで子モデルのインスタンス作成
end

上記の通り@workoutは子モデルとしてインスタンスを生成しているので、その日記に対して表示されるようにしています。
それにともない、diary.workouts.each do |workout|を使用することでそれぞれの日記でのトレーニングメニュが表示することが可能になります。

補足や修正点がありましたら是非コメントをお願いします。