2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

[Rails] Rails7 cocoon導入方法

Last updated at Posted at 2024-05-18

注意

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を設定

ここからrails6と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”

このように設定してあげればrails7で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

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?