RailsのViewComponentについて

概要

再利用性、テスト性を向上させるために生まれたビューコンポーネント

Reactにインスパイアされた(Presenterパターン)

Rubyオブジェクトとして直接レンダリングされるためパーシャルより高速

ViewComponentは単なるRubyオブジェクト

view_component gemが必要

構成

app

components

example_component.rb(コンポーネントクラス)

example_component.html.erb(コンポーネント)

views

xxx

index.html.erb(通常のビュー)

test

components

example_component_test.rb

code: (rb)

# app/components/example_component.rb

class ExampleComponent < ViewComponent::Base

def initialize(name:)

@name = name

end

end

code: (erb)

# app/components/example_component.html.erb

<h1>Hello, <%= @name %>!</h1>

ビューから呼び出す

code: (rb)

# app/views/xxx/index.html.erb

<%= render(ExampleComponent.new(name: "World")) %>

ビュー → コンポーネントクラス → コンポーネント の順で呼び出される

参照