tagメソッドを使ってビューのコードを簡潔にする方法

Railsのviewテンプレートで条件分岐が多くなると、コードが複雑になりがちです。ここでは、ユーザーのステータスごとに「テキストと色」を変更するコードを例に、tagメソッドを使用してシンプルにする方法を紹介します。

従来のコード

以下は、ユーザーのステータスに応じて異なるスタイルのバッジを表示する従来のコードです。

- case user.status 
- when "approved"
  span.badge.badge-outline-success.badge-lg = "Approved"
- when "denied"
  span.badge.badge-outline-danger.badge-lg = "Denied"
- when "pending"
  span.badge.badge-outline-info.badge-lg = "Pending"
- when "partial_denial"
  span.badge.badge-outline-warning.badge-lg = "Partial Denial"
- when "unauthorized"
  span.badge.badge-outline-dark.badge-lg = "Unauthorized"
- when "standby"
  span.badge.badge-outline-dark.badge-lg = "Standby"
- when "test"
  span.badge.badge-outline-secondary.badge-lg = "Test"

viewにこれだけの条件分岐を書と可読性も低下します。

単純にステータスのテキストを変更するだけであれば、enumメソッドで対応できます。しかし、デザインを変更する際にはHTMLのクラス名を変える必要があります。

そこでtagメソッドを使用することでシンプルにコードを記述することができます。

実装手順

まず、app/helpers/application_helper.rbファイルに以下のメソッドを追加します。

module ApplicationHelper
  def status_badge(user_status)
    case user_status
    when "approved"
      'span.badge.badge-outline-success.badge-lg Approved'.html_safe
    when "denied"
      'span.badge.badge-outline-danger.badge-lg Denied'.html_safe
    when "pending"
      'span.badge.badge-outline-info.badge-lg Pending'.html_safe
    when "partial_denial"
      'span.badge.badge-outline-warning.badge-lg Partial Denial'.html_safe
    when "unauthorized"
      'span.badge.badge-outline-dark.badge-lg Unauthorized'.html_safe
    when "standby"
      'span.badge.badge-outline-dark.badge-lg Standby'.html_safe
    when "test"
      'span.badge.badge-outline-secondary.badge-lg Test'.html_safe
    else
      'span.badge.badge-outline-secondary.badge-lg Unknown Status'.html_safe
    end
  end
end

次に、SLIM形式のviewでこのヘルパーメソッドを使用します。例えば、app/views/users/show.html.slimファイルでユーザーのステータスを表示する場合は、以下のように記述します。

= status_badge(user.status)

まとめ

Railsのviewテンプレートでの条件分岐を簡素化するには、tagメソッドを使うと便利です。ステータスごとに異なるバッジを表示する際、tagメソッドを使用してコードをシンプルかつ保守しやすくしましょう。