📕

Lookbookで行うRailsでのコンポーネント管理

2024/03/27に公開

Ruby

Rails

Hotwire

tech

TL;DR

ViewComponentとLookbookを組み合わせる事で、Railsのみでコンポーネント管理を行うことができるので、導入手順についてまとめてみました。

https://lookbook.build/

Lookbookとは？

Rails7から導入されたUIカタログで、ブラウザ上でコンポーネントを確認することができます。

導入

Gemfile

group :development do
  gem "lookbook"
end

config/routes.rb

Rails.application.routes.draw do
  if Rails.env.development?
    mount Lookbook::Engine, at: "/lookbook"
  end
end

http://localhost:3000/lookbookにアクセスするとプレビューを確認することができます。

コンポーネントを実際に確認する

題材として前回作成したNETFLIXクローンアプリを元に確認していきます。

まず、test/配下にcomponents/previewsディレクトリを作成します。
次にpreviews/下に確認したいコンポーネント名_component_preview.rbでファイルを作成します。

今回はナビゲーションバーを確認したいので、navbar_compoent_preview.rbでファイルを作成します。

実際のコードはこのような形になります。

test/components/previews/navbar_component_preview.rb

class NavbarComponentPreview < ViewComponent::Preview
  def with_default_navbar
    render(NavbarComponent.new)
  end
end

いくつかポイントを確認しておきましょう。

コンポーネント名ComponentPreviewクラスを定義し、ViewComponent::Previewを継承
メソッドの内部で、ViewComponent(Ruby)オブジェクトを生成
生成した際に、実際のコードが参照される。(app/components/navbar_component.html.erb)
メソッド名はプレビューを確認する際のパス名に相当する

app/components/navbar_component.html.erb

<nav class="w-full fixed z-40">
  <div class="px-4 md:px-16 py-6 flex flex-row items-center transition duration-500">
    <%= image_tag 'logo.png', class: "h-4 lg:h-7" %>
    <div class="flex-row ml-8 gap-7 hidden lg:flex">
      <%= component "navbar_item", text: "Home" %>
      <%= component "navbar_item", text: "Series" %>
      <%= component "navbar_item", text: "Films" %>
      <%= component "navbar_item", text: "New & Popular" %>
      <%= component "navbar_item", text: "Browse by languages" %>
    </div>
  </div>
</nav>

実際の表示

まとめ

今回は簡単に触ってみましたが、ドキュメントを漁って活用方法について今後も考えていきたいです！
最後まで読んでいただきありがとうございました。

TL;DR

Lookbookとは？

導入

コンポーネントを実際に確認する

まとめ

Discussion