Rails6でのcocoon

スクールではrails5で開発を行ってcocoonを使っていて、。同じ方法でrails6でも親子関係のテーブルに複数画像データを保存しようとしたら、追加ボタンが作動しなかった。備忘録として投稿

参考URL

原因

そもそもcocooonとjqueryの導入の仕方が変わっていました。

rails5では以下のように実装をした

1.gemのインストール

Gemfile.

gem 'cocoon'
gem 'jquery-rails'

#画像投稿するためにrefileを使用
gem 'refile', require: 'refile/rails', github: 'manfe/refile'
gem 'refile-mini_magick'

2.app/assets/javascripts/application.js

application.js

//= require cocoon
//= require jquery

2.親子関係を結びつける

tour.rb

has_many :tour_photos, dependent: :destroy
accepts_nested_attributes_for :tour_photos, allow_destroy: true

・accepts_nested_attributes_for

一度にまとめてレコードの更新ができるようにできるメソッド。今回の場合だと、Tourレコードを更新すると同時にTourPhotoレコードも一緒に更新できる

・allow_destroy: true

accepts_nested_attributes_forで関連づけられた子レコードを削除できるようにする

tour_photo.rb

belongs_to :tour
attachment :image
validates :image, presence: true

2.フォームを作成

new.html.erb

<%= f.fields_for :tour_photos do |tour_photo| %>
  <%= f.label "写真(５枚選んでください)" %>
  <%= render 'tour_photo_fields', f: tour_photo %>
<% end %>
<div id = "links">
  <%= link_to_add_association '写真を追加',f, :tour_photos %>
</div>

_tour_photo_fields.html.erb

<div class = "nested-fields">
    <%= f.attachment_field :image %>
    <%= link_to_remove_association "写真を削除", f, class: "btn btn-danger remove-photo-btn photo-btn" %>
</div>

以上のようにrails6で同じようにやると、cocoonの追加ボタンが反応してくれなかった

rails6でcocoonを使えるようにするために。

jqueryの導入

yarn add jquery 

・config/webpack/environment.jsの編集

environment.js

const { environment } = require('@rails/webpacker')

#追記ここから
const webpack = require('webpack')
environment.plugins.prepend('Provide',
    new webpack.ProvidePlugin({
        $: 'jquery/src/jquery',
        jQuery: 'jquery/src/jquery'
    })
)
#追記ここまで

module.exports = environment

cocoonの導入

yarn add github:nathanvda/cocoon#c24ba53

上記のコマンドでpackage.jsonに以下が追加されていれば、導入できている。

package.json

"cocoon": "github:nathanvda/cocoon#c24ba53",

最後にapp/javascriptspacks/application.jsに追記

application.js

require('jquery')
import "cocoon";

まとめ

初めてバージョンの違うrailsを触りましたが、できてたことができなかったりするんですね。
あと、application.jsのファイルの場所が変わっていて、最初は亡くなったのかとビビリ散らかしました。

Rails6でwebpackerが標準になったことにより、Railsアプリの開発環境にyarnのインストールが必要になってるみたいのでお気をつけください。
webpackerとはRailsでモダンなJSフレームワークなどを利用するためのものみたいです。これについても勉強しなければ。