【Rails】cocoonを用いて親子孫関係のテーブルに複数のデータを同時保存する方法

#目的
gemのcocoonを使って親子孫関係のテーブルに複数のデータを同時に保存できるようにします
１つの送信ボタンで複数のモデルに保存できるため、非常に便利です
１つの投稿に対してカテゴリーやタグ付けをすることを考えるてください
そうすると、一回の投稿で複数のデータを投稿できた方がいいことがわかりますね

#前提
今回の投稿ので使用するモデル、データベースについて説明します
##モデルの関係

関係	モデル名
親	Parent
子	Child
孫	Grandchild
上の表がモデル同士の関係になります
上の関係で実装を進めます
##モデルとカラム
モデル名	カラム名
:-:	:-:
Parent	p_name
Child	c_name
Grandchild	g_name
各テーブルにあるそれぞれのカラムの名前になります

#実装方法
まず、gem cocoomインストール、モデル、コントローラーを作ります
その後、モデル、コントローラー、ビューの順番で説明します
##準備
###Gemfile

gemのcocoonを利用して実装するため、まずはインストールしていきます

Gemfile

gem cocoon

ターミナル

$ bundle install

###モデル、コントローラー作成

ターミナル

$ rails g model Parent p_name:string
$ rails g model Child c_name:string parent_id:integer
$ rails g model Grandchild g_name:string child_id:integer
$ rails g controller parents new create

ターミナル

$ rails db:migrate

##モデル
モデルの記述を説明していきます。
###モデル作成

parent.rb

  has_many :children, dependent: :destroy
  accepts_nested_attributes_for :children, allow: true

アソシエーションは上で説明したように、
ParentはChildを複数持ってるため、has_manyで繋げます
accepts_nested_attributes_forはビューからデータを送る際に、
parentと一緒にchildを送るための記述です
詳しくはあとで説明します、、、

child.rb

  belongs_to :parent
  has_many :grandchildren, dependent: :destroy
  accepts_nested_attributes_for :grandchildren, allow: true

grandchild.rb

  belongs_to :child

child,grandchildもparentと同じように記述します

##コントローラー

コントローラーに以下の記述をします

parents_controller.rb

  def new
    @parent = Parent.new
    @children = @parent.children.build
    @grandchildren = @children.grandchildren.build
  end

  def create
    @parent = Parent.new(parent_params)
    @parent.save
  end

private
def parent_params
      params.require(:parent).permit(:p_name, children_attributes: [:id, :c_name, :_destroy, grandchildren_attributes: [:id, :g_name, :_destroy]])
end

###new
@parent,@children,@grandchildrenをそれぞれ定義します
###create
@parent = Parent.new(parent_params)でデータを作って、
@parent.saveでchild,grandchildにも同時に保存しています
###ストロングパラメーター
####accepts_nested_attributes_for
モデルで記述したaccepts_nested_attributes_forことで
paramsに_attributes: []を一緒に追加して送ることができています。

ストロングパラメーターは
_attributes: []などの配列を一番後ろに書かないといけないので注意してください

##ビュー

###new.html.erb

new.html.erb

<%= form_with(model: @parent, local: true) do |s| %>
	<%= s.label :p_name %>
	<%= s.text_field :p_name %>
	<div class="parents">
		<%= s.fields_for :children do |t| %>
			<%= render "children_fields", f: t %>
		<% end %>
		<div class="links">
			<%= link_to_add_association "子供を追加", s, :children %>
		</div>
	</div>
	<div class="actions">
		<%= s.submit %>
	</div>
<% end %>

###_children_fields.html.erb

_children_fields.html.erb

<div class="nested-fields">
    <%= f.label "c_name" %>
    <%= f.text_field :c_name %>
    <%= link_to_remove_association "remove child", f %>

    <%= f.fields_for :grandchildren do |u| %>
        <%= render "grandchild_fields", f: u %>
    <%end%>

    <%= link_to_add_association "孫を追加", f, :grandchildren %>
</div>

###_grandchild_fields.html.erb

_grandchild_fields.html.erb

<div class="nested-fields">
    <%= f.text_field :g_name %>
    <%= link_to_remove_association "remove grandchild", f %>
</div>

部分テンプレートの名前に注意してください
名前が合っていないとrenderできなかったり、入力フォームを追加できません

#おわりに
cocoonで入力フォームを増やせるととても便利ですね
様々な場面で応用できるので習得しましょう

###質問、気になるところなどございましたらコメントよろしくお願いします