Rails wayなフロントエンド環境を試してみたメモ📝

以下のようなpropshaft、JavaScript Bundling for Rails(TypeScript, Rollup)、CSS Bundling for Rails(TailwindCSS)、View Componentを使ったRails wayなフロントエンド環境を試したみたので感想とかをメモ📝

• GitHub - rails/propshaft: Deliver assets for Rails
• GitHub - rails/jsbundling-rails: Bundle and transpile JavaScript in Rails with esbuild, rollup.js, or Webpack.
• GitHub - rails/cssbundling-rails: Bundle and process CSS in Rails with Tailwind, PostCSS, and Sass via Node.js.
• GitHub - ViewComponent/view_component: A framework for building reusable, testable & encapsulated view components in Ruby on Rails.

試したリポジトリはこちら

github.com

感想

Ruby on Railsを主戦場にしてるフルスタックなチームで控えめなフロントエンドであれば、かなり体験が良さそうだった。 assets/build配下にフロントエンドの成果物を置いてasset pipelineでhashを付与して配信するのは既存のRailsの仕組みに上手く乗っていて分かりやすい。

TailwindCSSもcliでビルドすればベンダープレフィックスも付与されるしシンプルな設定でCSS周りの統制を効かせられるのは良さそうに思った。

If you’re using the Tailwind CLI tool, vendor prefixes like this will be added automatically. https://tailwindcss.com/docs/browser-support

また開発時にはforemanを用いたbin/devでRailsとRollupとTailwindCSSの差分ビルドを同時に立ち上げて開発できて体験が割と良かった。(HMRはできない)

ViewComponentもslot等の昨今のフロントエンドフレームワークに類似した機能もありUIを共通化してデザインを合わせるような用途としては十分利用できそうに思った。

viewcomponent.org

以下のようなGitHub社製のView Componentを用いたUIライブラリもある。

github.com

結論、今まであんまり触ってなかったけど結構良さそうだった。

Tips

TailwindCSSの補完

TailwindCSSは以下のような感じで.vscode/setting.jsonに置いてあげるとerbでも補完が聞いて

{
  "tailwindCSS.includeLanguages": {
    "erb": "html"
  }
}

ViewComponentで実装したUIコンポーネントに外部からTailwindCSSを注入してカスタム可能にする

以下のような感じでoptionsにclassを渡すようにしてTailwindCSSのclassを追加できるようにした。

class Ui::Link < ViewComponent::Base
  def initialize(text:, path:, options: {})
    @text = text
    @path = path
    @options = options
    @options[:class] = (default_class + custom_class).join(' ')
  end

  def default_class
    ['ui-link', 'tw-text-blue-500']
  end

  def custom_class
    Array.wrap(@options[:class].presence || [])
  end

  def call
    link_to(@text, @path, **@options)
  end
end

参考

qiita.com