RailsのViewComponent入門！初心者でもわかるコンポーネント駆動で複雑UIを整理する方法

1. ViewComponentとは？RailsのUIを整理する新しい考え方

1. ViewComponentとは？RailsのUIを整理する新しい考え方

ViewComponentは、Railsで画面を作る際に、HTMLやテンプレートをコンポーネント（部品）として扱えるようにする仕組みです。複雑なUIが増えるにつれてERBファイルが長くなり、どこに何が書かれているか分からなくなることがあります。そのような状況を整理するために生まれたのがViewComponentです。

「コンポーネント」とは、画面で繰り返し使う部品をひとまとめにして、ひとつのパーツとして使えるようにしたものです。例えば、商品カードやユーザー情報カードなど、毎回似たレイアウトを書く必要がある部分を再利用しやすくするための仕組みです。

2. なぜViewComponentが必要なのか？初心者向けに例えて解説

2. なぜViewComponentが必要なのか？初心者向けに例えて解説

RailsではERBテンプレートを使ってHTMLを書きますが、大きなアプリになると似たようなHTMLがいろいろなビューに散らばり、管理が難しくなります。これはまるで、家の中の収納がバラバラで散らばっている状態に似ています。どこに何があるのか分からなくなり、片付けるのも大変です。

ViewComponentは、この散らばった部品をひとつの箱にまとめるイメージです。ひとつの箱にまとめておけば、同じものを使いたいときにすぐ取り出せ、どのページでも統一したデザインを保てます。

3. パーシャルとの違いとは？どちらもUIを分割するけれど目的が違う

3. パーシャルとの違いとは？どちらもUIを分割するけれど目的が違う

Railsにはパーシャル（partial）という、テンプレートの一部分を分割する仕組みがあります。これは小さなHTMLを切り分けて再利用できる便利な機能です。しかし、パーシャルには次のような弱点があります。

• ロジック（処理）とテンプレートが混ざりやすい
• 複雑なUIではパーシャルが増えすぎて管理が難しくなる
• 使い回しのルールが曖昧になりがち

ViewComponentはこれらの弱点を補うために作られています。ViewComponentは、HTMLテンプレートだけでなくRubyコード（クラス）もセットで管理します。

ViewComponentの基本的な構造

class UserCardComponent < ViewComponent::Base
  def initialize(user:)
    @user = user
  end
end

<div class="user-card">
  <p><%= @user.name %></p>
  <p><%= @user.email %></p>
</div>

このように、ロジックとテンプレートをセットで扱えるため、再利用しやすく管理もしやすくなります。

4. ViewComponentを使うメリットを初心者向けに理解しよう

4. ViewComponentを使うメリットを初心者向けに理解しよう

ViewComponentを使うと、Railsのビューの管理が格段に楽になります。ここでは初心者でも理解しやすいように、メリットをやさしく説明します。

① 同じUIを何度でも使える

商品一覧、ユーザー一覧など、繰り返し登場する表示をコンポーネント化することで、どこでも同じ見た目で利用できます。修正も1か所だけで済むため、保守性が高まります。

② クラスとして扱えるため、ロジックとビューが整理される

パーシャルではテンプレート内にRubyコードを混ぜがちですが、ViewComponentではRubyコードが専用クラスに分離されるため、コードがきれいに管理できます。

③ 大規模アプリのUI管理が簡単になる

大きなアプリになるほど、テンプレート管理が難しくなります。ViewComponentはコンポーネントごとに独立したフォルダを持つため、ひとつの画面が複雑でも整理しやすくなります。

5. コンポーネントの呼び出し方法

5. コンポーネントの呼び出し方法

ViewComponentはコントローラではなく、ビュー側から呼び出して使います。実際のコード例を見てみましょう。

<%= render UserCardComponent.new(user: @user) %>

このように記述するだけで、コンポーネントのHTMLが表示されます。パーシャルよりもルールが明確で、使う側も読みやすいのが特徴です。

6. ViewComponentでUIを整理する考え方

6. ViewComponentでUIを整理する考え方

どのUIをコンポーネントにすべきか悩む初心者も多いですが、次のポイントを意識すると判断しやすくなります。

• 複数の画面で登場するUIはコンポーネント化する
• 複雑なHTMLになりやすい部分は箱にまとめるイメージで整理する
• デザイン変更の影響が広がりやすい部分はコンポーネントにしておく

特にRailsアプリの成長に合わせてUIが複雑化する場合、ViewComponentは大きな助けになります。初心者のうちからコンポーネントの考え方に慣れておくと後々とても楽になります。