Rails 7: ERBでRubyのハッシュをHTML属性に変換する機能（翻訳）

Rails 7: ERBでRubyのハッシュをHTML属性に変換する機能（翻訳）

Rails開発者の基本教養の1つに、Rubyコードスニペットをテンプレートファイルで式展開（interpolation）する方法があり、ERBもそのひとつです。ERB以外にもhamlやslimなど様々なテンプレートエンジンがありますが、RailsではERBがデフォルトなので、以下に示す例ではERB構文を使うことにします。

ここでは、ペットの犬🐶画像を表示する例を考えてみましょう。ハッシュに以下のような属性があるとします。

  pet = { image_url: "https://data.whicdn.com/images/23516263/original.jpg",
  name: "Pommya", breed: "Pomeranian", color: "white" }

変更前

上のハッシュの値は、以下のように書くことでHTMLのimgタグに追加できます。

<img src="<%= pet[:image_url] %>", alt="<%= pet[:name] %>",
  data-breed="<%= pet[:breed] %>", data-color="<%= pet[:color] %>">

=> <img src="https://data.whicdn.com/images/23516263/original.jpg" alt="Pommya" data-breed="Pomeranean" data-color="white">

 tagメソッドやcontent_tagメソッドを使って、HTMLタグを置き換えることもできます。以下ではimgタグのすべての属性をRubyのハッシュで定義しています。

<!-- tagヘルパーの場合 -->

<%= tag.img src: pet[:image_url], alt: pet[:name],
  data: { breed: pet[:breed], color: pet[:color] } %>

<!-- content_tagヘルパーの場合 -->

<%= content_tag(:img, "", src: pet[:image_url], alt: pet[:name],
  data: { breed: pet[:breed], color: pet[:color] }) %>

=> <img src="https://data.whicdn.com/images/23516263/original.jpg" alt="Pommya" data-breed="Pomeranean" data-color="white">

変更後

ActionView::Helpers::TagHelper#tag_optionsの実装を使って、ERBの式展開でRubyのハッシュをHTML属性に変換する機能がRails 7にマージされました（#40657）。

これにより、HTMLタグにある他のHTML属性にRubyのハッシュも同居させて、ERBでも同じ結果を得ることができます。

たとえば、HTML要素に何らかのインラインスタイルを追加したいとします（ここでは通常のHTML属性を使いたいところです）。

<!-- tag.attributesの場合 -->

<img <%= tag.attributes src: pet[:image_url], alt: pet[:name],
  data: { breed: pet[:breed], color: pet[:color] } %> >

=> <img src="https://data.whicdn.com/images/23516263/original.jpg" alt="Pommya" data-breed="Pomeranean" data-color="white">

<!-- インラインスタイルを追加する -->

<img <%= tag.attributes src: pet[:image_url], alt: pet[:name],
         data: { breed: pet[:breed], color: pet[:color] } %>
         style="border-radius: 8px; background-color: white;" >

=> <img src="https://data.whicdn.com/images/23516263/original.jpg" alt="Pommya" data-breed="Pomeranean" data-color="white" style="border-radius: 8px; background-color: white;">

この変更によって、HTMLの通常のstyle属性を用いてインラインスタイルを追加できるようになります。

関連記事

Rubyの式展開（string interpolation）についてまとめ: `#{}`、`%`、Railsの`?`