目的

Railsにデフォルトで入っているTurboの理解を深める

前提

  • 記事＝Memoモデル
  • タグ＝ActsAsTaggableOn::Tagモデル
  • このブログの管理画面にタグの追加/解除機能はもともと存在していて、追加/削除のたびに画面遷移していた
  • タグの追加/解除はシンプルにcreate/destroyアクションで行っている

やったこと

このブログの管理画面で、記事に対するタグの追加/解除を画面遷移無しでできるようにする

Viewの変更

タグの追加/削除ボタンのまわりを turbo_frame_tag ヘルパーで囲う

app/views/admin/memos/_tag.html.erb

<%= turbo_frame_tag tag do %>
<% if memo.tag_list.include?(tag.name) %>
<%= button_to tag.name, admin_memo_tags_path(memo, name: tag.name), method: :delete, class: "Label color-bg-accent-emphasis color-fg-on-emphasis m-1" %>
<% else %>
<%= button_to tag.name, admin_memo_tags_path(memo, name: tag.name), method: :post, class: "Label m-1" %>
<% end %>
<% end %>

create.turbo_stream.erbを追加

app/views/admin/memo_tags/create.turbo_stream.erb

<%= turbo_stream.replace @tag do %>
  <%= render "admin/memos/tag", memo: @memo, tag: @tag %>
<% end %>

destroy.turbo_stream.erbを追加（今のところcreate.turbo_stream.erbと同じ）

app/views/admin/memo_tags/destroy.turbo_stream.erb

<%= turbo_stream.replace @tag do %>
  <%= render "admin/memos/tag", memo: @memo, tag: @tag %>
<% end %>

Controllerの変更

createアクションで、turbo_streamのリクエストに対してcreate.turbo_stream.erbを返せるようにする

def create
    
    respond_to do |format|
    format.turbo_stream
    format.html { redirect_to(admin_memo_url(@memo), notice: "Tag added.") }
  end
end

destroyアクションで、turbo_streamのリクエストに対してdestroy.turbo_stream.erbを返せるようにする

def destroy
    
    respond_to do |format|
    format.turbo_stream
    format.html { redirect_to(admin_memo_url(@memo), notice: "Tag removed.") }
  end
end

これで画面遷移無しでタグの追加/解除ができるようになる。

現在のこのブログのタグ一覧

所感

  • Turbo Streamsのメソッドのうちreplaceは取り入れやすいと思う
  • appendやafterなどは画面構成を変えた方が良いことが多そう

参考