6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Rails6でのcocoon

Posted at

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

##参考URL
https://www.botreetechnologies.com/blog/introducing-jquery-in-rails-6-using-webpacker

##原因
そもそも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 "写真(5枚選んでください)" %>
  <%= 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フレームワークなどを利用するためのものみたいです。これについても勉強しなければ。

6
5
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
6
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?