公式のREADMEで紹介されているcocoonのnpmパッケージはjQuery依存があるため、jQueryに依存していないnpmパッケージに置き換えました。

いくつか似たnpmパッケージがありますが、今回はダウンロード数が多く、更新日が他より最近なcocoon-js-vanilla - npmを利用しました。

また公式のREADMEで

Note: there are alternative npm packages, which might better suit your needs. E.g. some offer the cocoon functionality without using jquery (search for cocoon + > > vanilla –I found three packages on npm already). Obviously you are free to use those, however the code samples in this README will (still) rely on jquery.

というアナウンスがされています。
しかし、具体的な導入方法が書かれておらず、参考記事も少なかったため同じ状況の人がいるだろうと思い、手順を書こうと思います。

また今回はインストール方法のみ説明するため、使用方法の説明は省きます。使用方法は以下が参考になります。

• nathanvda/cocoon: Dynamic nested forms using jQuery made easy; works with formtastic, simple_form or default forms

実行環境は以下の通りです。

• Ruby on Rails 7.0.6
• Ruby 3.2.2
• importmap-rails

cocoon

cocoonは動的にフォームを増減させるための機能を提供するGemです。
また動的なフォームを実現のために、フロントエンドとバックエンドで対応する必要があるため、
cocoonはバックエンド側のGemと、フロントエンド側のnpmパッケージを提供しています。

インストール

Gemのインストール

Gemfile に gem "cocoon" を追加。

# Gemfile

gem "cocoon"

bundle installする。

$ bundle install

npmパッケージのインストール

importmap-railsではJavaScript CDNを利用します。 CDNではプリコンパイルされた配布用バージョンを利用可能になっています。

そのため公式のREADMEのような以下の手順は不要です。

$ yarn add @nathanvda/cocoon 

importmapでnpmパッケージのピン付けを行います。

$ .bin/importmap pin cocoon-js-vanilla

config/importmap.rbに以下が追加されます。
また、jQuery依存のnpmパッケージを利用していた場合、そのnpmパッケージの削除が必要なので注意です。自分の場合、以下のようになっていたので、この行は削除しましょう

# config/importmap.rb
- pin "@nathanvda/cocoon", to: "https://ga.jspm.io/npm:@nathanvda/cocoon@1.2.14/cocoon.js"
+ pin "cocoon-js-vanilla", to: "https://ga.jspm.io/npm:cocoon-js-vanilla@1.3.0/index.js"

app/javascript/application.jsでimportします。 importの際にも、既存のjQuery依存のnpmパッケージは削除します。

// app/javascript/application.js
- import "@nathanvda/cocoon"
+ import "cocoon-js-vanilla"

手順は以上です。

感想

importmap-railsを利用すれば、yarnなどのパッケージマネージャーを使わずに済むためとてもスッキリしますね
ですが、手順記事がまだ少ないため少し困惑してしまいました。💦
importmap-railsについて理解が少し曖昧なので、調べたいと思います。