haml-lintに指摘されたコードを:rubyフィルターとHelperで整理

Web技術メモ

はじめに

コード整形のため haml-lint を導入したところ、ほぼすべてのHamlファイルで警告が出てしまい、リファクタリングをしています。

今回は :ruby フィルターとHelperへの切り出しについてメモします。

問題

指摘箇所のコードは以下となります。動作はしますが、リーダブルにするために修正します。

# ❌NG
- calendar_days.each do |date|
  - post = daily_posts_by_date[date]&.first
  - is_today = date == Date.current
  - wday = date.wday
  - cell_classes = 'relative flex flex-col items-center'
  - cell_classes += ' text-blue-600' if wday == 6
  - cell_classes += ' text-red-600' if wday == 0

対策1 – :rubyフィルター

:rubyフィルターを使い、冗長に並んでいた – をまとめます。View内のコードなので、= の位置を揃えて見やすくしています。

# ✅OK
- calendar_days.each do |date|
  :ruby
    post         = daily_posts_by_date[date]&.first
    is_today     = date == Date.current
    wday         = date.wday
    cell_classes = 'relative flex flex-col items-center'
    cell_classes << ' text-blue-600' if wday == 6
    cell_classes << ' text-red-600' if wday == 0

ただし、Viewにロジックを書きすぎているので、Helperに切り出します。

対策2 – Helperへの切り出し

Helperに切り出すことで、Viewの肥大化を防げます。

- calendar_days.each do |date|
  - post = post_for(date, daily_posts_by_date)
  %div{ class: day_cell_classes(date) }
module CalendarHelper
  ...

  def day_cell_classes(date)
    base = 'relative flex flex-col items-center'
    case date.wday
    when 6 then "#{base} text-blue-600"
    when 0 then "#{base} text-red-600"
    else base
    end
  end

  def post_for(date, daily_posts_by_date)
    daily_posts_by_date[date]&.first
  end
end

タイトルとURLをコピーしました