{"id":37354,"date":"2023-07-12T06:16:59","date_gmt":"2023-07-12T06:16:59","guid":{"rendered":"https:\/\/www.railscarma.com\/?p=37354"},"modified":"2023-07-20T04:44:16","modified_gmt":"2023-07-20T04:44:16","slug":"rails-7%e3%81%a7cocoon-gem%e3%82%92%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95","status":"publish","type":"post","link":"https:\/\/www.railscarma.com\/ja\/%e3%83%96%e3%83%ad%e3%82%b0\/rails-7%e3%81%a7cocoon-gem%e3%82%92%e4%bd%bf%e3%81%86%e6%96%b9%e6%b3%95\/","title":{"rendered":"Rails 7 \u3067 Cocoon gem \u3092\u4f7f\u7528\u3059\u308b\u306b\u306f\u3069\u3046\u3059\u308c\u3070\u3088\u3044\u3067\u3059\u304b?"},"content":{"rendered":"
\n\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t\t\t\t\t\t\t

Cocoon gem \u306f\u3001Rails \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30d5\u30a9\u30fc\u30e0\u306e\u7ba1\u7406\u3092\u7c21\u7d20\u5316\u3059\u308b\u5f37\u529b\u306a\u30c4\u30fc\u30eb\u3067\u3059\u3002\u3068 \u7e6d<\/a>\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30d5\u30a9\u30fc\u30e0 \u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u52d5\u7684\u306a\u8ffd\u52a0\u3068\u524a\u9664\u3092\u7c21\u5358\u306b\u51e6\u7406\u3067\u304d\u3001\u30b7\u30fc\u30e0\u30ec\u30b9\u306a\u30e6\u30fc\u30b6\u30fc \u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u3092\u63d0\u4f9b\u3067\u304d\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001 Rails 7 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306e Cocoon gem<\/strong> \u5b9f\u969b\u306e\u4f8b\u3092\u901a\u3057\u3066\u3002<\/span><\/p>

Cocoon Gem \u306e\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3068\u30bb\u30c3\u30c8\u30a2\u30c3\u30d7<\/b><\/h3>

\u307e\u305a\u3001Rails 7 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u306b Cocoon gem \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u3066\u69cb\u6210\u3057\u307e\u3057\u3087\u3046\u3002<\/span><\/p>

Cocoon gem \u3092 Gemfile \u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/span><\/p>

\u5b9d\u77f3\u300c\u30b3\u30af\u30fc\u30f3\u300d<\/strong><\/p>

\u30d0\u30f3\u30c9\u30eb \u30b3\u30de\u30f3\u30c9\u3092\u5b9f\u884c\u3057\u3066 gem \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3057\u307e\u3059\u3002<\/span><\/p>

\u30d0\u30f3\u30c9\u30eb\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/strong><\/p>

JavaScript \u30de\u30cb\u30d5\u30a7\u30b9\u30c8 \u30d5\u30a1\u30a4\u30eb\u3067 Cocoon \u3092\u5fc5\u9808\u306b\u3059\u308b (<\/span>app\/javascript\/packs\/application.js<\/span>):<\/span><\/p>

\/\/= \u30b3\u30af\u30fc\u30f3\u304c\u5fc5\u8981\u3067\u3059<\/strong><\/p>

jQuery \u304c\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb\u3055\u308c\u3066\u3044\u308b\u3053\u3068\u3092\u78ba\u8a8d\u3057\u3066\u304f\u3060\u3055\u3044\u3002\u305d\u3046\u3067\u306a\u3044\u5834\u5408\u306f\u3001Gemfile \u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/span><\/p>

gem\u300cjquery-rails\u300d<\/strong><\/p>

JavaScript \u30de\u30cb\u30d5\u30a7\u30b9\u30c8 \u30d5\u30a1\u30a4\u30eb\u306b\u6b21\u306e\u884c\u3092\u8ffd\u52a0\u3057\u3066\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067 jQuery \u3092\u69cb\u6210\u3057\u307e\u3059\u3002<\/span><\/p>

\/\/= jquery3 \u304c\u5fc5\u8981<\/strong><\/p>

\u00a0<\/p>

Cocoon \u3092\u4f7f\u7528\u3057\u305f\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30d5\u30a9\u30fc\u30e0\u306e\u5b9f\u88c5<\/b><\/h3>

\u30d6\u30ed\u30b0\u6295\u7a3f\u3068\u305d\u308c\u306b\u95a2\u9023\u3059\u308b\u30b3\u30e1\u30f3\u30c8\u3092\u30e2\u30c7\u30eb\u5316\u3059\u308b\u5358\u7d14\u306a Rails \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u304c\u3042\u308b\u3068\u4eee\u5b9a\u3057\u307e\u3057\u3087\u3046\u3002 Cocoon \u3092\u4f7f\u7528\u3057\u3066\u3001\u30d6\u30ed\u30b0\u6295\u7a3f\u30d5\u30a9\u30fc\u30e0\u5185\u306e\u30b3\u30e1\u30f3\u30c8\u306e\u4f5c\u6210\u3068\u524a\u9664\u3092\u7ba1\u7406\u3057\u307e\u3059\u3002<\/span><\/p>

\u95a2\u9023\u4ed8\u3051\u3092\u8a2d\u5b9a\u3057\u307e\u3059\u3002<\/span><\/p>

# \u30a2\u30d7\u30ea\/\u30e2\u30c7\u30eb\/post.rb<\/strong>
\u30af\u30e9\u30b9 Post < ApplicationRecord
has_many :\u30b3\u30e1\u30f3\u30c8\u3042\u308a
accepts_nested_attributes_for :comments\u3001allow_destroy: true
\u7d42\u308f\u308a<\/strong><\/p>

#app\/models\/comment.rb
<\/strong>\u30af\u30e9\u30b9 \u30b3\u30e1\u30f3\u30c8 < ApplicationRecord
<\/strong>\u6240\u5c5e:\u6295\u7a3f
<\/strong>\u7d42\u308f\u308a<\/strong><\/p>

\u30dd\u30b9\u30c8\u30d5\u30a9\u30fc\u30e0\u30d3\u30e5\u30fc\u3067\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30d5\u30a9\u30fc\u30e0\u3092\u69cb\u7bc9\u3057\u307e\u3059\u3002<\/span><\/p>

# app\/views\/posts\/_form.html.erb
<\/strong><%= form_with(model: post) do |f| %>
<\/strong><%= f.label :title %>
<\/strong><%= f.text_field :title %>
<\/strong><%= f.fields_for :comments do |comment_fields| %
<\/strong><%= 'comment_fields' \u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3001f: comment_fields %>
<\/strong><%\u7d42\u4e86%><\/strong><\/p>

<%= link_to_add_association '\u30b3\u30e1\u30f3\u30c8\u306e\u8ffd\u52a0', f, :comments %>
<\/strong><%= f.% \u3092\u9001\u4fe1>
<\/strong><%\u7d42\u4e86%><\/strong><\/p>

\u30b3\u30e1\u30f3\u30c8\u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u90e8\u5206\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/span><\/p>

# app\/views\/posts\/_comment_fields.html.erb
<\/strong><div class="”nested-fields”">
<\/strong><%= f.label :content %><\/strong><%= f.text_field :content %>
<\/strong><%= link_to_remove_association '\u30b3\u30e1\u30f3\u30c8\u306e\u524a\u9664', f %>
<\/strong><\/div><\/strong><\/p>

Cocoon \u6a5f\u80fd\u3092\u6709\u52b9\u306b\u3059\u308b\u305f\u3081\u306b\u5fc5\u8981\u306a JavaScript \u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/span><\/p>

\/\/ \u30a2\u30d7\u30ea\/javascript\/packs\/application.js
<\/strong>$(\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8).on('\u30bf\u30fc\u30dc\u30ea\u30f3\u30af:\u30ed\u30fc\u30c9', function() {
<\/strong>$('.nested-fields').cocoon();
<\/strong>});

<\/strong><\/p>

Cocoon \u3092\u4f7f\u7528\u3057\u305f\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30d5\u30a9\u30fc\u30e0\u306e\u64cd\u4f5c<\/b><\/h3>

\u5fc5\u8981\u306a\u69cb\u6210\u3092\u5b9f\u88c5\u3057\u305f\u306e\u3067\u3001Cocoon \u306e\u52d5\u4f5c\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/span><\/p>

  1. \u30d6\u30ed\u30b0\u6295\u7a3f\u30d5\u30a9\u30fc\u30e0\u3092\u8aad\u307f\u8fbc\u3080\u3068\u3001\u300c\u30b3\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0\u300d\u30ea\u30f3\u30af\u304c\u8868\u793a\u3055\u308c\u307e\u3059\u3002<\/span><\/li>
  2. \u300c\u30b3\u30e1\u30f3\u30c8\u3092\u8ffd\u52a0\u300d\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u65b0\u3057\u3044\u30b3\u30e1\u30f3\u30c8\u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u30bb\u30c3\u30c8\u304c\u30d5\u30a9\u30fc\u30e0\u306b\u52d5\u7684\u306b\u8ffd\u52a0\u3055\u308c\u307e\u3059\u3002<\/span><\/li>
  3. \u30b3\u30e1\u30f3\u30c8\u3092\u524a\u9664\u3059\u308b\u306b\u306f\u3001\u305d\u306e\u30b3\u30e1\u30f3\u30c8\u306b\u95a2\u9023\u4ed8\u3051\u3089\u308c\u3066\u3044\u308b\u300c\u30b3\u30e1\u30f3\u30c8\u3092\u524a\u9664\u300d\u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3057\u307e\u3059\u3002<\/span><\/li>
  4. \u30d5\u30a9\u30fc\u30e0\u304c\u9001\u4fe1\u3055\u308c\u308b\u3068\u3001\u6295\u7a3f\u3068\u305d\u308c\u306b\u95a2\u9023\u3059\u308b\u30b3\u30e1\u30f3\u30c8\u304c\u30c7\u30fc\u30bf\u30d9\u30fc\u30b9\u306b\u4fdd\u5b58\u3055\u308c\u307e\u3059\u3002<\/span><\/li><\/ol>

    \u7d50\u8ad6\uff1a\u00a0<\/b><\/h3>

    Cocoon gem \u306f\u3001Rails 7 \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u306e\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30d5\u30a9\u30fc\u30e0\u306e\u51e6\u7406\u3092\u7c21\u7d20\u5316\u3057\u307e\u3059\u3002\u3053\u306e\u8a18\u4e8b\u3067\u8aac\u660e\u3059\u308b\u624b\u9806\u306b\u5f93\u3046\u3068\u3001\u30cd\u30b9\u30c8\u3055\u308c\u305f\u30d5\u30a9\u30fc\u30e0 \u30d5\u30a3\u30fc\u30eb\u30c9\u306e\u52d5\u7684\u306a\u8ffd\u52a0\u3068\u524a\u9664\u3092\u30b7\u30fc\u30e0\u30ec\u30b9\u306b\u7ba1\u7406\u3067\u304d\u3001\u30e6\u30fc\u30b6\u30fc \u30a8\u30af\u30b9\u30da\u30ea\u30a8\u30f3\u30b9\u304c\u5411\u4e0a\u3057\u307e\u3059\u3002 Cocoon \u3092 Rails \u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u306b\u7d44\u307f\u8fbc\u3080\u3068\u3001\u8907\u96d1\u306a\u30d5\u30a9\u30fc\u30e0\u3092\u52b9\u7387\u7684\u306b\u51e6\u7406\u3057\u3001\u30c7\u30fc\u30bf\u7ba1\u7406\u3092\u5f37\u5316\u3067\u304d\u307e\u3059\u3002\u7279\u5b9a\u306e\u8981\u4ef6\u306b\u5408\u308f\u305b\u3066\u3001\u3055\u307e\u3056\u307e\u306a\u30aa\u30d7\u30b7\u30e7\u30f3\u3068\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u6a5f\u80fd\u3092\u8a66\u3057\u3066\u304f\u3060\u3055\u3044\u3002 Rails \u958b\u767a\u30cb\u30fc\u30ba\u306b\u5bfe\u5fdc\u3067\u304d\u308b\u4fe1\u983c\u3067\u304d\u308b\u30d1\u30fc\u30c8\u30ca\u30fc\u3092\u304a\u63a2\u3057\u3067\u3059\u304b?\u3053\u308c\u4ee5\u4e0a\u63a2\u3055\u306a\u3044\u3002 \u30ec\u30fc\u30eb\u30ab\u30fc\u30de<\/a> \u5305\u62ec\u7684\u306a\u30b5\u30fc\u30d3\u30b9\u3092\u63d0\u4f9b\u3057\u307e\u3059 Rails\u958b\u767a\u30b5\u30fc\u30d3\u30b9<\/a> \u3053\u308c\u306b\u306f\u3001\u521d\u671f\u8a2d\u8a08\u304b\u3089\u5c55\u958b\u3001\u30e1\u30f3\u30c6\u30ca\u30f3\u30b9\u307e\u3067\u306e\u3059\u3079\u3066\u304c\u542b\u307e\u308c\u307e\u3059\u3002\u00a0<\/span><\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t

    \r\n
    \u95a2\u9023\u8a18\u4e8b<\/div>\r\n
    \r\n\r\n
    \r\n
    \r\n \r\n\r\n \"\u30aa\u30d5\u30ea\u30d0\u30c6\u30a3\u30fb\u30eb\u30d3\u30fc\u30fb\u30b8\u30a7\u30e0\"\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Offliberty Ruby Gem\u3068\u306f\uff1f <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"Rails\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Rails\u306elink_to\u30e1\u30bd\u30c3\u30c9\uff1a\u4f8b\u306b\u3088\u308b\u5b8c\u5168\u30ac\u30a4\u30c9 <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"Ruby\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Ruby on Rails\u3092\u4f7f\u3063\u3066\u30b9\u30b1\u30fc\u30e9\u30d6\u30eb\u306aSaaS\u30d7\u30e9\u30c3\u30c8\u30d5\u30a9\u30fc\u30e0\u3092\u69cb\u7bc9\u3059\u308b\u65b9\u6cd5 <\/a>\r\n\r\n <\/div>\r\n
    \r\n
    \r\n \r\n\r\n \"\u30eb\u30d3\u30fc\u6b63\u898f\u8868\u73fe\u30de\u30c3\u30c1\"\r\n\r\n <\/a>\r\n <\/div>\r\n\r\n \r\n Ruby\u6b63\u898f\u8868\u73fe\u30de\u30c3\u30c1\u30ac\u30a4\u30c9\uff082026\uff09\u4f8b\u4ed8\u304d <\/a>\r\n\r\n <\/div>\r\n \r\n <\/div>\r\n\r\n