[Rails]TagHelpersのtagメソッドについて学ぶ

ActionView::Helpers::TagHelperとは

公式ドキュメントには以下のような説明がなされています。
HTMLタグを生成するための便利なメソッドを提供してくれるようです。

ActionView::Helpers::TagHelper provides methods to generate HTML tags programmatically both as a modern HTML5 compliant builder style and legacy XHTML compliant tags.

本記事では、その中でも特に汎用性が高いtagメソッドに焦点を当て、基本的な使い方から実践的な活用方法まで解説します。

tagメソッドとは

tagメソッドは、任意のHTMLタグを生成するためのRails標準のメソッドです。

基本的な使い方

シングルタグの生成
例えば、空の画像タグを生成する場合は以下のように書くことができます。

<%= tag.img(src: "logo.png", alt: "Site Logo") %>

出力結果:

<img src="logo.png" alt="Site Logo">

ブロック構文でのネスト
tagメソッドはブロックを使用して、ネストしたHTMLを生成することも可能です。

<%= tag.div(class: "card") do %>
  <%= tag.h2("Card Title", class: "card-title") %>
  <%= tag.p("This is a description.", class: "card-text") %>
<% end %>

出力結果:

<div class="card">
  <h2 class="card-title">Card Title</h2>
  <p class="card-text">This is a description.</p>
</div>

カスタムデータ属性の追加

data属性も簡単に設定できます。

<%= tag.button("Click Me", data: { id: "1" }, class: "btn btn-primary") %>

出力結果:

<button class="btn btn-primary" data-id="1">Click Me</button>

個人的に便利だと思った活用例

最近役に立った使い方を最後に紹介します。以下のコードを見てください。

<div>
  <p>商品情報</p>
  <% if product.available? %>
    <p class="product-status available">在庫あり</p>
  <% else %>
    <p class="product-status unavailable">在庫なし</p>
  <% end %>
</div>

viewに条件分岐の処理があるのが微妙ですね、、

これを解決してくれたのが今回のtagメソッドでした。
以下のようにヘルパーを作成して、条件分岐をviewからヘルパーに移動します。

module ProductsHelper
  def product_status_html(product)
    if product.available?
      tag.p("在庫あり", class: "product-status available")
    else
      tag.p("在庫なし", class: "product-status unavailable")
    end
  end
end

このようにすると、ビューは次のようにシンプルになります。

<div>
  <p>商品情報</p>
  <%= product_status_html(product) %>
</div>

viewでの条件分岐がなくなり、シンプルになったことに加え、責務が明確になりました。これは嬉しいですね。

補足：content_tagメソッドについて

tagメソッドと同様に、任意のHTMLタグを生成できるcontent_tagメソッドも存在します。

<%= content_tag(:img, nil, src: "logo.png", alt: "Site Logo") %>

しかし、こちらに関しては公式ドキュメントにてレガシー記法であるとされていますので、tagメソッドを使うのが無難そうですね( ͡° ͜ʖ ͡°)

Note: this is legacy syntax, see tag method description for details.
(公式ドキュメントより引用)