Rails: TurboとViewComponentを使うときの注意点（翻訳）

Rails: TurboとViewComponentを使うときの注意点（翻訳）

私たちのプロジェクトでは、ビューテンプレートのボタンスタイル統一にViewComponentを使っています。たとえば以下のような感じです。

class Forms::Button < ViewComponent::Base
  def initialize(type:, text:, options: {}, data: {}, disabled: false)
    @type = type
    @text = text
    @options = options
    @data = data
    @disabled = disabled
  end

  def call
    case @type
    #...
    when "link"
      link_to(
        @options[:href],
        data: @data,
        class: "#{@options[:text_color]} #{@options[:bg_color]} #{css_styles} app-btn",
      ) do
        tag.p(@text)
      end
    end
  end

指定されたコンポーネントでPOSTリクエストを行うために、link_toのmethodオプションを使うことに決めました。

  #...
  link_to(
    @options[:href],
    method: @options[:method] || "GET",
    data: @data,
    class: "#{@options[:text_color]} #{@options[:bg_color]} #{css_styles} app-btn",
  )
  #...

これは動きましたが、ひとつ問題がありました。他のコンポーネントのリンクが動かなくなってしまったのです。

link_toでmethodオプションを指定するとHTMLフォームを動的に作成して即座に送信します。これは@rails/ujsを使っていますが、GETフォームがTurbo Streamsのレスポンスと互換性がないことが判明しました。

修正方法は、この:methodオプションを削除し、button_tagを用いて:postリクエストを送信することでした。

さらに申し上げると、Rails 7では@rails/ujsライブラリがデフォルトではなくなりました。また、link_toのmethod属性も非推奨になったので、使ってはいけません。

<%= link_to "Delete post", post_path(post), data: { turbo_method: "delete" } %>

お知らせ: 5600人以上のRailsエンジニアが購読しているメールマガジン

元記事末尾のフォームに登録いただくと、Arkencyのベテランプログラマーによる磨き抜かれた洞察や知恵を結晶したメールマガジンを配信いたします。

関連記事

Rails: Webpackをesbuildに移行してJSのビルドを縮小・高速化（翻訳）

実践ViewComponent（1）: 現代的なRailsフロントエンド構築の心得（翻訳）