ViewComponent による コンポーネント指向 UI 開発

Transcript

1. ViewComponent による コンポーネント指向 UI 開発
2. まず、最近の宮前の個人開発の技術スタック アプリケーションフレームワークはRails → Next.js, NestJS, Go界隈とか色々試したけど、Railsの生産性が再現できず結局戻ってきました Hotwireを活用（Turbo Drive有効）SPA風 → モダンなフロントエンドアプリと同等のUXの実現は必要 ViewComponentを使ってコンポーネント指向でUI実装 → フロントエンド界隈でメジャーな手法になっているので取り入れたい CSSフレームワークはTailwind CSS → コンポーネント指向との相性 ◎ テンプレートエンジンはSlimではなくERB → コンポーネント指向によりHTMLの実装単位が小さくなるのでERBで十分 jsフレームワークはAlpine.js → Railsとの相性 ◎ コンポーネント指向との相性 ◎
3. UI開発におけるコンポーネント指向とは UIを独立した再利用可能な部品（コンポーネント）に分割 コンポーネントにHTML(DOM)、ロジック(JavaScript)、CSSをカプセル化 React、Vue.js、Angularなどフロントエンドの主要なViewフレームワークで採用されている手法 これをRailsに輸入したいというのが今回の話題
4. コンポーネントの例 検索ボックス（SearchBoxコンポーネント） SearchBoxコンポーネントはTextInputとSubmitButtonを包含 SubmitButtonのスタイルは上位のButtonコンポーネントで定義される アトミックなコンポーネントを入れ子に構成して大きなコンポーネントを組み立てていく
5. コンポーネント指向UIのメリット 再利用性 コンポーネントを他の機能や他のシステムで再利用することが容易 保守性とテスト容易性 コンポーネントは独立して機能するため、修正・更新・テストが容易 可読性 小さな単位のコンポーネントで構成されるので、コードの可読性が向上 再利用可能なデザイン デザインシステムやスタイルガイドを作成して、全体でUIデザインの一貫性を保つことができる 分業性 コンポーネントを独立して開発できるため、チーム内でのタスク分担が容易
6. コンポーネント指向UIのデメリット 最初は大変 大量のコンポーネントを作る必要がある → GitHubではPrimerというデザインシステムを公開しているので利用するのもあり （個人的にはTailwind CSSを使いたかったのでスクラッチで作ってます） ページデザインとの相性が悪い デザイナーがコーディングしたHTMLをベースに… というのはやりにくい ページをデザインするのではなく、コンポーネントをデザインする必要がある
7. Railsでコンポーネント指向UI開発するには パーシャルテンプレートで実装する？ 近いことはできそうだが、不完全 スコープ化が不完全、性能が悪い、単体テストが難しい <%# _search_box.html.erb %> <% content_for :head do %> <style> // CSS... </style> <% end %> <% # Ruby のコード... %> <script> // JavaScript のコード... </script> <form> <%= render 'text_input', name: 'q', placeholder: placeholder %> <%= render 'submit_button', label: ' 検索' %> </form>
8. ViewComponentとは Railsでコンポーネント指向UIを実装でできる （GitHub謹製、github.comのために作られたライブラリ） こんなふうにコンポーネントを実装できます 使いかた # app/components/search_box_component.rb class SearchBoxComponent < ViewComponent::Base def initialize(placeholder:) @placeholder = placeholder end end <%# app/components/search_box_component.html.erb %> <form> <%= render(TextInputComponent.new(name: 'q', placeholder: @placeholder)) %> <%= render(SubmitButtonComponent.new(label: ' 検索') %> </form> <%= render(SearchBoxComponent.new(placeholder: ' キーワードを入力')) %>
9. Rails 6.1のrender拡張とViewComponent パーシャルテンプレートを呼ぶ機能だったrenderだが Rails 6.1でrender_inメソッドを実装したオブジェクトを渡せるようになった Rails的にはこの機能を 「サードパーティー製のコンポーネントフレームワークのサポート」 と謳っている これを利用したのがViewComponent 一時「ActionView::ViewComponent」という名前でRails本体にマージされたようだが 結果的にはこの形になったよう <%= render ExampleComponent.new %> class ExampleComponent def render_in(view_context) view_context.content_tag(:p, 'Hello, World!') end end
10. 基本的な使い方 使い方 結果 # app/components/example_component.rb class ExampleComponent < ViewComponent::Base def initialize(title:) @title = title end end <%# app/components/example_component.html.erb %> <span title="<%= @title %>"><%= content %></span> <%= render(ExampleComponent.new(title: 'my title')) do %> Hello, World! <% end %> <span title="my title">Hello, World!</span>
11. 応用機能(1/3)： スロット 複数のコンテンツブロックを渡せる 使い方 # app/components/article_component.rb class ArticleComponent < ViewComponent::Base renders_one :heading renders_one :body end <%# app/components/article_component.html.erb %> <h1><%= heading %></h1> <p><%= body %></p> <%= render(ArticleComponent.new) do |component| %> <% component.with_heading do %> My Title <% end %> <% component.with_body do %> Hello, World! <% end %> <% end %>
12. 応用機能(2/3)： コレクション 配列を渡して繰り返し出力できる Viewでループを書かなくてもリストが作れる 使い方 ※ デフォルトでは自動的にコンポーネント名に基づいた引数に渡される（ここではproduct） # app/components/product_component.rb class ProductComponent < ViewComponent::Base def initialize(product:) @product = product end end <%= render(ProductComponent.with_collection(@products)) %>
13. 応用機能(3/3)： 条件付きレンダリング コンポーネントでレンダリングする条件を定義できる Viewでif分岐する必要がなくなる # app/components/confirm_email_component.rb class ConfirmEmailComponent < ViewComponent::Base def initialize(user:) @user = user end def render? @user.requires_confirmation? end end
14. View実装例 最終的にviewの中身はHTMLがなくなってコンポーネントがたくさん置かれるだけのものになる edit.html.erbの例 <%= form_with model: [:admin, @record] do |f| %> <%= render(FormComponent.new(model: @record) do %> <%= render(FormFieldTextComponent.new(form: f, attribute: :email) %> <%= render(FormFieldTextComponent.new(form: f, attribute: :nick_name) %> <%= render(FormFieldPasswordComponent.new(form: f, attribute: :password, autocomplete: 'new-password') %> <%= render(FormFieldPasswordComponent.new(form: f, attribute: :password_confirmation) %> <% end %> <% end %>
15. ちょっと改善 ヘルパーを作ると少し可読性が良くなるかも module ApplicationHelper def component(name, *args, **kwargs, &) component = "#{name.to_s.camelize}Component".constantize render(component.new(*args, **kwargs), &) end end <%= form_with model: [:admin, @record] do |f| %> <%= component :form, model: @record do %> <%= component :form_field_text, form: f, attribute: :email %> <%= component :form_field_text, form: f, attribute: :nick_name %> <%= component :form_field_password, form: f, attribute: :password, autocomplete: 'new-password' %> <%= component :form_field_password, form: f, attribute: :password_confirmation %> <% end %> <% end %>
16. Helper? Decorator? Partial? Component? かくして、共通的にデータを整形して表示する主な手段は以下の4つとなる Helper Decorator (ViewModel) Partial ViewComponent GitHub的には全部Component推しのよう <%= put_datetime user.created_at %> <%= user.decorate.created_at %> <%= render 'partial/datetime', user.created_at %> <%= render(DateTimeFormatComponent(datetime: user.created_at)) %>
17. JavaScriptコードのカプセル化 フロントエンドのコードもグローバルスコープに置かず、コンポーネントに閉じ込めたい ViewComponentではそのための機能は特に用意されていないので、工夫が必要 相性のよさそうなフレームワークとして、StimulusとAlpine.jsを紹介します Stimulus Hotwireの構成要素。Rails 7の標準のシンプルなjsフレームワーク Alpine.js Vue.jsのようなHTMLをテンプレートとしたリアクティブデータバインディングが可能な軽量フレームワーク
18. JavaScriptコードのカプセル化（Stimulus編） StimulusはHTML要素とJavaScriptコードを1:1でマッピングできる <%# counter_component.html.erb %> <div data-controller="counter"> <h1 data-counter-target="display">0</h1> <button data-action="click->counter#increment">Count Up!</button> </div> // counter_component.js import { Controller } from '@hotwired/stimulus'; export default class extends Controller { static targets = ['display']; connect() { this.count = 0; } increment() { this.count++; this.displayTarget.textContent = this.count; } }
19. JavaScriptコードのカプセル化（Alpine.js編） HTML要素とデータオブジェクトを 双方向バインディング 双方向バインディングなので、テキストボックスに「10」と入力してからCount Up!を押すと「11」になる <%# counter_component.html.erb %> <div x-data="counterComponent"> <input type="text" x-model="count"> <button @click="increment()">Count Up!</button> </div> // counter_component.js export default () => ({ count: 0, increment() { this.count++; } });
20. JavaScriptコードのカプセル化（Alpine.js編） シンプルな内容であればデータオブジェクトを用意しなくても実装できる Railsではロジックの大半はサーバサイドに行くので、フロントエンドはこれで事足りることが多いのでは シンプルながらモダンなリアクティブ実装ができ、分かりやすく書けるので、個人的にはAlpine.js推し <%# counter_component.html.erb %> <div x-data="{ count: 0 }"> <input type="text" x-model="count"> <button @click="count++">Count Up!</button> </div>
21. CSSのカプセル化 CSSもコンポーネント単位で完結するようにしたいが、ViewComponentでは機能は用意されていない classのスコーピングには色々テクニックはあるが、そもそもかなり難しい問題 「BEM」など命名ルールで凌ぐ方法 「CSS in JS」などJavaScriptでスタイルを定義する手法（React界隈） 決定的な方法がないです いっそ、CSSを書くことを諦めるという手も…
22. CSSのカプセル化（Tailwind CSS） Tailwind CSS 一押し！ class属性でスタイルを埋め込みで指定していく、ユーティリティーファーストのCSSフレームワーク 本来のCSSの思想を尊重したらあり得ない設計です 💦 しかしコンポーネントにデザインを閉じ込めたいというニーズには大変適している コンポーネント指向を採用していない場合は保守性を損なうので使わないほうがいいと思いますが <div class="flex justify-center items-center h-screen bg-gray-200"> <div class="bg-white p-8 rounded shadow-lg text-center"> <h2 class="text-2xl mb-4 text-blue-500">Hello, Tailwind CSS!</h2> <p class="text-gray-700">This is a simple example of using Tailwind CSS.</p> <button class="mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-400"> Click me </button> </div> </div>
23. コンポーネントのテスト コンポーネントは独立したオブジェクトなので単体テストが書きやすい 従来のViewはほとんど単体テスト不可能でした # search_box_component_spec.rb RSpec.describe SearchBoxComponent, type: :component do let(:component) { described_class.new(placeholder: ' キーワードを入力') } it 'renders the message' do html = render_inline(component) expect(html.text).to include(' キーワードを入力') end end
24. プレビュー コンポーネント単体でプレビューできる。フロントエンド界隈の Storybook と同等 コンポーネントをアプリケーションから切り離して単体で開発でき、カタログとして共有できる ViewComponent標準でもプレビュー機能を持っているが、 より高機能なサードパーティの Lookbook や ViewComponent::Storybook がおすすめ
25. プレビュー（定義） サンプルのrenderを書いておくだけ # search_box_component_preview.rb class SearchBoxComponentPreview < ViewComponent::Preview def default render(SearchBoxComponent.new(placeholder: ' キーワードを入力')) end end
26. プレビューをテストケースに使う おすすめ ※ デフォルトでは対象のコンポーネントはテストのファイル名を元に自動的に推測される # search_box_component_spec.rb RSpec.describe SearchBoxComponent, type: :component do it 'renders the message' do html = render_preview(:default) expect(html.text).to include(' キーワードを入力') end end