転職ドラフトでViewComponentは活躍できるのか？

Transcript

1. 1 転職ドラフトでViewComponentは活躍できるのか？ Ruby/RailsのヤバいTips共有会 〜転職ドラフトのビールもあるよ〜 yabaibuki.dev #4 2025/02/27 株式会社リブセンス 転職ドラフト事業部 冨⽥ 将志
2. 2 ViewComponentとは？ Railsで使えるカプセル化されたビューコンポーネントを作るためのフレームワーク • 雑に⾔うと部分テンプレート（partial）の上位互換みたいな感じに使える • partialと違って、テンプレートとロジックをまとめられる 特徴： • Controller、Model、Decorator、helperに散らかったロジックを コンポーネントにまとめられるので、依存関係をコントロールしやすい • 変数をより明⽰的に扱うことができる • 再利⽤しやすい • テストしやすい • partialより⾼速 → 転職ドラフトでは乱雑なpartialが存在したりするので⾯⽩いかもしれないと感じた https://viewcomponent.org/
3. とりあえずViewComponent使ってみる 導⼊はとても楽（転職ドラフトはRuby 3系/ Rails 7.1系だったりするので無問題）  https://viewcomponent.org/guide/getting-started.html Gemfileに下記を追加して、bundle installするだけ ジェネレータも使えるのでコンポーネントの作成もお⼿軽 3 gem "view_component" $ rails generate component Example title --template-engine slim create app/components/example_component.rb invoke rspec create spec/components/example_component_spec.rb invoke slim create app/components/example_component.html.slim ←コンポーネントの本体（ロジック周り） ←コンポーネントのテンプレート
4. ファイルの中⾝ と ブラウザで表⽰させた結果 4 # frozen_string_literal: true class ExampleComponent < ViewComponent::Base def initialize(title:) @title = title end end app/components/example_component.rb div これはExampleTemplateです div = @title app/components/example_component.html.slim（少し編集） app/views/home/playground.html.slim（適当なViewの中でコンポーネントを使う） いい感じで表示されている！ （スタイルが当たってなくて寂しいが） 適当なページで表示させる = render ExampleComponent.new(title: 'タイトルです')
5. ViewComponentの確認（プレビューとLookbook） 作ったコンポーネントをもうちょっとサクッとみる⽅法の例として下記がある • プレビュー（ViewComponent::Preview） → ActionMailer::Previewみたいなもの • Lookbook → Storybookみたいな感じのもの 5 class ExampleComponentPreview < ViewComponent::Preview layout false def with_default_title render(ExampleComponent.new(title: "Example component default")) end end 適当にファイルを作る test/components/previews/example_component_preview.rb ↑ プレビューのパスで表示させてみた。 大変シンプルで味気ない！ プレビュー
6. 6 Gemfileに追記（いい感じにマージ）して、bundle installする config/routes.rb に追記（いい感じにマージ） Lookbook https://lookbook.build/guide/installation group :development do gem "lookbook", ">= 2.3.4" end Rails.application.routes.draw do if Rails.env.development? mount Lookbook::Engine, at: "/lookbook" end end これだけでStorybookみたいな感じで見られる！ http://localhost:3000/lookbook にアクセスする
7. ViewComponentのテスト（RSpec） 簡単にテストをしてみる（転職ドラフトではRSpecを使っているのでその設定も） https://viewcomponent.org/guide/testing.html#rspec-configuration 7 require "view_component/test_helpers" require "view_component/system_test_helpers" require "capybara/rspec" RSpec.configure do |config| config.include ViewComponent::TestHelpers, type: :component config.include ViewComponent::SystemTestHelpers, type: :component config.include Capybara::RSpecMatchers, type: :component end spec/rails_helper.rb 下記を追記（いい感じにマージ）
8. 8 テストの実装＆実⾏ # frozen_string_literal: true require "rails_helper" RSpec.describe ExampleComponent, type: :component do it "renders component" do render_inline(described_class.new(title: "my title")) expect(page).to have_text "my title" end end $ docker compose exec web rspec spec/components -e DB_SETUP_SKIP=true ~~~略~~~ ExampleComponent renders component ~~~略~~~ Finished in 7.42 seconds (files took 2.91 seconds to load) 1 example, 0 failures spec/components/example_component_spec.rb テストの実行 指定のタイトルが入っていたらOKという雑なテスト 普通に動いてくれる！ ⼀連の流れとして最低限は良さそう！
9. 転職ドラフトの現状の課題 • サーバー側： ◦ Viewで使うロジックがいろんなところに分散（Controller, Model, Decorator, helperなど） ◦ テンプレート内で⾊々変数などを参照したり、条件がいっぱい書いてあって荒れがち ◦ partalで⾒通しを良くしようと頑張っているところもあるが、分割が良くないところも多い • クライアント側： ◦ 動的な挙動が必要なところにJSで挙動付けましたという、場当たり的な実装も多い🧐 ◦ コンポーネントの分け⽅の基準が適当で散らかり気味 → 実装にあまり秩序がない（⽇々負債を増やしている側の⼈間なのでスミマセン🙇） 9
10. ViewComponentは転職ドラフトではどうなの？ • サーバー側： ◦ Viewで使うロジックがいろんなところに分散（Controller, Model, decorator, helperなど） ◦ テンプレート内で⾊々変数などを参照したり、条件がいっぱい書いてあって荒れがち ◦ partalで⾒通しを良くしようと頑張っているところもあるが、分割が良くないところも多い • クライアント側： ◦ 動的な挙動が必要なところに挙動付けましたという、場当たり的な実装も多い🧐 ◦ コンポーネントの分け⽅の基準が適当で散らかり気味 10 実は現在、全部Reactで作ってクライアント側に丸っと寄せていくPJTが進⾏中！？ Railsから各ページで1つのReactのコンポーネントを返すようにしてクライアント側でページを構成（コンポーネント指向で！） →Rails側のビューテンプレートが消える予定→転職ドラフトでは積極的にViewComponentは使わないかなと ✅ ✅ 🤔 🤔 🤔 ↑Stimulusとか使わないとまとまりは良くならなさそう......（←まあ詳しくは知らない子ですが） ↑分割がそもそも良くないものについては根本から直さないといかん ViewComponentを使うとどうなる？
11. まとめ • ViewComponentは良さそう ◦ SRPなどに敏感な⾃分には良く感じた ◦ サクッと単体テストやプレビューできるのがよさそう • 転職ドラフトの年季の⼊ったシステムにもすぐに導⼊できてGood！ ◦ 皆さんのおかげでシステムのアップデートはちゃんとやっているので • 転職ドラフトでは積極的に使わなそう ◦ 絶賛React移⾏中だし、ViewComponentでがっつりリファクタする気にはならず... ◦ 新規で作る箇所は部分的には使う可能性は無きにしもあらず ◦ そもそも新規でプロダクト⽴ち上げるとかならあり あたりまえを、発明しよう。 11