Advent Calendar Ranking 2021リリース(Rails7対応済)

この記事は

Ruby on Railsのカレンダー | Advent Calendar 2021 - Qiita 17日目の記事です。
さっき見たら、スカスカだったので参加してみました。
　
Rails7出たのにさびれていて悲しい。Rails peopleはどこに行ったんだ。
　

作ったもの

Advent Calendarをhatebu数で並べて見れるサイトです。去年作成したものを少し変更して、2021年版として公開しています。
（昨年作成した当時の記事はこちら。）
　
年末年始にじっくり見ようかと思います。

やったことざっくり

Rails7 Upgrade
Ruby3 Upgrade
CSS Framework変更 (ink -> bootstrap5)
2021年のadvent calendarに対応

こんな感じです。
細かいところだと、同一entryを複数のカレンダーに登録している人が複数名いて、それらを除外する処理を入れたり、Rails6で入った upsert_all で高速化したりということをやっていました。

大体すんなり行きましたが、Rails7のところはハマったところもあったので、少し細かく書くことにします。

Rails 7 Upgrade

昨日リリースしたてのRails7に対応。
　
Rails7では新しいフロントエンドの仕組みとして3つ提供されています。
ざっくり書くと、importmap、jsbundling-rails（esbuild, webpack, rollup）、Webpacker です。

もともとRails6だったので、Webpackerを使っていましたが、折角なので新しいものを使ってみようと思い、 jsbundling-rails（esbuild）を利用しました。
　

importmapは良さそうなのですが、まだ課題がありそうなのと、CSS Frameworkをnodeで管理したかったため、今回は見送り。
jsbundling-rails でjs、cssbundling-rails でcss を利用しています。開発は、foreman使ってesbuildとsassで自動でbuildして、その結果をasset pipelineでpublic以下に出力するという仕組み。
Webpackerよりは体感早くなって良い気がしますが、少し分かりにくい感じがします。　
その結果、ハマった箇所もありました。
　

ライブラリのassetsの扱い

bootstrap-icons を利用しているのですが、sassのbuildではそこまで面倒みてくれず、対処法がよく分からなかっため、asset pipelineに載せる形で vendor/assets 以下に配置しています。

フォルダ構成も配布元のcssをbaseにしたりと、Rails3とか4ぐらいの時にやったようなことを再びやっていて、少し悲しくなりました。
webpackにしておけば、苦労はなかったかも。

sass-railsのhelper

image-url、asset-url みたいなsass-railsが提供していたものをどうするのかというところですが、 sassでbuildし（cssにして）、それをsprocketsで処理するという流れなので、sass-railsが出てきません。
ということでsprocketsにその処理を任せる方法が紹介されていました。
　

# config/initializers/asset_url_processor.rb
class AssetUrlProcessor
  def self.call(input)
    context = input[:environment].context_class.new(input)
    data = input[:data].gsub(/asset-url\(["']?(.+?)["']?\)/) do |_match|
      "url(#{context.asset_path($1)})"
    end
    {data: data}
  end
end

Sprockets.register_postprocessor "text/css", AssetUrlProcessor

コメントされているのは、あのRailsCastsのryanbさんですね。
Referencing assets in CSS · Issue #22 · rails/cssbundling-rails
　
productionにデプロイして初めて気付くという、結構残念なところでもありました。
ここもRails3/4で味わったような感じがします。