注意

2024/6/23追記
ここから先の話はローカル環境では動いたのですが、本番環境では動かない可能性がかなり高いです。環境によってはローカルでも動くかわかりません。
近日記事の編集を予定していますが、この記事を参考にしてしまった人は本当に申し訳なかったです。
これから読む方はそれを承知の上読んでください。

目的

rails7でフォームの追加・削除をしたかったのでcocoonを使い実装しました。
cocoonの公式githubではrails6までのやり方しか書いておらず
なおかつrails7ではrails6とは導入方法が異なり、導入の記事も少なくハマったので備忘録として残そうと思い記事にしました。

対象者

rails7でcocoonの導入がわからない人・ハマっている人

開発環境

rails 7.0.4.3
ruby 3.1.2
cocoon 1.2.15
jQuery 3.7.1

導入方法

cocoonをインストール

Gemfile

gem 'cocoon'

ターミナル

$ bundle install
$ yarn add @nathanvda/cocoon

cocoonのインストールはrails6でもrails7でも全く一緒です。

cocoonを設定

ここからrails６とrails7では違ってきます。
公式のgithubにはrails6までのやり方しか書いておらず、ここから苦戦しました。
cocoon公式github

cocoonはcocoon.jsというファイルを読み込まないと使えないのでimportmap.rbで読み込ませます

config/importmap.rb

pin '@nathanvda/cocoon'

application.js

公式のgithubを参考にして下のように書くと読み込めないというエラーになるので
import '@nathanvda/cocoon'

rails7ではこちらのように書く こっちが正解
import './cocoon'

ちなみにrails7からjsファイルを使うときはimportmap.rbにピン留めしてjsファイルを読み込むようになりました。
こちらの記事でrails7のimportmapについて解説しているので知りたい方は是非。

jQueryの設定

cocoonはjQueryで構成されているのでjQueryを使えるように設定します。

config/importmap.rb

pin "jquery", to: "https://code.jquery.com/jquery-3.7.1.min.js"

application.js

import "jquery”

このように設定してあげればrails７でcocoonを動かすことができます。

おまけ

cocoon導入前にも一応jQueryが使える環境だったのですが、下のように設定していました。

config/importmap.rb

pin "jquery", to: "https://ga.jspm.io/npm:jquery@3.7.1/dist/jquery.js"

application.js

import jquery from "jquery"

window.$ = jquery

この設定でcocoonを使おうとするとcocoon.jsを読み込んだ時に
「jQueryが定義されていません」と怒られるので
下の記事を参考にし設定を直したら動くようになりました。めでたしめでたし。

まとめ

cocoonの導入手順

cocoonのインストール
cocoonの設定
jQueryの設定

この3つができればcocoonを動かすことができます。
間違いなどあればコメントして頂けると非常に嬉しいです。

その他参考URL

https://zenn.dev/yama525/articles/a94d30496aa3ab
https://qiita.com/okiiiiiina/items/8868a7fcb6ec0817d064