Cells4 - Ruby/RailsでView componentsを実現する[Rails 4.2]


Railsの部分テンプレートに付随するロジックをコントローラから分離するためのView Componentsを実現する『apotonick/cells - GitHub』の紹介です。


🚌 Gemのインストール

Gemfileに以下を追加して、コンソールでbundleを実行してください。

# 部分テンプレートのロジック分離
gem 'cells', "~> 4.0.0"
gem "cells-slim" # cells-erb, cells-haml

🎂 Cellsのファイルの生成

comment に対する

# book の scaffold
rails g scaffold book title:string author:string price:integer
(省略)
# book の show スタイルを作成
rails g cell book show
create app/cells/book_cell.rb
create app/cells/book/show.slim

🐡 Cellsのrenderについて

部分テンプレートとして表示させたい箇所に以下を記述します。

# app/views/books/index.html.slim
table
thead
tr
th title
th author
th price
th action
tbody
-# 今回はここで @books をまとめて渡しています
-# パラメータとかも渡せます。cell style を指定する事もできます(省略するとshow)
= cell('book', collection: @books)
# => - @books.each do |book|
# => = cell('book', book) と同義です

これで book_cell.rb に対して @books を一括で渡しています。

😀 Cell::ViewModelについて

続いて先ほど渡された @books の中の book を受け取って処理する部分です。

# app/cells/book_cell.rb
class BookCell < Cell::ViewModel
include Cell::Slim # erb /haml に変更可能
# キャッシュする時間を設定できます
cache :show, expires_in: 10.minutes
# 呼び出しできるフィールドを指定
property :title, :author, :price
def show
render
end
end

イメージ的には active_decorator のようなプレゼンテーション層に近いイメージです。

🎳 CellのView

# app/cells/book/show.slim
tr
td = title
td = author
td = price
td
= link_to 'Show', model
= ' / '
= link_to 'Edit', edit_book_path(model)
= ' / '
= link_to 'Destroy', model, data: {:confirm => 'Are you sure?'}, :method => :delete

こんな感じで表示できました。

スクリーンショット 2016-01-13 0.06.56

設計思想を完全には把握できていないですが、次の説明がしっくりきました。

- ViewModelは、UI要素と結合しないプレゼンテーション・ロジックを担当
- Viewは、UI要素に結合したプレゼンテーション・ロジックを担当

🐹 Helperメソッドを使いたい場合

Helperメソッドを使いたい場合は、コントローラ的メソッドの部分に以下を記述。

# app/cells/book_cell.rb
class BookCell < Cell::ViewModel
include ActionView::Helpers::UrlHelper
include ActionView::Helpers::CaptureHelper
def author_link
content_tag :div, link_to(model.author, model.author_url)
end

適切に使いこなせれば、UI Component単位で処理を切り分けられそうです!

🗻 公式サイト

CellsのGitHubはこちら。英語ですがわかりやすいのでオススメです。

apotonick/cells · GitHub

🍮 Trailblazer framework

Cellsは、Trailblazer frameworkのコンポーネントのひとつとしても使われています。

Trailblazerは、チームの学習コストや今後のRailsの進化の方向性によっても導入すべきかは悩ましい。..

📚 おすすめの書籍