#スクールではrails5で開発を行ってcocoonを使っていて、。同じ方法でrails6でも親子関係のテーブルに複数画像データを保存しようとしたら、追加ボタンが作動しなかった。備忘録として投稿
##参考URL
https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker
##原因
そもそもcocooonとjqueryの導入の仕方が変わっていました。
##rails5では以下のように実装をした
###1.gemのインストール
gem 'cocoon'
gem 'jquery-rails'
#画像投稿するためにrefileを使用
gem 'refile', require: 'refile/rails', github: 'manfe/refile'
gem 'refile-mini_magick'
###2.app/assets/javascripts/application.js
//= require cocoon
//= require jquery
###2.親子関係を結びつける
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で関連づけられた子レコードを削除できるようにする
belongs_to :tour
attachment :image
validates :image, presence: true
###2.フォームを作成
<%= f.fields_for :tour_photos do |tour_photo| %>
<%= f.label "写真(5枚選んでください)" %>
<%= render 'tour_photo_fields', f: tour_photo %>
<% end %>
<div id = "links">
<%= link_to_add_association '写真を追加',f, :tour_photos %>
</div>
<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の編集
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に以下が追加されていれば、導入できている。
"cocoon": "github:nathanvda/cocoon#c24ba53",
最後にapp/javascriptspacks/application.jsに追記
require('jquery')
import "cocoon";
##まとめ
初めてバージョンの違うrailsを触りましたが、できてたことができなかったりするんですね。
あと、application.jsのファイルの場所が変わっていて、最初は亡くなったのかとビビリ散らかしました。
Rails6でwebpackerが標準になったことにより、Railsアプリの開発環境にyarnのインストールが必要になってるみたいのでお気をつけください。
webpackerとはRailsでモダンなJSフレームワークなどを利用するためのものみたいです。これについても勉強しなければ。