{"id":495424,"date":"2024-07-19T10:08:46","date_gmt":"2024-07-19T09:08:46","guid":{"rendered":"https:\/\/blog.jetbrains.com\/ruby\/2024\/07\/how-to-use-turbo-in-your-rails-apps-with-rubymine\/"},"modified":"2024-11-18T18:43:44","modified_gmt":"2024-11-18T17:43:44","slug":"how-to-use-turbo-in-your-rails-apps-with-rubymine","status":"publish","type":"ruby","link":"https:\/\/blog.jetbrains.com\/ja\/ruby\/2024\/07\/how-to-use-turbo-in-your-rails-apps-with-rubymine\/","title":{"rendered":"RubyMine \u3067 Turbo \u3092 Rails \u30a2\u30d7\u30ea\u306b\u4f7f\u7528\u3059\u308b"},"content":{"rendered":"<p>\u7686\u3055\u3093\u3001\u3053\u3093\u306b\u3061\u306f\uff01<\/p>\n<p>RubyMine \u30c1\u30fc\u30e0\u306f Ruby \u3068 Rails \u306e\u65b0\u3057\u3044\u30c6\u30af\u30ce\u30ed\u30b8\u30fc\u306e\u30b5\u30dd\u30fc\u30c8\u3092\u63d0\u4f9b\u3059\u308b\u305f\u3081\u306e\u7d99\u7d9a\u7684\u306a\u53d6\u308a\u7d44\u307f\u3092\u884c\u3063\u3066\u3044\u307e\u3059\u3002 Rails \u306b\u6700\u8fd1\u8ffd\u52a0\u3055\u308c\u305f\u6700\u3082\u753b\u671f\u7684\u306a\u624b\u6cd5\u306e 1 \u3064\u306f\u9593\u9055\u3044\u306a\u304f <strong>Hotwire<\/strong> \u3060\u3068\u8a00\u3048\u307e\u3059\u3002\u305d\u3053\u3067\u3001\u3053\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u4e00\u5f0f\u306e\u6982\u8981\u3068 RubyMine \u3067\u6700\u3082\u91cd\u8981\u306a <strong>Turbo<\/strong> \u6a5f\u80fd\u3068 <strong>Stimulus<\/strong> \u6a5f\u80fd\u3092 Rails \u30a2\u30d7\u30ea\u306b\u4f7f\u7528\u3059\u308b\u305f\u3081\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u7528\u610f\u3057\u307e\u3057\u305f\u3002 \u3053\u306e\u8a18\u4e8b\u3067\u306f <strong>Turbo<\/strong> \u3092\u53d6\u308a\u4e0a\u3052\u3066\u3044\u307e\u3059\u3002YouTube\uff08\u82f1\u8a9e\uff09\u3067\u3082\u3054\u89a7\u3044\u3044\u305f\u3060\u3051\u307e\u3059\u3002<\/p>\n<p><iframe loading=\"lazy\" title=\"Using Turbo in Your Rails Apps with RubyMine\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/65OWntPXj68?list=PLQ176FUIyIUanO72dRf6lOefKIznviKKJ\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>\u306a\u304a\u3001<strong>Stimulus<\/strong> \u306e\u30b5\u30dd\u30fc\u30c8\u306b\u3064\u3044\u3066\u306e\u8a73\u7d30\u306f\u3001\u6b21\u306e\u30d6\u30ed\u30b0\u8a18\u4e8b\u3092\u304a\u5f85\u3061\u304f\u3060\u3055\u3044\u3002<\/p>\n<h1 class=\"wp-block-heading\"><strong>Hotwire \u3068 Turbo<\/strong><\/h1>\n<h2 class=\"wp-block-heading\"><strong>Hotwire \u3068\u306f\uff1f<\/strong><\/h2>\n<p><a href=\"https:\/\/hotwired.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Hotwire<\/strong><\/a> \u306f JSON \u306e\u4ee3\u308f\u308a\u306b HTML \u3092\u30ef\u30a4\u30e4\u30fc\u8d8a\u3057\u306b\u9001\u4fe1\u3059\u308b\u3053\u3068\u3067\u30a6\u30a7\u30d6\u958b\u767a\u3092\u5358\u7d14\u5316\u3057\u307e\u3059\uff08\u540d\u79f0\u306f\u300cHTML over the wire\u300d\u306e\u7565\u79f0\u3067\u3059\uff09\u3002 \u3053\u308c\u306b\u3088\u308a\u3001JavaScript \u306e\u8a18\u8ff0\u91cf\u3068\u30d6\u30e9\u30a6\u30b6\u30fc\u3078\u306e\u9001\u4fe1\u91cf\u304c\u6e1b\u308a\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u306e\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3092\u30b5\u30fc\u30d0\u30fc\u4e0a\u306b\u7dad\u6301\u3059\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\u3002 <strong>Hotwire<\/strong> \u306f <a href=\"https:\/\/turbo.hotwired.dev\/\" target=\"_blank\" rel=\"noopener\">Turbo<\/a>\u3001<a href=\"https:\/\/stimulus.hotwired.dev\/\" target=\"_blank\" rel=\"noopener\">Stimulus<\/a>\u3001\u304a\u3088\u3073 <a href=\"https:\/\/strada.hotwired.dev\/\" target=\"_blank\" rel=\"noopener\">Strada<\/a> \u3068\u3044\u3046\u8907\u6570\u306e\u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3067\u69cb\u6210\u3055\u308c\u307e\u3059\u3002 \u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001<strong>Turbo<\/strong> \u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3059\u3002<\/p>\n<h2 class=\"wp-block-heading\"><strong>Turbo \u3068\u306f\uff1f<\/strong><\/h2>\n<p><strong>Turbo<\/strong> \u306f <em>JavaScript \u3092\u307e\u3063\u305f\u304f\u66f8\u304f\u3053\u3068\u306a\u304f<\/em>\u30da\u30fc\u30b8\u306b\u90e8\u5206\u7684\u306a\u66f4\u65b0\u3092\u52d5\u7684\u306b\u53cd\u6620\u3059\u308b\u305f\u3081\u306e\u5358\u7d14\u306a\u624b\u6bb5\u3092\u63d0\u4f9b\u3059\u308b\u3082\u306e\u3067\u3059\u3002 \u307e\u305f\u3001<a href=\"https:\/\/turbo.hotwired.dev\/handbook\/drive\" target=\"_blank\" rel=\"noopener\"><strong>Turbo Drive<\/strong><\/a> \u306b\u3088\u308a\u3001\u30a2\u30d7\u30ea\u5185\u3067\u306e\u3059\u3079\u3066\u306e\u30ea\u30f3\u30af\u30af\u30ea\u30c3\u30af\u3068\u30d5\u30a9\u30fc\u30e0\u9001\u4fe1\u3092\u9ad8\u901f\u5316\u3057\u307e\u3059\u3002 \u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001\u30da\u30fc\u30b8\u5168\u4f53\u3092\u518d\u8aad\u307f\u8fbc\u307f\u305b\u305a\u306b\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u66f4\u65b0\u3067\u304d\u308b\u500b\u5225\u306e\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306b\u30da\u30fc\u30b8\u3092\u5206\u5272\u3059\u308b\u3053\u3068\u306b\u7126\u70b9\u3092\u5f53\u3066\u307e\u3059\u3002 Turbo \u306e\u4ed6\u306e 2 \u3064\u306e\u4e3b\u8981\u6982\u5ff5\u3067\u3042\u308b <strong>Turbo Stream<\/strong> \u3068 <strong>Turbo Frame<\/strong> \u3092\u3053\u306e\u76ee\u7684\u3067\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<h2 class=\"wp-block-heading\"><strong>Turbo Frame \u3068\u306f\uff1f<\/strong><\/h2>\n<p><a href=\"https:\/\/turbo.hotwired.dev\/handbook\/frames\" target=\"_blank\" rel=\"noopener\"><strong>Turbo Frame<\/strong><\/a> \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30da\u30fc\u30b8\u3092\u72ec\u7acb\u3057\u305f\u30b3\u30f3\u30c6\u30ad\u30b9\u30c8\u306b\u5206\u89e3\u3067\u304d\u307e\u3059\u3002 \u30c9\u30ad\u30e5\u30e1\u30f3\u30c8\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u30e2\u30b8\u30e5\u30fc\u30eb\uff08DOM\uff09\u306e\u4e00\u90e8\u3092 Turbo Frame \u3067\u56f2\u3080\u3068\u3001\u30da\u30fc\u30b8\u306e\u4ed6\u306e\u90e8\u5206\u3092\u518d\u8aad\u307f\u8fbc\u307f\u305b\u305a\u306b\u305d\u306e\u30d5\u30ec\u30fc\u30e0\u3060\u3051\u3092\u66f4\u65b0\u3067\u304d\u307e\u3059\u3002<\/p>\n<h2 class=\"wp-block-heading\"><strong>Turbo Stream \u3068\u306f\uff1f<\/strong><\/h2>\n<p><a href=\"https:\/\/turbo.hotwired.dev\/handbook\/streams\" target=\"_blank\" rel=\"noopener\"><strong>Turbo Stream<\/strong><\/a> \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30da\u30fc\u30b8\u5168\u4f53\u3092\u518d\u8aad\u307f\u8fbc\u307f\u305b\u305a\u306b DOM \u306e\u4e00\u90e8\u3092\u66f4\u65b0\u3067\u304d\u307e\u3059\u3002 \u30b5\u30fc\u30d0\u30fc\u306f\u30da\u30fc\u30b8\u5168\u4f53\u306e HTML \u306e\u4ee3\u308f\u308a\u306b Turbo Stream \u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u9001\u4fe1\u3059\u308b\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u306b\u306f HTML\u3001\u30bf\u30fc\u30b2\u30c3\u30c8\u8981\u7d20 ID\u3001\u304a\u3088\u3073\u9069\u7528\u3055\u308c\u308b\u30a2\u30af\u30b7\u30e7\u30f3\u304c\u542b\u307e\u308c\u307e\u3059\uff08\u30bf\u30fc\u30b2\u30c3\u30c8\u3078\u306e\u8ffd\u52a0\u3001\u30bf\u30fc\u30b2\u30c3\u30c8\u304b\u3089\u306e\u524a\u9664\u3001\u30bf\u30fc\u30b2\u30c3\u30c8\u306e\u66f4\u65b0\u306a\u3069\u3002\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001<a href=\"https:\/\/turbo.hotwired.dev\/handbook\/streams#stream-messages-and-actions\" target=\"_blank\" rel=\"noopener\">\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\uff09\u3002 Turbo Frame \u3068\u540c\u69d8\u306b\u3001Turbo Stream \u3067\u3082\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u30da\u30fc\u30b8\u3092\u90e8\u5206\u7684\u306b\u5909\u66f4\u3067\u304d\u307e\u3059\u3002 \u3042\u308b\u610f\u5473\u3001Turbo Stream \u306e\u6a5f\u80fd\u306e\u307b\u3046\u304c\u5f37\u529b\u3067\u3059\u3002\u5bfe\u5fdc\u3059\u308b\u30d5\u30ec\u30fc\u30e0\u4ee5\u5916\u306b\u3082 DOM \u306e\u8907\u6570\u306e\u90e8\u5206\u3092\u5909\u66f4\u3067\u304d\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u8981\u7d20\u306e\u8ffd\u52a0\u3084\u524a\u9664\u306a\u3069\u306e\u3055\u307e\u3056\u307e\u306a\u66f4\u65b0\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><code>turbo-rails<\/code> gem \u306f Rails 7 \u306b\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u540c\u68b1\u3055\u308c\u3066\u3044\u308b\u305f\u3081\u3001\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u3059\u3050\u306b\u4f7f\u7528\u3057\u59cb\u3081\u308b\u3053\u3068\u304c\u3067\u304d\u307e\u3059\uff01<\/p>\n<p>Ruby \u304a\u3088\u3073 Rails \u958b\u767a\u8005\u7528\u306e IDE \u3067\u3042\u308b <a href=\"https:\/\/www.jetbrains.com\/ja-jp\/ruby\/\" target=\"_blank\" rel=\"noopener\">RubyMine<\/a> \u306f\u30b3\u30fc\u30c9\u88dc\u5b8c\u3084\u79fb\u52d5\u64cd\u4f5c\u306a\u3069\u306e Turbo \u306b\u5bfe\u5fdc\u3057\u305f\u30b3\u30fc\u30c9\u30a4\u30f3\u30b5\u30a4\u30c8\u306e\u30b5\u30dd\u30fc\u30c8\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u304c\u3001\u305d\u308c\u3089\u306f\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3092\u9032\u3081\u306a\u304c\u3089\u4f7f\u7528\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/p>\n<h1 class=\"wp-block-heading\"><strong>\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb: RubyMine \u3067 Turbo \u3092 Rails \u30a2\u30d7\u30ea\u306b\u4f7f\u7528\u3059\u308b<\/strong><\/h1>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f\u3001Turbo \u306e\u57fa\u672c\u7684\u306a\u30d3\u30eb\u30c7\u30a3\u30f3\u30b0\u30d6\u30ed\u30c3\u30af\u3092\u4f7f\u7528\u3059\u308b\u65b9\u6cd5\u3092\u8aac\u660e\u3057\u307e\u3059\u3002 \u30e6\u30fc\u30b6\u30fc\u304c\u30a2\u30ab\u30a6\u30f3\u30c8\u3092\u4f5c\u6210\u3057\u3001\u30df\u30cb\u6295\u7a3f\u3092\u4f5c\u6210\u3057\u3001\u76f8\u4e92\u30d5\u30a9\u30ed\u30fc\u3092\u884c\u3044\u3001\u30d5\u30a3\u30fc\u30c9\u3067\u30df\u30cb\u6295\u7a3f\u3092\u8aad\u3080\u3053\u3068\u306e\u3067\u304d\u308b\u30b5\u30f3\u30d7\u30eb Rails \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u4f7f\u7528\u3057\u307e\u3059\u3002<\/p>\n<h2 class=\"wp-block-heading\"><strong>\u30b5\u30f3\u30d7\u30eb Rails \u30a2\u30d7\u30ea\u3092\u30af\u30ed\u30fc\u30f3\u3059\u308b<\/strong><\/h2>\n<p>\u4ee5\u4e0b\u306e\u30b9\u30c6\u30c3\u30d7\u306b\u5f93\u3063\u3066\u30b5\u30f3\u30d7\u30eb\u30a2\u30d7\u30ea\u3092\u30af\u30ed\u30fc\u30f3\u3057\u3001\u52d5\u4f5c\u3055\u305b\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u30b9\u30c6\u30c3\u30d7 1. <a href=\"https:\/\/pleiades.io\/help\/ruby\/set-up-a-git-repository.html#clone-repo\" target=\"_blank\" rel=\"noopener\">Check out a project from a remote host (git clone)<\/a>\uff08\u30ea\u30e2\u30fc\u30c8\u30db\u30b9\u30c8\u304b\u3089\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u3092\u30c1\u30a7\u30c3\u30af\u30a2\u30a6\u30c8\u3059\u308b\uff08git clone\uff09\uff09\u306e\u8aac\u660e\u306b\u5f93\u3063\u3066\u30b5\u30f3\u30d7\u30eb\u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3092\u30c1\u30a7\u30c3\u30af\u30a2\u30a6\u30c8\u3057\u307e\u3059\u3002 URL \u30d5\u30a3\u30fc\u30eb\u30c9\u306b\u6b21\u306e\u30a2\u30c9\u30ec\u30b9\u3092\u5165\u529b\u3057\u307e\u3059: https:\/\/github.com\/JetBrains\/sample_rails_app_7th_ed.git<\/p>\n<p>\u30d6\u30e9\u30f3\u30c1\u306f hotwire_setup \u3092<a href=\"https:\/\/pleiades.io\/help\/ruby\/manage-branches.html#checkout-Git-branch\" target=\"_blank\" rel=\"noopener\">\u30c1\u30a7\u30c3\u30af\u30a2\u30a6\u30c8<\/a>\u3057\u307e\u3059\u3002<\/p>\n<p>\u30b9\u30c6\u30c3\u30d7 2. <a href=\"https:\/\/pleiades.io\/help\/ruby\/configuring-language-interpreter.html#add_local_configurator\" target=\"_blank\" rel=\"noopener\">Ruby \u30a4\u30f3\u30bf\u30fc\u30d7\u30ea\u30bf\u30fc\u3092\u6307\u5b9a<\/a>\u3057\u3066 <a href=\"https:\/\/www.jetbrains.com\/help\/ruby\/get-started.html#interpreter\" target=\"_blank\" rel=\"noopener\">gem \u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/a>\u3057\u307e\u3059\u3002<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-488960\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/07\/feed.png\" alt=\"\" width=\"1180\" height=\"610\" \/><\/figure>\n<p><em>\u30b5\u30f3\u30d7\u30eb\u30a2\u30d7\u30ea\u306e Alice \u306e\u30d5\u30a3\u30fc\u30c9<\/em><\/p>\n<h2 class=\"wp-block-heading\"><strong>Turbo Frame \u306e\u4f7f\u7528\u65b9\u6cd5<\/strong><\/h2>\n<p>\u3053\u306e\u30a2\u30d7\u30ea\u3067\u306f\u73fe\u5728\u3001\u6295\u7a3f\u3092\u524a\u9664\u3067\u304d\u307e\u3059\u3002 \u3067\u306f\u3001\u7de8\u96c6\u3082\u8ffd\u52a0\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<ol>\n<li>\u30d5\u30a1\u30a4\u30eb <code>_micropost.html.erb<\/code> \u3092\u958b\u304d\u3001\u30bf\u30a4\u30e0\u30b9\u30bf\u30f3\u30d7\u306e\u300cDelete\uff08\u524a\u9664\uff09\u300d\u30ea\u30f3\u30af\u306e\u6a2a\u306b\u300cEdit\uff08\u7de8\u96c6\uff09\u300d\u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\"><!--_micropost.html.erb-->\n\n<span class=\"timestamp\">\n  Posted &lt;%= time_ago_in_words(micropost.created_at) %&gt; ago.\n  &lt;% if current_user?(micropost.user) %&gt;\n    &lt;%= link_to \"delete\", micropost, data: { \"turbo-method\": :delete,\n                                            turbo_confirm: \"You sure?\" } %&gt;\n    &lt;%= link_to \"edit\", edit_micropost_path(micropost) %&gt;\n  &lt;% end %&gt;\n<\/span><\/pre>\n<p>2. micropost controller \u306b <code>edit<\/code><span style=\"font-size: revert; background-color: #ffffff;\"> \u30e1\u30bd\u30c3\u30c9\u3068 <\/span>update<span style=\"font-size: revert; background-color: #ffffff;\"> \u30e1\u30bd\u30c3\u30c9\u3092<span style=\"font-size: revert; background-color: #ffffff;\">\u8ffd\u52a0<\/span>\u3057\u307e\u3059\uff08\u306a\u304a <\/span>routes.rb<span style=\"font-size: revert; background-color: #ffffff;\"> \u306f\u4e8b\u524d\u306b\u66f4\u65b0\u6e08\u307f\u3067\u3059\uff09\u3002<\/span><\/p>\n<pre class=\"EnlighterJSRAW\">\/\/ micropost_controller.rb\n\ndef edit\n  @micropost = Micropost.find(params[:id])\nend\n\ndef update\n  @micropost = Micropost.find(params[:id])\n  if @micropost.update(micropost_params)\n    redirect_to root_url\n  else\n    render :edit, status: :unprocessable_entity\n  end\nend<\/pre>\n<p><code>edit<\/code> \u30dc\u30bf\u30f3\u3092\u62bc\u3059\u3068 <code>micropost\/[id]\/edit<\/code> \u30eb\u30fc\u30c8\u306b\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3055\u308c\u3001\u30d3\u30e5\u30fc\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u304c\u8aad\u307f\u8fbc\u307e\u308c\u307e\u3059\u3002 <code>def edit<\/code> \u306e\u6a2a\u306e\u30ac\u30bf\u30fc\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u30d5\u30a1\u30a4\u30eb <code>edit.html.erb<\/code> \u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-488983\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/07\/gutter_icon.png\" alt=\"\" width=\"1920\" height=\"1200\" \/><\/figure>\n<p><em>\u30ac\u30bf\u30fc\u30a2\u30a4\u30b3\u30f3\u3092\u30af\u30ea\u30c3\u30af\u3057\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u30a2\u30af\u30b7\u30e7\u30f3\u306e\u6a2a\u306b\u30d3\u30e5\u30fc\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f5c\u6210\u3057\u307e\u3059\u3002<\/em><\/p>\n<p>3. <em><span style=\"font-size: revert; background-color: #ffffff; font-style: normal;\">\u6b21\u306e\u30b3\u30fc\u30c9\u3092 <code>microposts\/edit.html.erb<\/code> \u30d5\u30a1\u30a4\u30eb\u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/span><\/em><\/p>\n<pre class=\"EnlighterJSRAW\"><!--microposts\/edit.html.erb-->\n\n&lt;%= render 'shared\/micropost_form'%&gt;<\/pre>\n<p>\u6295\u7a3f\u3092\u7de8\u96c6\u3059\u308b\u306b\u306f\u3001\u65e2\u5b58\u306e\u90e8\u5206\u7684\u306a <code>shared\/micropost_form<\/code> \u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u3053\u308c\u306f\u3059\u3067\u306b\u30df\u30cb\u6295\u7a3f\u306e\u4f5c\u6210\u306b\u4f7f\u7528\u3055\u308c\u3066\u3044\u308b\u3082\u306e\u3067\u3059\u3002 \u3053\u3053\u3067 <em>edit<\/em> \u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u65b0\u3057\u3044\u30da\u30fc\u30b8\u306b\u30ea\u30c0\u30a4\u30ec\u30af\u30c8\u3055\u308c\u307e\u3059\u3002<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-489016\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/07\/edit_page.png\" alt=\"\" width=\"568\" height=\"195\" \/><\/figure>\n<p><em>Edit \u30dc\u30bf\u30f3\u3067\u65b0\u3057\u3044\u30da\u30fc\u30b8\u306b\u79fb\u52d5\u3059\u308b<\/em><\/p>\n<p>\u305f\u3060\u3057\u3001\u3053\u3053\u3067\u884c\u3044\u305f\u3044\u306e\u306f\u30a4\u30f3\u30d7\u30ec\u30fc\u30b9\u7de8\u96c6\u3067\u3059\u3002\u65b0\u3057\u3044\u30da\u30fc\u30b8\u3092\u8aad\u307f\u8fbc\u3080\u4ee3\u308f\u308a\u306b\u3001\u65e2\u5b58\u306e micropost \u306e\u672c\u6587\u3092\u30d5\u30a9\u30fc\u30e0\u306b\u7f6e\u304d\u63db\u3048\u3001\u30c6\u30ad\u30b9\u30c8\u3092\u66f4\u65b0\u3057\u3066\u4fdd\u5b58\u3057\u307e\u3057\u3087\u3046\u3002\u3053\u308c\u3092\u540c\u3058\u30da\u30fc\u30b8\u5185\u3067\u884c\u3044\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u3092\u884c\u3046\u306b\u306f\u3001<strong>Turbo Frame<\/strong> \u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Turbo Frame \u3092\u4f7f\u7528\u3059\u308b\u3068\u3001micropost \u306e\u4ee3\u308f\u308a\u306b\u30d5\u30a9\u30fc\u30e0\u3092\u8aad\u307f\u8fbc\u307f\u3001\u305d\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u66f4\u65b0\u3057\u3001\u30da\u30fc\u30b8\u306e\u4ed6\u306e\u90e8\u5206\u3092\u518d\u8aad\u307f\u8fbc\u307f\u3059\u308b\u3053\u3068\u306a\u304f\u66f4\u65b0\u6e08\u307f\u306e\u30df\u30cb\u6295\u7a3f\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>4. <span style=\"font-size: revert;\"><code>turbo_frame_tag<\/code> \u30d3\u30e5\u30fc\u30d8\u30eb\u30d1\u30fc\u3092 <code>_micropost.html.erb<\/code> \u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/span><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"ruby\">&lt;!--_micropost.html.erb--&gt;\n&lt;%= turbo_frame_tag micropost do %&gt;\n&lt;li id=\"micropost-&lt;%= micropost.id %&gt;\"&gt;\n# \u3053\u306e\u30bf\u30b0\u90e8\u5206\u306f\u5143\u306e\u5185\u5bb9\u3092\u4f7f\u7528\n&lt;\/li&gt;\n&lt;% end %&gt;<\/pre>\n<\/p>\n<p>\u3053\u306e\u30d5\u30ec\u30fc\u30e0\u3092\u4f7f\u7528\u3059\u308b\u3068\u3001\u30b5\u30fc\u30d0\u30fc\u304c\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u51e6\u7406\u3059\u308b\u969b\u306b HTML \u306e\u3069\u306e\u7b87\u6240\u3092\u7f6e\u304d\u63db\u3048\u308b\u3079\u304d\u304b\u3092\u6307\u5b9a\u3067\u304d\u307e\u3059\u3002 \u30d5\u30ec\u30fc\u30e0\u306b\u306f <code>turbo_frame_tag<\/code> \u3078\u306e\u5f15\u6570\u3068\u3057\u3066\u6e21\u3055\u308c\u308b\u4e00\u610f\u306e ID \u304c\u5272\u308a\u5f53\u3066\u3089\u308c\u307e\u3059\u3002 \u3053\u306e ID \u306f\u6587\u5b57\u5217\u307e\u305f\u306f\u6587\u5b57\u306e\u5834\u5408\u304c\u3042\u308a\u307e\u3059\u304c\u3001\u3053\u3053\u3067\u9069\u5207\u306a\u30d5\u30ec\u30fc\u30e0\u3092\u78ba\u5b9f\u306b\u64cd\u4f5c\u3059\u308b\u306b\u306f\u4e00\u610f\u306e ID \u304c\u5fc5\u8981\u3067\u3059\u3002\u305d\u306e\u305f\u3081\u3001\u7279\u5b9a\u306e\u30ec\u30b3\u30fc\u30c9\u306b\u4f9d\u5b58\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u5e78\u3044\u3001Turbo Frame \u306f\u975e\u5e38\u306b\u4f7f\u3044\u3084\u3059\u304f\u306a\u3063\u3066\u3044\u307e\u3059\u3002<code>micropost<\/code> \u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u3092\u6e21\u3059\u3060\u3051\u3067 <code>turbo_frame_tag<\/code> \u306b\u3088\u3063\u3066 <a href=\"https:\/\/api.rubyonrails.org\/v7.1.3.2\/classes\/ActionView\/RecordIdentifier.html#method-i-dom_id\" target=\"_blank\" rel=\"noopener\"><code>dom_id<\/code><\/a> \u30d8\u30eb\u30d1\u30fc\u304c\u30aa\u30d6\u30b8\u30a7\u30af\u30c8\u306b\u9069\u7528\u3055\u308c\u3001\u305d\u306e dom_id \u3092\u30d5\u30ec\u30fc\u30e0 ID \u3068\u3057\u3066\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u30df\u30cb\u6295\u7a3f\u3092\u30d5\u30a9\u30fc\u30e0\u306b\u7f6e\u304d\u63db\u3048\u3066\u7de8\u96c6\u3067\u304d\u308b\u3088\u3046\u306b\u3059\u308b\u305f\u3081\u3001<code>edit.html.erb<\/code> \u306b\u5bfe\u5fdc\u3059\u308b Turbo Frame \u3092\u542b\u3081\u308b\u3088\u3046\u306b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>5. <span style=\"font-size: revert;\"><code>microposts\/edit.html.erb<\/code> \u306b <code>turbo_frame_tag<\/code> \u30d8\u30eb\u30d1\u30fc\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/span><\/p>\n<pre class=\"EnlighterJSRAW\"><!--microposts\/edit.html.erb-->\n\n&lt;%= link_to \"Back\", root_path %&gt;\n&lt;%= turbo_frame_tag @micropost do %&gt;\n  &lt;%= render \"shared\/micropost_form\", micropost: @micropost %&gt;\n&lt;% end %&gt;<\/pre>\n<p><code>turbo_frame_tag<\/code> \u30b3\u30fc\u30c9\u7de8\u96c6\u30d8\u30eb\u30d1\u30fc\u306b\u6e21\u3055\u308c\u308b\u30d5\u30ec\u30fc\u30e0 ID \u306f\u4e21\u65b9\u306e\u30da\u30fc\u30b8\u3067\u4e00\u81f4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3053\u3068\u306b\u6ce8\u610f\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u3053\u3053\u3067 <em>Edit<\/em> \u30ea\u30f3\u30af\u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u304c Turbo Frame \u3092\u4f7f\u3063\u3066 <code>microposts\/[id]\/edit<\/code> \u30ea\u30af\u30a8\u30b9\u30c8\u306b\u5fdc\u7b54\u3057\u307e\u3059\u3002 \u3053\u306e\u65b0\u3057\u3044 Turbo Frame \u306e\u5185\u5bb9\u306f\u53e4\u3044\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u7f6e\u304d\u63db\u3048\u308b\u305f\u3081\u3001\u30df\u30cb\u6295\u7a3f\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3067\u306f\u306a\u304f\u30df\u30cb\u6295\u7a3f\u306e\u30d5\u30a9\u30fc\u30e0\u304c\u8868\u793a\u3055\u308c\u3001\u305d\u306e\u30c6\u30ad\u30b9\u30c8\u3092\u7de8\u96c6\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002 <em>Post<\/em>\uff08\u6295\u7a3f\uff09\u3092\u30af\u30ea\u30c3\u30af\u3057\u3066 <code>microposts\/[id]\/update<\/code> \u30eb\u30fc\u30c8\u306b\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u9001\u4fe1\u3059\u308b\u3068\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u304c Turbo Frame \u3092\u542b\u3080\u5fdc\u7b54\u3092\u518d\u9001\u4fe1\u3057\u307e\u3059\u3002Turbo \u306f\u4e00\u81f4\u3059\u308b\u30d5\u30ec\u30fc\u30e0\u3092\u898b\u3064\u3051\u3001\u305d\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u4f7f\u7528\u3057\u3066\u65e2\u5b58\u306e\u30b3\u30f3\u30c6\u30f3\u30c4\u3092\u7f6e\u304d\u63db\u3048\u307e\u3059\u3002\u3053\u3053\u3067\u306f\u66f4\u65b0\u5f8c\u306e\u30df\u30cb\u6295\u7a3f\u306b\u7f6e\u304d\u63db\u3048\u3089\u308c\u307e\u3059\u3002 \u30b3\u30f3\u30bd\u30fc\u30eb\u3092\u898b\u308b\u3068\u3001Rails \u304c\u30ea\u30af\u30a8\u30b9\u30c8\u3092\u3069\u306e\u3088\u3046\u306b\u51e6\u7406\u3059\u308b\u306e\u304b\u304c\u308f\u304b\u308a\u307e\u3059\u3002<\/p>\n<p><em>Turbo \u306b\u3088\u308b\u7de8\u96c6<\/em><\/p>\n<p>Turbo Frame \u5185\u306e\u3059\u3079\u3066\u306e\u30ea\u30f3\u30af\u307e\u305f\u306f\u30d5\u30a9\u30fc\u30e0\u306f\u30a4\u30f3\u30bf\u30fc\u30bb\u30d7\u30c8\u3055\u308c\u3001\u305d\u306e\u89aa\u30d5\u30ec\u30fc\u30e0\u307e\u305f\u306f\u305d\u306e\u30bf\u30fc\u30b2\u30c3\u30c8\u3068\u540c\u3058 ID \u306e Turbo Frame \u3092\u898b\u3064\u3051\u3088\u3046\u3068\u3057\u307e\u3059\uff08\u30ea\u30f3\u30af\u306f\u7570\u306a\u308b\u30d5\u30ec\u30fc\u30e0\u3092\u30bf\u30fc\u30b2\u30c3\u30c8\u306b\u3067\u304d\u307e\u3059\u3002\u305d\u306e\u5834\u5408\u306f\u3001<code>data: { turbo_frame: [frame id] }<\/code> \u3092 <code>link_to<\/code> \u306e\u5f15\u6570\u3068\u3057\u3066\u8ffd\u52a0\u3057\u307e\u3059\uff09\u3002<\/p>\n<p>\u3067\u306f\u3001\u30ea\u30f3\u30af\u3092 1 \u56de\u30af\u30ea\u30c3\u30af\u3057\u3066\u30da\u30fc\u30b8\u4e0a\u306e\u8907\u6570\u306e\u8981\u7d20\u3092\u66f4\u65b0\u3059\u308b\u306b\u306f\u3069\u3046\u3059\u308c\u3070\u3088\u3044\u306e\u3067\u3057\u3087\u3046\u304b\uff1f \u8981\u7d20\u3092\u7f6e\u304d\u63db\u3048\u305a\u306b\u8ffd\u52a0\u307e\u305f\u306f\u524a\u9664\u3059\u308b\u306b\u306f\uff1f \u3053\u3053\u3067\u5f79\u306b\u7acb\u3064\u306e\u304c <strong>Turbo Stream<\/strong> \u3067\u3059\u3002<\/p>\n<h2 class=\"wp-block-heading\"><strong>Turbo Stream \u306e\u4f7f\u7528\u65b9\u6cd5<\/strong><\/h2>\n<p>Turbo Stream \u306e\u80fd\u529b\u3092\u793a\u3059\u305f\u3081\u3001\u305d\u308c\u305e\u308c\u306e\u30df\u30cb\u6295\u7a3f\u306b <em>unfollow<\/em> \u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u3057\u3001\u73fe\u5728\u306e\u30e6\u30fc\u30b6\u30fc\u304c\u30d5\u30a3\u30fc\u30c9\u304b\u3089\u4ed6\u306e\u30e6\u30fc\u30b6\u30fc\u3092\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3057\u305f\u3068\u304d\u306b\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067 <code>user.following<\/code> \u306e\u6570\u3092\u66f4\u65b0\u3057\u3066\u307f\u307e\u3057\u3087\u3046\u3002 \u307e\u305f\u3001\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3057\u305f\u30e6\u30fc\u30b6\u30fc\u306e\u6295\u7a3f\u3092\u3059\u3079\u3066\u524a\u9664\u3057\u307e\u3059\u3002<\/p>\n<ol>\n<li><code>_micropost.html.erb<\/code> \u3092\u958b\u3044\u3066\u3001\u73fe\u5728\u306e\u30e6\u30fc\u30b6\u30fc\u306b\u3088\u308b\u3082\u306e\u3067\u306f\u306a\u3044\u5404\u30df\u30cb\u6295\u7a3f\u306b <em>unfollow<\/em> \u30ea\u30f3\u30af\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\"><!--microposts\/edit.html.erb-->\n\n&lt;% if current_user?(micropost.user) %&gt;\n  &lt;%= link_to \"delete\", micropost, data: { \"turbo-method\": :delete,\n                                           turbo_confirm: \"You sure?\" } %&gt;\n  &lt;%= link_to \"edit\", edit_micropost_path(micropost) %&gt;\n&lt;% elsif !current_user.nil? &amp;&amp; current_user.following?(micropost.user) %&gt;\n  &lt;%= link_to \"unfollow\",\n  relationship_path(current_user.active_relationships.find_by(followed: micropost.user), user_to_update: current_user),\n  data: {turbo_method: :delete, turbo_confirm: 'Are you sure?'} %&gt;\n&lt;% end %&gt;<\/pre>\n<p>\u3053\u306e\u30d1\u30b9\u306f\u3069\u3053\u304b\u3089\u6765\u305f\u3082\u306e\u3067\u3057\u3087\u3046\u304b\uff1f \u73fe\u5728\u306e\u30a2\u30d7\u30ea\u306f\u30e6\u30fc\u30b6\u30fc\u304c\u76f8\u4e92\u306b\u30d5\u30a9\u30ed\u30fc\u304a\u3088\u3073\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3067\u304d\u308b\u6a5f\u80fd\u3092\u3059\u3067\u306b\u5b9f\u88c5\u3057\u3066\u3044\u307e\u3059\u3002\u3055\u3089\u306b\u3001\u3053\u306e\u6a5f\u80fd\u306f Turbo Stream \u3082\u4f7f\u7528\u3057\u3066\u3044\u307e\u3059\u3002 Turbo \u306e\u7406\u89e3\u3092\u6df1\u3081\u308b\u305f\u3081\u3001\u305d\u306e\u5b9f\u88c5\u3092\u30ec\u30d9\u30eb\u30a2\u30c3\u30d7\u3057\u3001\u30e6\u30fc\u30b6\u30fc\u304c\u30e6\u30fc\u30b6\u30fc\u30da\u30fc\u30b8\u304b\u3089\u3060\u3051\u3067\u306a\u304f\u3001\u30d5\u30a3\u30fc\u30c9\u304b\u3089\u3082\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3067\u304d\u308b\u3088\u3046\u306b\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<p><code>User<\/code> \u30e2\u30c7\u30eb\u306f\u30e6\u30fc\u30b6\u30fc\u304c\u30d5\u30a9\u30ed\u30fc\u4e2d\u306e\u3059\u3079\u3066\u306e\u30e6\u30fc\u30b6\u30fc\u306e\u30ea\u30b9\u30c8 <code>(active_relationships)<\/code> \u3068\u305d\u306e\u30e6\u30fc\u30b6\u30fc\u3092\u30d5\u30a9\u30ed\u30fc\u4e2d\u306e\u5168\u30e6\u30fc\u30b6\u30fc\u306e\u30ea\u30b9\u30c8 <code>(passive_relationship)<\/code> \u3092\u7dad\u6301\u3057\u3066\u3044\u307e\u3059\u3002 \u30e6\u30fc\u30b6\u30fc\u3092\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3059\u308b\u306b\u306f\u3001\u3053\u306e 2 \u4eba\u306e\u30e6\u30fc\u30b6\u30fc\u306e\u9593\u306e <code>active_relationships<\/code> \u306e\u95a2\u9023\u4ed8\u3051\u3092\u7834\u68c4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002\u305d\u3053\u3067\u3001\u9069\u5207\u306a\u30d1\u30b9\u3092\u53d6\u5f97\u3057\u3066 <code>DELETE<\/code> \u30e1\u30bd\u30c3\u30c9\u3092\u4f7f\u7528\u3059\u308b\u30ea\u30f3\u30af\u3092\u8a2d\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\uff08Turbo \u306b\u3088\u308a\u3001\u521d\u671f\u72b6\u614b\u3067\u3053\u308c\u3092\u9054\u6210\u3067\u304d\u307e\u3059\uff09\u3002<\/p>\n<p><em>unfollow<\/em> \u3092\u30af\u30ea\u30c3\u30af\u3059\u308b\u3068\u4f55\u304c\u8d77\u304d\u308b\u306e\u304b\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-489061\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/07\/unfollow1.gif\" alt=\"\" width=\"1168\" height=\"500\" \/><\/figure>\n<p><em>Unfollow: \u6700\u521d\u306e\u5b9f\u88c5<\/em><\/p>\n<p>\u4eca\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3057\u305f\u30e6\u30fc\u30b6\u30fc\u306e\u6295\u7a3f\u304c\u30d5\u30a3\u30fc\u30c9\u306b\u6b8b\u3063\u3066\u3044\u308b\u3060\u3051\u3067\u306a\u304f\u3001\u52d5\u7684\u3067\u3042\u308b\u306b\u3082\u304b\u304b\u308f\u3089\u305a\u30ab\u30a6\u30f3\u30bf\u30fc\u306e\u66f4\u65b0\u304c\u8aa4\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3053\u308c\u3092\u4fee\u6b63\u3059\u308b\u305f\u3081\u3001\u307e\u305a\u306f\u95a2\u4fc2\u3092\u7ba1\u7406\u3059\u308b\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u3092\u78ba\u8a8d\u3057\u307e\u3057\u3087\u3046\u3002<\/p>\n<p>2. \u30d5\u30a1\u30a4\u30eb <code>relationships_controller.rb<\/code> \u3092\u958b\u304d\u307e\u3059\u3002<\/p>\n<p>\u73fe\u5728\u306e\u30b3\u30fc\u30c9\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002<\/p>\n<pre class=\"EnlighterJSRAW\"># relationships_controller.rb\n\n@user = Relationship.find(params[:id]).followed\ncurrent_user.unfollow(@user)\nrespond_to do |format|\n  format.html { redirect_to @user, status: :see_other }\n  format.turbo_stream\nend<\/pre>\n<p>\u3053\u306e\u30b3\u30fc\u30c9\u306f\u540c\u3058\u30a2\u30d7\u30ea\u306e <em>Users<\/em> \u30da\u30fc\u30b8\u304b\u3089\u30e6\u30fc\u30b6\u30fc\u3092\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3059\u308b\u3088\u3046\u306b\u8a2d\u8a08\u3055\u308c\u3066\u3044\u307e\u3059\u3002\u73fe\u5728\u306e\u30e6\u30fc\u30b6\u30fc\u3067\u5225\u306e\u30e6\u30fc\u30b6\u30fc\u3092\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3059\u308b\u3068\u3001\u305d\u306e\u30d5\u30a9\u30ed\u30ef\u30fc\u6570\u304c\u6e1b\u308b\u306e\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002 \u305f\u3060\u3057\u3001\u3053\u3053\u3067\u306f\u30d5\u30a3\u30fc\u30c9\u30da\u30fc\u30b8\u304b\u3089\u30e6\u30fc\u30b6\u30fc\u3092\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3057\u305f\u5f8c\u306b\u73fe\u5728\u306e\u30e6\u30fc\u30b6\u30fc\u306e <code>following<\/code> \u6570\u304c\u6e1b\u308b\u306e\u3092\u78ba\u8a8d\u3057\u3088\u3046\u3068\u3057\u3066\u3044\u307e\u3059\u3002 \u3053\u308c\u3092\u884c\u3046\u306b\u306f\u3001\u3069\u306e\u30e6\u30fc\u30b6\u30fc\uff08\u73fe\u5728\u306e\u30e6\u30fc\u30b6\u30fc\u304c\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3055\u308c\u305f\u30e6\u30fc\u30b6\u30fc\uff09\u306e\u30ab\u30a6\u30f3\u30bf\u30fc\u3092\u66f4\u65b0\u3057\u3088\u3046\u3068\u3057\u3066\u3044\u308b\u304b\u3092\u77e5\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>3. \u30d5\u30a1\u30a4\u30eb routes.rb \u3092\u958b\u304d\u3001\u30ab\u30a6\u30f3\u30bf\u30fc\u3092\u66f4\u65b0\u3059\u308b\u30e6\u30fc\u30b6\u30fc\u306e ID \u3092\u6e21\u305b\u308b\u8ffd\u52a0\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u542b\u3080\u30eb\u30fc\u30c8\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"EnlighterJSRAW\"># routes.rb\n\nresources :relationships, only: [:create, :destroy]\ndelete '\/relationships\/:id\/:user_to_update', to: 'relationships#destroy_with_counter_update<\/pre>\n<p>\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u3092\u6e21\u3057\u3066\u30ab\u30b9\u30bf\u30e0\u30eb\u30fc\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u305f\u3081\u3001<em>unfollow<\/em> \u30ea\u30f3\u30af\u306b\u4f7f\u7528\u3059\u308b\u30d1\u30b9\u3092\u66f4\u65b0\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"EnlighterJSRAW\"><!--microposts\/edit.html.erb-->\n\n&lt;%= link_to \"unfollow\", \"\/relationships\/#{current_user.active_relationships.find_by(followed: micropost.user).id}\/#{current_user.id}\/\",\n                data: {turbo_method: :delete, turbo_confirm: 'Are you sure?'} %&gt;<\/pre>\n<p><code>relationships_controller.rb<\/code> \u3092\u66f4\u65b0\u3059\u308b\u969b\u306b\u30d1\u30e9\u30e1\u30fc\u30bf\u30fc\u304b\u3089\u30e6\u30fc\u30b6\u30fc\u3092\u53d6\u5f97\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n<p>4. \u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092 <code>relationships_controller.rb<\/code> \u306b\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"EnlighterJSRAW\"># relationships_controller.rb\n\ndef destroy_with_counter_update\n  relationship = Relationship.find(params[:id])\n  @unfollowed_user = relationship.followed\n  current_user.unfollow(@unfollowed_user)\n\n  @user = User.find(params[:user_to_update])\n  @microposts = Micropost.where(:user_id =&gt; @unfollowed_user)\n\n  respond_to do |format|\n    format.html { redirect_to @unfollowed_user, status: :see_other }\n    format.turbo_stream\n  end\nend<\/pre>\n<p>\u3053\u306e\u30e1\u30bd\u30c3\u30c9\u306f\u30d5\u30a3\u30fc\u30c9\u304b\u3089\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3059\u308b\u30e6\u30fc\u30b6\u30fc\u3092\u51e6\u7406\u3057\u305f\u5f8c\u3001\u5373\u5ea7\u306b <code>following<\/code> \u30ab\u30a6\u30f3\u30bf\u30fc\u3092\u66f4\u65b0\u3057\u307e\u3059\u3002<\/p>\n<p>\u3053\u306e\u6642\u70b9\u3067 <code>format.turbo_stream<\/code> \u306e\u6b63\u4f53\u3068\u305d\u306e\u30e1\u30bd\u30c3\u30c9\u306e\u52d5\u4f5c\u304c\u6c17\u306b\u306a\u3063\u3066\u3044\u308b\u304b\u3068\u601d\u3044\u307e\u3059\u3002<\/p>\n<p>Turbo \u306f\u7279\u6b8a\u306a <code>turbo_stream<\/code> \u5f62\u5f0f\u3092\u30ea\u30af\u30a8\u30b9\u30c8\u306e Accept \u30d8\u30c3\u30c0\u30fc\u306b\u633f\u5165\u3057\u307e\u3059\uff08\u3053\u308c\u306f\u3001\u30d5\u30a9\u30fc\u30e0\u304c <code>POST\u3001PUT\u3001PATCH\u3001<\/code>\u307e\u305f\u306f <code>DELETE<\/code> \u30e1\u30bd\u30c3\u30c9\u3067\u9001\u4fe1\u3055\u308c\u308b\u5834\u5408\u306f\u30c7\u30d5\u30a9\u30eb\u30c8\u3067\u884c\u308f\u308c\u307e\u3059\u304c\u3001\u3053\u306e\u5f62\u5f0f\u3092\u624b\u52d5\u3067 <code>GET<\/code> \u30ea\u30af\u30a8\u30b9\u30c8\u306b\u8ffd\u52a0\u3059\u308b\u3053\u3068\u3082\u53ef\u80fd\u3067\u3059\u3002<a href=\"https:\/\/turbo.hotwired.dev\/handbook\/streams#streaming-from-http-responses\" target=\"_blank\" rel=\"noopener\">\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\uff09\u3002 \u305d\u306e\u5f8c\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306f\u3053\u306e\u30d5\u30a9\u30fc\u30de\u30c3\u30c8\u3067\u5fdc\u7b54\u3092\u9001\u4fe1\u3059\u308b\u304b\u3001\u7121\u8996\u3057\u3066 HTML \u306b\u30d5\u30a9\u30fc\u30eb\u30d0\u30c3\u30af\u3067\u304d\u307e\u3059\u3002 \u3053\u308c\u304c\u307e\u3055\u306b <code>RelationshipsController#destroy<\/code> \u306e\u30b3\u30fc\u30c9\u3067\u8d77\u304d\u3066\u3044\u308b\u3053\u3068\u3067\u3059\u3002\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306f HTML \u5f62\u5f0f\u3068 Turbo Stream \u5f62\u5f0f\u306e\u4e21\u65b9\u3067\u5fdc\u7b54\u3092\u9001\u4fe1\u3067\u304d\u307e\u3059\u3002<\/p>\n<p><code>format.turbo_stream<\/code> \u306f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u5185\u3067\u30a4\u30f3\u30e9\u30a4\u30f3\u3067\u5fdc\u7b54\u3092\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3067\u304d\u307e\u3059\u3002<\/p>\n<pre class=\"EnlighterJSRAW\">format.turbo_stream { render turbo_stream: turbo_stream.update \"following\", @user.following.count }<\/pre>\n<p>\u8907\u6570\u306e\u30bf\u30fc\u30b2\u30c3\u30c8\u3092\u66f4\u65b0\u3059\u308b\u5834\u5408\u306f\u3001<code>.turbo_stream.erb<\/code> \u62e1\u5f35\u3092\u4f7f\u3063\u3066\u5bfe\u5fdc\u3059\u308b\u30d3\u30e5\u30fc\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3092\u4f7f\u7528\u3059\u308b\u306e\u304c\u6700\u9069\u3067\u3059\u3002<\/p>\n<p>5. <code>relationships\/destroy_with_counter_update.turbo_stream.erb<\/code> \u3068\u3044\u3046\u540d\u524d\u306e\u30d5\u30a1\u30a4\u30eb\u3092\u4f5c\u6210\u3057\u3001\u305d\u3053\u306b\u4ee5\u4e0b\u306e\u30b3\u30fc\u30c9\u3092\u8cbc\u308a\u4ed8\u3051\u307e\u3059\u3002<\/p>\n<pre class=\"EnlighterJSRAW\">&lt;%= turbo_stream.update \"followers\" do %&gt;\n  &lt;%= @user.followers.count %&gt;\n&lt;% end %&gt;\n&lt;%= turbo_stream.update \"following\" do %&gt;\n  &lt;%= @user.following.count %&gt;\n&lt;% end %&gt;\n&lt;%= microposts = Micropost.where(:user_id =&gt; @unfollowed_user) %&gt;\n&lt;% microposts.each do |post| %&gt;\n  &lt;%= turbo_stream.remove post %&gt;\n&lt;% end %&gt;<\/pre>\n<p><em>Following<\/em> \u6570\u3092\u66f4\u65b0\u3059\u308b\u30b3\u30fc\u30c9\u3092\u8a73\u3057\u304f\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre class=\"EnlighterJSRAW\">&lt;%= turbo_stream.update \"following\" do %&gt;\n  &lt;%= @user.following.count %&gt;\n&lt;% end %&gt;<\/pre>\n<p>\u3053\u308c\u3089\u306e\u884c\u306f\u4f55\u3092\u884c\u3046\u306e\u3067\u3057\u3087\u3046\u304b\uff1f<\/p>\n<p>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u306f\u30ea\u30af\u30a8\u30b9\u30c8\u3078\u306e\u5fdc\u7b54\u3067 HTML \u3092\u9001\u4fe1\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 Turbo \u3067\u306f\u30da\u30fc\u30b8\u5168\u4f53\u3092\u9001\u4fe1\u305b\u305a\u306b HTML \u306e\u4e00\u90e8\u3092\u9001\u4fe1\u3067\u304d\u307e\u3059\u3002 \u3053\u306e\u5834\u5408\u306f\u5168\u30da\u30fc\u30b8\u304c\u518d\u8aad\u307f\u8fbc\u307f\u3055\u308c\u305a\u3001\u305d\u306e\u90e8\u5206\u306e\u307f\u304c\u66f4\u65b0\u3055\u308c\u307e\u3059\u3002 \u3053\u308c\u3089\u306e\u884c\u3067\u306f\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u304c\u9001\u4fe1\u3059\u308b Turbo Stream \u30e1\u30c3\u30bb\u30fc\u30b8\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u305d\u306e\u30e1\u30c3\u30bb\u30fc\u30b8\u306e HTML \u306f\u4ee5\u4e0b\u306e\u30d5\u30a9\u30fc\u30e0\u3092\u53d6\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"EnlighterJSRAW\">  \n    The contents of this tag will be applied to the target element as per the specified action, e.g. deleted, appended, replaced, etc.\n  \n<\/pre>\n<p>Turbo Stream \u3067\u306f\u3001<code>append\u3001prepend\u3001replace\u3001update\u3001remove\u3001before\u3001after\u3001<\/code>\u304a\u3088\u3073 <code>morph<\/code> \u306e\u5408\u8a08 8 \u500b\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002 \u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001<a href=\"https:\/\/turbo.hotwired.dev\/handbook\/streams#stream-messages-and-actions\" target=\"_blank\" rel=\"noopener\">\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u3067\u306f\u3082\u3046\u4e00\u5ea6\u3001<code>destroy.turbo_stream.erb<\/code> \u306b\u8ffd\u52a0\u3057\u305f\u30b3\u30fc\u30c9\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre class=\"EnlighterJSRAW\">&lt;%= turbo_stream.update \"following\" do %&gt;\n  &lt;%= @user.following.count %&gt;\n&lt;% end %&gt;<\/pre>\n<p><em>following \u30bf\u30fc\u30b2\u30c3\u30c8<\/em>\u306b <code>update<\/code> <em>\u30a2\u30af\u30b7\u30e7\u30f3<\/em> \u3092\u5b9f\u884c\u3057\uff08\u3053\u306e ID \u306e DOM \u8981\u7d20\u306f <code>shared\/_stats.html.erb<\/code> \u306e\u90e8\u5206\u306b\u3042\u308a\u307e\u3059\uff09\u3001\u30bf\u30fc\u30b2\u30c3\u30c8\u3092 <code>@user.following.count<\/code> HTML \u3067\u66f4\u65b0\u3057\u305f\u3044\u3068\u8003\u3048\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>\u3067\u306f\u3001\u30d5\u30a3\u30fc\u30c9\u304b\u3089\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3055\u308c\u305f\u30e6\u30fc\u30b6\u30fc\u306b\u3088\u308b\u3059\u3079\u3066\u306e\u6295\u7a3f\u3092\u524a\u9664\u3059\u308b\u30b3\u30fc\u30c9\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002<\/p>\n<pre class=\"EnlighterJSRAW\">&lt;%= microposts = Micropost.where(:user_id =&gt; @unfollowed_user) %&gt;\n&lt;% microposts.each do |post| %&gt;\n  &lt;%= turbo_stream.remove post %&gt;\n&lt;% end %&gt;<\/pre>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-489083\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/07\/unfollow2.gif\" alt=\"\" width=\"1168\" height=\"500\" \/><\/figure>\n<p><em>Turbo Stream \u306b\u3088\u308b\u30d5\u30a9\u30ed\u30fc\u89e3\u9664<\/em><\/p>\n<p>\u3054\u89a7\u306e\u3068\u304a\u308a\u3001\u30d5\u30a3\u30fc\u30c9\u304b\u3089\u76f4\u63a5\u30e6\u30fc\u30b6\u30fc\u3092\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3057\u305f\u3002 following \u6570\u304c\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u6b63\u3057\u304f\u66f4\u65b0\u3055\u308c\u3001\u6295\u7a3f\u304c\u30d5\u30a3\u30fc\u30c9\u304b\u3089\u6d88\u3048\u307e\u3059\u3002\u3053\u308c\u3089\u3059\u3079\u3066\u3092\u30da\u30fc\u30b8\u5168\u4f53\u3092\u518d\u8aad\u307f\u8fbc\u307f\u305b\u305a\u306b\u884c\u3048\u307e\u3059\uff01<\/p>\n<h2 class=\"wp-block-heading\"><strong>\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u306e\u4f7f\u7528\u65b9\u6cd5<\/strong><\/h2>\n<p>\u540c\u3058\u76ee\u7684\u3092<strong>\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8<\/strong>\u3067\u3082\u9054\u6210\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>Turbo Stream \u306f\u30ec\u30b3\u30fc\u30c9\u3078\u306e\u66f4\u65b0\u6642\u306b\u30e2\u30c7\u30eb\u304b\u3089\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u3067\u304d\u307e\u3059\u3002 \u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u3067\u304d\u308b\u57fa\u672c\u7684\u306a\u30a2\u30af\u30b7\u30e7\u306b\u30f3\u306f\u3001<code>remove\u3001replace\u3001append\u3001repend\u3001before\u3001after\u3001<\/code>\u304a\u3088\u3073 <code>update<\/code> \u304c\u3042\u308a\u307e\u3059\u3002 \u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001<a href=\"https:\/\/www.rubydoc.info\/gems\/turbo-rails\/2.0.4\/Turbo\/Broadcastable\" target=\"_blank\" rel=\"noopener\">\u30c9\u30ad\u30e5\u30e1\u30f3\u30c8<\/a>\u3092\u3054\u89a7\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u3053\u3053\u3067\u306f 1 \u4eba\u306e\u30e6\u30fc\u30b6\u30fc\u304c\u5225\u306e\u30e6\u30fc\u30b6\u30fc\u3092\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3057\u305f\u5834\u5408\u3001\u3064\u307e\u308a <code>Relationship<\/code> \u306e\u30a4\u30f3\u30b9\u30bf\u30f3\u30b9\u304c\u7834\u68c4\u3055\u308c\u305f\u5834\u5408\u306b\u66f4\u65b0\u3092\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u3057\u307e\u3059\u3002<\/p>\n<p>\u307e\u305a\u3001<code>RelationshipsController#destroy<\/code> \u306e\u30ec\u30b3\u30fc\u30c9\u3092\u7834\u68c4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<ol>\n<li><code>relationships_controller.rb<\/code> \u3092\u958b\u304d\u3001<code>destroy_with_counter_update<\/code> \u30e1\u30bd\u30c3\u30c9\u307e\u3067\u79fb\u52d5\u3057\u305f\u3089\u3001\u4ee5\u4e0b\u306e\u884c\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/li>\n<\/ol>\n<pre class=\"EnlighterJSRAW\">#relationships_controller.rb\n\nrelationship.destroy!<\/pre>\n<p>\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u306f\u30e2\u30c7\u30eb\u306e\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3067\u884c\u308f\u308c\u308b\u305f\u3081\u3001\u5148\u306b\u30ec\u30b3\u30fc\u30c9\u3092\u660e\u793a\u7684\u306b\u7834\u68c4\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>2. \u30d5\u30a1\u30a4\u30eb relationship.rb \u3092\u958b\u304d\u3001\u4ee5\u4e0b\u306e\u884c\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"EnlighterJSRAW\"># relationship.rb\n\nafter_destroy { broadcast_update_to \"following_stream_#{follower.id}\", target: \"following\", html: \"#{follower.following.count}\" }<\/pre>\n<p><code>after_destroy<\/code> \u306f Relationship \u30ec\u30b3\u30fc\u30c9\u304c\u7834\u68c4\u3055\u308c\u305f\u5f8c\u306b\u5b9f\u884c\u3055\u308c\u308b\u30b3\u30fc\u30eb\u30d0\u30c3\u30af\u3067\u3059\u3002 <code>broadcast_update_to<\/code> \u306f <code>update<\/code> \u30a2\u30af\u30b7\u30e7\u30f3\u3092 Turbo Stream \u306b\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u3067\u304d\u308b\u30e1\u30bd\u30c3\u30c9\u3067\u3059\u3002 \u4ed6\u306e\u30a2\u30af\u30b7\u30e7\u30f3\u3082\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u3067\u304d\u307e\u3059\u3002<\/p>\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-489099\" src=\"https:\/\/blog.jetbrains.com\/wp-content\/uploads\/2024\/07\/broadcast_completion.png\" alt=\"\" width=\"3840\" height=\"2160\" \/><\/figure>\n<p><em>\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u306e\u88dc\u5b8c<\/em><\/p>\n<p><code>broadcast_update_later_to<\/code> \u3078\u306e\u5f15\u6570\u3092\u898b\u3066\u307f\u307e\u3057\u3087\u3046\u3002 \u307e\u305a\u3001\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u5148\u306e\u30b9\u30c8\u30ea\u30fc\u30e0\u3092\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u3053\u3053\u3067\u306f\u9069\u5207\u306a\u60c5\u5831\u3092\u9069\u5207\u306a\u30e6\u30fc\u30b6\u30fc\u306b\u78ba\u5b9f\u306b\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u3067\u304d\u308b\u3088\u3046\u3001\u30e6\u30fc\u30b6\u30fc ID \u306b\u5fdc\u3058\u305f\u30b9\u30c8\u30ea\u30fc\u30e0\u540d\u3092\u9078\u3073\u307e\u3059\u3002\u305d\u3046\u3067\u306a\u3044\u5834\u5408\u3001\u73fe\u5728\u306e\u30e6\u30fc\u30b6\u30fc\u3060\u3051\u3067\u306a\u304f\u3001\u5168\u30e6\u30fc\u30b6\u30fc\u306e\u30ab\u30a6\u30f3\u30bf\u30fc\u304c\u5c11\u306a\u304f\u306a\u308a\u307e\u3059\u3002 \u3057\u305f\u304c\u3063\u3066\u3001\u30b9\u30c8\u30ea\u30fc\u30e0\u3092 <code><em>following_stream_#{follower.id}<\/em><\/code> \u3068\u540d\u4ed8\u3051\u307e\u3057\u3087\u3046\u3002 \u307e\u305f\u3001\u30bf\u30fc\u30b2\u30c3\u30c8\u3092\u6307\u5b9a\u3059\u308b\u5fc5\u8981\u3082\u3042\u308a\u307e\u3059\u3002\u3053\u306e\u6642\u70b9\u3067\u3082 ID <em><code>following<\/code><\/em> \u3068\u540c\u3058 DOM \u8981\u7d20\u306b\u306a\u3063\u3066\u3044\u307e\u3059\u3002 \u6700\u5f8c\u306b\u3001\u30ec\u30f3\u30c0\u30ea\u30f3\u30b0\u3059\u308b HTML \u3092\u63d0\u4f9b\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002 \u591a\u304f\u306e\u5834\u5408\u306f\u90e8\u5206\u30d3\u30e5\u30fc\u3067\u3042\u308a\u3001\u3053\u306e\u5834\u5408\u306e\u5f15\u6570\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n<pre class=\"EnlighterJSRAW\">after_destroy { broadcast_update_later_to \"[stream name]\", target: \"[target ID]\", partial: \"[partial name]\", locals: { ... } }<\/pre>\n<p>\u3053\u3053\u3067 HTML \u3092\u6e21\u3059\u306b\u306f\u3053\u308c\u3067\u5341\u5206\u3067\u3059\u3002<\/p>\n<p>\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u3092\u53d7\u3051\u5165\u308c\u308b\u305f\u3081\u3001\u30d3\u30e5\u30fc\u30d5\u30a1\u30a4\u30eb\u3067\u5bfe\u5fdc\u3059\u308b\u540d\u524d\u306e\u30b9\u30c8\u30ea\u30fc\u30e0\u3092\u8cfc\u8aad\u3059\u308b\u5fc5\u8981\u304c\u3042\u308a\u307e\u3059\u3002<\/p>\n<p>3. \u30d5\u30a1\u30a4\u30eb <code>shared\/_stats.html.erb<\/code> \u3092\u958b\u304d\u307e\u3059\u3002 \u5148\u982d\u884c\u306e\u5f8c\u306b\u4ee5\u4e0b\u3092\u8ffd\u52a0\u3057\u307e\u3059\u3002<\/p>\n<pre class=\"EnlighterJSRAW\"><!--shared\/_stats.html.erb-->\n\n&lt;% @user ||= current_user %&gt;\n\n&lt;%= turbo_stream_from \"following_stream_#{@user.id}\" %&gt;<\/pre>\n<p><code>destroy.turbo_stream.erb<\/code> \u306b\u8ffd\u52a0\u3057\u305f following \u30ab\u30a6\u30f3\u30bf\u30fc\u3092\u66f4\u65b0\u3059\u308b\u30b3\u30fc\u30c9\u3082\u5fd8\u308c\u305a\u306b\u524a\u9664\u3057\u307e\u3057\u3087\u3046\u3002\u3053\u308c\u306f\u3001\u4ee3\u308f\u308a\u306b\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u3067\u66f4\u65b0\u3055\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u305f\u305f\u3081\u3067\u3059\u3002<\/p>\n<p>\u3053\u308c\u3067\u30da\u30fc\u30b8\u3092\u8aad\u307f\u8fbc\u3093\u3067\u30e6\u30fc\u30b6\u30fc\u3092\u30d5\u30a9\u30ed\u30fc\u89e3\u9664\u3059\u308b\u3068\u3001\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u3067\u30ab\u30a6\u30f3\u30bf\u30fc\u304c\u66f4\u65b0\u3055\u308c\u308b\u306e\u3092\u78ba\u8a8d\u3067\u304d\u307e\u3059\u3002<\/p>\n<h3 class=\"wp-block-heading\"><strong>\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u304b\u3089 Turbo Stream \u3092\u9001\u4fe1\u3059\u308b\u4ee3\u308f\u308a\u306b\u3001\u3044\u3064\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u3092\u4f7f\u7528\u3059\u308c\u3070\u3088\u3044\u3067\u3059\u304b\uff1f<\/strong><\/h3>\n<p>\u4ee5\u4e0b\u306e\u5834\u5408\u306b\u306f\u30d6\u30ed\u30fc\u30c9\u30ad\u30e3\u30b9\u30c8\u3092\u4f7f\u7528\u3059\u308b\u3053\u3068\u3092\u304a\u52e7\u3081\u3057\u307e\u3059\u3002<\/p>\n<ul>\n<li>\u66f4\u65b0\u3092\u73fe\u5728\u306e\u30e6\u30fc\u30b6\u30fc\u3060\u3051\u3067\u306a\u304f\u3001\u540c\u3058\u30da\u30fc\u30b8\u3092\u8868\u793a\u3057\u3066\u3044\u308b\u5168\u54e1\u306b\u8868\u793a\u3059\u308b\u5fc5\u8981\u304c\u3042\u308b\u3002<\/li>\n<li>\u66f4\u65b0\u304c\u975e\u540c\u671f\u3067\u3042\u308b\u3002<\/li>\n<\/ul>\n<p>\u3069\u3061\u3089\u3082\u5fc5\u8981\u306a\u3051\u308c\u3070\u3001\u30b3\u30f3\u30c8\u30ed\u30fc\u30e9\u30fc\u304b\u3089 Trubo Stream \u3092\u4f7f\u7528\u3067\u304d\u307e\u3059\u3002<\/p>\n<h1 class=\"wp-block-heading\"><strong>\u307e\u3068\u3081<\/strong><\/h1>\n<p>\u3053\u306e\u30c1\u30e5\u30fc\u30c8\u30ea\u30a2\u30eb\u3067\u306f Turbo \u30d5\u30ec\u30fc\u30e0\u30ef\u30fc\u30af\u3068\u305d\u306e Turbo Stream \u3068 Turbo Frame \u3068\u3044\u3046\u57fa\u672c\u7684\u306a\u6982\u5ff5\u306b\u3064\u3044\u3066\u8aac\u660e\u3057\u307e\u3057\u305f\u3002 Turbo Frame \u3068 Turbo Stream \u3092 Rails \u30a2\u30d7\u30ea\u30b1\u30fc\u30b7\u30e7\u30f3\u3067\u4f7f\u7528\u3057\u3001\u30da\u30fc\u30b8\u306e\u4e00\u90e8\u3092\u30ea\u30a2\u30eb\u30bf\u30a4\u30e0\u306b\u66f4\u65b0\u3067\u304d\u308b\u3053\u3068\u3092\u5b66\u3073\u307e\u3057\u305f\u3002<\/p>\n<p>Turbo Frame \u3067\u306f\u52d5\u7684\u304b\u3064\u90e8\u5206\u7684\u306a\u66f4\u65b0\u3092\u7279\u5b9a\u306e DOM \u8981\u7d20\u306b\u9069\u7528\u3057\u3001Turbo Stream \u3067\u306f\u8907\u6570\u306e\u8981\u7d20\u3092\u30bf\u30fc\u30b2\u30c3\u30c8\u306b\u3057\u3066\u3055\u307e\u3056\u307e\u306a\u30a2\u30af\u30b7\u30e7\u30f3\u3092\u5b9f\u884c\u3067\u304d\u307e\u3059\u3002 \u305f\u3060\u3057\u3001Turbo Stream \u306e\u80fd\u529b\u3092\u8d85\u3048\u308b\u5bfe\u8a71\u6027\u3092\u6301\u305f\u305b\u305f\u3044\u5834\u5408\u306f JavaScript \u3092\u4f7f\u7528\u3057\u306a\u3051\u308c\u3070\u306a\u308a\u307e\u305b\u3093\u3002<\/p>\n<p>\u5e78\u3044\u3001Hotwire \u306f\u307e\u3055\u306b\u305d\u306e\u76ee\u7684\u306b\u5408\u81f4\u3057\u305f <strong>Stimulus<\/strong> \u3068\u3044\u3046\u5225\u306e\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8\u3092\u63d0\u4f9b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n<p>Stimulus \u306e\u8a73\u7d30\u306b\u3064\u3044\u3066\u306f\u3001\u6b21\u306e\u30d6\u30ed\u30b0\u8a18\u4e8b\u3092\u304a\u5f85\u3061\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>Ruby \u304a\u3088\u3073 Rails \u7528\u306e JetBrains IDE \u3067 Hotwire \u306e\u30b5\u30dd\u30fc\u30c8\u3092\u6d3b\u7528\u3057\u307e\u3057\u3087\u3046\u3002 \u6700\u65b0\u306e RubyMine \u30d0\u30fc\u30b8\u30e7\u30f3\u306f\u5f0a\u793e\u30a6\u30a7\u30d6\u30b5\u30a4\u30c8\u304b\u7121\u6599\u306e <a href=\"https:\/\/www.jetbrains.com\/toolbox\/app\/\" target=\"_blank\" rel=\"noopener\">Toolbox App<\/a> \u304b\u3089<a href=\"https:\/\/www.jetbrains.com\/ruby\/download\/\" target=\"_blank\" rel=\"noopener\">\u30c0\u30a6\u30f3\u30ed\u30fc\u30c9<\/a>\u3067\u304d\u307e\u3059\u3002<\/p>\n<p>\u6700\u65b0\u6a5f\u80fd\u306e\u30ea\u30ea\u30fc\u30b9\u6642\u306b\u305d\u306e\u5185\u5bb9\u3092\u8a73\u3057\u304f\u77e5\u308b\u306b\u306f\u3001<a href=\"https:\/\/twitter.com\/rubymine\" target=\"_blank\" rel=\"noopener\">RubyMine \u306e<\/a><a href=\"https:\/\/twitter.com\/rubymine\" target=\"_blank\" rel=\"noopener\">X<\/a> \u3092\u30d5\u30a9\u30ed\u30fc\u3057\u3066\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>\u4ee5\u4e0b\u306e\u30b3\u30e1\u30f3\u30c8\u6b04\u3067\u7686\u3055\u3093\u306e\u3054\u611f\u60f3\u3092\u304a\u805e\u304b\u305b\u304f\u3060\u3055\u3044\u3002\u307e\u305f\u3001\u65b0\u6a5f\u80fd\u306e\u63d0\u6848\u3068\u6295\u7968\u306f<a href=\"https:\/\/youtrack.jetbrains.com\/issues\/ruby\" target=\"_blank\" rel=\"noopener\">\u8ab2\u984c\u30c8\u30e9\u30c3\u30ab\u30fc<\/a>\u3092\u3054\u5229\u7528\u304f\u3060\u3055\u3044\u3002<\/p>\n<p>Happy Developing!<\/p>\n<p>RubyMine \u30c1\u30fc\u30e0\u4e00\u540c\u3088\u308a<\/p>\n\n\n<p><strong>\u30aa\u30ea\u30b8\u30ca\u30eb\uff08\u82f1\u8a9e\uff09\u30d6\u30ed\u30b0\u6295\u7a3f\u8a18\u4e8b\u306e\u4f5c\u8005\uff1a<\/strong><\/p>\n\n\n    <div class=\"about-author \">\n        <div class=\"about-author__box\">\n            <div class=\"row\">\n                <div class=\"about-author__box-img\">\n                    <img decoding=\"async\" src=\"https:\/\/secure.gravatar.com\/avatar\/?s=200&#038;r=g\" width=\"200\" height=\"200\" alt=\"\" loading=\"lazy\"  class=\"avatar avatar-200 wp-user-avatar wp-user-avatar-200 photo avatar-default\">\n                <\/div>\n                <div class=\"about-author__box-text\">\n                                                        <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n","protected":false},"author":1394,"featured_media":495431,"comment_status":"closed","ping_status":"closed","template":"","categories":[4156],"tags":[218,3053,8636],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/ruby\/495424"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/ruby"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/types\/ruby"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/users\/1394"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/comments?post=495424"}],"version-history":[{"count":10,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/ruby\/495424\/revisions"}],"predecessor-version":[{"id":528419,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/ruby\/495424\/revisions\/528419"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/media\/495431"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/media?parent=495424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/categories?post=495424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/tags?post=495424"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/ja\/wp-json\/wp\/v2\/cross-post-tag?post=495424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}