[Rails] Rails7 cocoon導入方法 #JavaScript

目的

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

Gemfile

gem 'cocoon'

ターミナル

$ bundle install
$ yarn add @nathanvda/cocoon

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

ここから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について解説しているので知りたい方は是非。

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が定義されていません」と怒られるので
下の記事を参考にし設定を直したら動くようになりました。めでたしめでたし。

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