viewcomponent-coder

ViewComponent のパターン

Evil Martians の view_component-contrib のパターンを使って、最新のコンポーネントベースの UI を ViewComponent で構築します。

このスキルを使う場面

• ViewComponent クラスの作成
• スロットとスタイルバリアントの実装
• Lookbook プレビューの構築
• コンポーネント単体でのテスト
• パーシャルからコンポーネントへのリファクタリング

基本原則：パーシャルよりコンポーネント

再利用可能な UI には、パーシャルより ViewComponents を優先してください。

ViewComponents を使う理由

• パーシャルよりもカプセル化に優れている
• 単体でテストできる
• 明示的な契約を持つオブジェクト指向のアプローチ
• IDE のサポートと型安全性
• パフォーマンス上の利点（テンプレートのコンパイル）

セットアップ

# Gemfile
gem "view_component"
gem "view_component-contrib"  # Evil Martians patterns
gem "dry-initializer"         # Declarative initialization
gem "lookbook"                # Component previews
gem "inline_svg"              # SVG icons

Rails テンプレートを使ってインストールします：

rails app:template LOCATION="https://railsbytes.com/script/zJosO5"

基底クラス

# app/components/application_view_component.rb
class ApplicationViewComponent < ViewComponentContrib::Base
  extend Dry::Initializer
end

# spec/components/previews/application_view_component_preview.rb
class ApplicationViewComponentPreview < ViewComponentContrib::Preview::Base
  self.abstract_class = true
end

dry-initializer を使った基本的なコンポーネント

# app/components/button_component.rb
class ButtonComponent < ApplicationViewComponent
  option :text
  option :variant, default: -> { :primary }
  option :size, default: -> { :md }
end

<%# app/components/button_component.html.erb %>
<button class="btn btn-<%= variant %> btn-<%= size %>">
  <%= text %>
</button>

スタイルバリアント DSL

手動の VARIANTS ハッシュをスタイルバリアント DSL に置き換えます：

class ButtonComponent < ApplicationViewComponent
  include ViewComponentContrib::StyleVariants

  option :text
  option :color, default: -> { :primary }
  option :size, default: -> { :md }

  style do
    base { %w[font-medium rounded-full] }

    variants {
      color {
        primary { %w[bg-blue-500 text-white] }
        secondary { %w[bg-gray-500 text-white] }
        danger { %w[bg-red-500 text-white] }
      }
      size {
        sm { "text-sm px-2 py-1" }
        md { "text-base px-4 py-2" }
        lg { "text-lg px-6 py-3" }
      }
    }

    # Apply when multiple conditions match
    compound(size: :lg, color: :primary) { "uppercase" }

    defaults { { color: :primary, size: :md } }
  end
end

<button class="<%= style(color:, size:) %>">
  <%= text %>
</button>

スロットを持つコンポーネント

class CardComponent < ApplicationViewComponent
  renders_one :header
  renders_one :footer
  renders_many :actions
end

<%= render CardComponent.new do |card| %>
  <% card.with_header do %>
    <h3>Title</h3>
  <% end %>

  <p>Body content</p>

  <% card.with_action do %>
    <%= helpers.link_to "Edit", edit_path %>
  <% end %>
<% end %>

重要なルール

1. Rails ヘルパーには helpers. を付ける

<%# CORRECT %>
<%= helpers.link_to "Home", root_path %>
<%= helpers.image_tag "logo.png" %>
<%= helpers.inline_svg_tag "icons/user.svg" %>

<%# WRONG - will fail in component context %>
<%= link_to "Home", root_path %>

例外：i18n ヘルパーの t() にはプレフィックスは不要です：

<%= t('.title') %>

2. SVG アイコンは別ファイルにする

SVG は app/assets/images/icons/ に保存し、inline_svg gem を使ってレンダリングします：

<%= helpers.inline_svg_tag "icons/user.svg", class: "w-5 h-5" %>

Ruby コードに SVG マークアップを直接記述しないでください。代わりに別ファイルを使います。

条件付きレンダリング

class AlertComponent < ApplicationViewComponent
  option :message
  option :type, default: -> { :info }
  option :dismissible, default: -> { true }

  # Skip rendering if no message
  def render?
    message.present?
  end
end

Lookbook プレビュー

# spec/components/previews/button_component_preview.rb
class ButtonComponentPreview < ApplicationViewComponentPreview
  def default
    render ButtonComponent.new(text: "Click me")
  end

  def primary
    render ButtonComponent.new(text: "Primary", color: :primary)
  end

  def all_sizes
    render_with(wrapper: :flex_row) do
      safe_join([
        render(ButtonComponent.new(text: "Small", size: :sm)),
        render(ButtonComponent.new(text: "Medium", size: :md)),
        render(ButtonComponent.new(text: "Large", size: :lg))
      ])
    end
  end
end

http://localhost:3000/lookbook でアクセスできます。

コンポーネントのテスト

RSpec.describe ButtonComponent, type: :component do
  it "renders button text" do
    render_inline(ButtonComponent.new(text: "Click me"))
    expect(page).to have_button("Click me")
  end

  it "applies style variant classes" do
    render_inline(ButtonComponent.new(text: "Save", color: :primary, size: :lg))
    expect(page).to have_css("button.bg-blue-500.text-lg")
  end
end

詳細なリファレンス

高度なパターンと例については、以下を参照してください：

• references/patterns.md - スロット、コレクション、多相コンポーネント、Turbo との統合
• references/style-variants.md - スタイルバリアント DSL の全機能、複合バリアント、TailwindMerge